docker封裝vue項目並使用jenkins發佈

1、概述

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

 

2、封裝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

 

3、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"; } }