标签：vue log PROJECT nginx proxy jenkins docker
一、概述
vue项目可以打一个dist静态资源包，直接使用Nginx发布即可。
现在由于要上docker，需要将vue项目和nginx打成一个镜像才行。
项目结构如下：
./ ├── build │ └── build.js ├── config │ └── index.js ├── dist │ ├── index.html │ └── static ├── index.html ├── package.json ├── README.md ├── src │ └── App.vue └── static
二、封装docker镜像
这里使用镜像nginx:1.17.8
登录服务器
创建目录
mkdir -p /data/nginx
nginx.conf
这个文件是从nginx:1.17.8拷贝出来的，并做了一定的优化，完整内容如下：
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
worker_rlimit_nofile 65535;
events {
use epoll;
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 120;
types_hash_max_size 2048;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
client_max_body_size 2048m;
client_body_buffer_size 128k;
proxy_connect_timeout 10;
default_type application/octet-stream;
gzip on;
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
server_tokens off;
include /etc/nginx/mime.types;
include /etc/nginx/conf.d/*.conf;
}
View Code
default.conf
这个文件是从nginx:1.17.8拷贝出来的，为了适应vue，做了一定的改动，完整内容如下：
server {
listen 80;
server_name localhost;
charset utf-8;
access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
View Code
dockerfile
主要工作就是覆盖配置文件，拷贝dist包，并设置权限。
FROM nginx:1.17.8 ADD nginx.conf /etc/nginx/nginx.conf ADD default.conf /etc/nginx/conf.d/default.conf ADD dist /usr/share/nginx/html RUN chown nginx:nginx -R /usr/share/nginx/html EXPOSE 80 ENTRYPOINT [ "nginx", "-g", "daemon off;"]View Code
/data/nginx完整目录结构如下：
./ ├── default.conf ├── dockerfile └── nginx.conf
将这3个文件拷贝到vue项目，使用docker build命令，就可以打包了。
创建代码目录
mkdir -p /data/code
安装组件，用于jenkins发布
yum install -y rsync lsof
三、jenkins发布
由于有多个vue项目，每个vue项目的dockerfile都是一样的。因此，不需要将dockerfile提交到github中，放到服务器的固定位置即可。
发布时，将dockerfile拷贝到目录即可。
环境介绍
gitlab版本：GitLab 社区版 10.5.1
jenkins版本：2.219
服务器：centos 7.6
由于jenkins服务器的操作系统为：centos 6.9，它不能安装docker，因此docker打包动作需要在服务器上面执行。
ansible分组
vi /etc/ansible/hosts
内容如下：
[test_vue] 192.168.28.34
ansible playbook
vi /opt/ansible/test/docker_vue.yml
内容如下：
---
# 需要传入变量HOSTS，ENV，PROJECT_NAME，PORT
# 分别表示: 主机，环境，项目名，端口
- hosts: "{{ HOSTS }}"
remote_user: root
become: yes
become_method: sudo
# 声明变量
vars:
# 远程项目基础目录
BASE_DIR: "/data/code"
# 远程项目目录名
PROJECT_DIR: "{{ ENV }}_{{ PROJECT_NAME }}_{{ PORT }}"
# 完整的jenkins 项目跟路径
JENKINS_DIR: "/data/jenkins_data/workspace/{{ JOB_NAME }}"
tasks:
#删除原来的包
- name: delete directory
file:
path: "{{ BASE_DIR }}/{{ PROJECT_DIR }}/dist"
state: absent
#同步web静态文件到目标服务器
- name: synchronous web static file
synchronize:
src: "{{ JENKINS_DIR }}/dist"
dest: "{{ BASE_DIR }}/{{ PROJECT_DIR }}/"
#复制nginx default.conf和dockerfile
- name: copy nginx conf and dockerfile
shell: \cp /data/nginx/* {{ BASE_DIR }}/{{ PROJECT_DIR }}/
# 打包镜像
- name: docker build
shell: cd {{ BASE_DIR }}/{{ PROJECT_DIR }} && docker build -t {{ PROJECT_NAME }}:{{ BUILD_NUMBER }} .
#删除之前的docker
- name: docker rm image
shell: docker rm -f {{ PROJECT_NAME }}
ignore_errors: yes
#启动docker
- name: docker run image
# 提前创建bridge网络：docker network create testnet
shell: docker run -it -d --restart=always --name {{ PROJECT_NAME }} --network testnet --network-alias {{ PROJECT_NAME }} -p {{ PORT }}:80 {{ PROJECT_NAME }}:{{ BUILD_NUMBER }}
- name: view port,Wait for 1 seconds
shell: sleep 1;lsof -i:{{ PORT }}
View Code
由于1台服务器有多个vue项目，因此需要使用非80端口来映射。
新建job
新建一个job，名字为：test_vue，使用自由风格
源码管理
执行shell脚本
完整命令如下：
ansible-playbook -v /opt/ansible/test/docker_vue.yml -e "HOSTS=test_vue JOB_NAME=${JOB_NAME} BUILD_NUMBER=${BUILD_NUMBER} ENV=test PROJECT_NAME=web_vue PORT=7000"
点击最下面的保存，最后点击构建即可
由于服务器运行的vue项目，映射的是非80端口，域名解析到这台服务器，是无法访问的。
因此需要使用Nginx转发一下即可。
server {
listen 80;
server_name vue.baidu.com;
access_log /var/log/nginx/ vue.baidu.com.access.log main;
error_log /var/log/nginx/ vue.baidu.com.error.log;
location / {
proxy_pass http://127.0.0.1:7000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 300s;
proxy_send_timeout 300s;
proxy_read_timeout 300s;
# websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
标签：vue,log,PROJECT,nginx,proxy,jenkins,docker 来源： https://www.cnblogs.com/xiao987334176/p/12345304.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。