docker封裝nuxt項目使用jenkins發布

一、概述

vue項目可以打一個dist靜態資源包，直接使用Nginx發布即可。

但是nuxt項目無法像vue那樣，可以打一個dist靜態資源包。

需要安裝Node.js，並使用npm install 安裝依賴包才行。

 

現在由於要上docker，需要將nuxt項目和nojs.js依賴包打成一個鏡像才行。

 

二、封裝docker鏡像

目錄結構

在服務器新建目錄/data/nuxt_web/，目錄結構如下：

./
├── dockerfile
├── nuxt_base
│   ├── code
│   │   └── package.json
│   └── dockerfile
└── update.sh

 

先來看一下基礎鏡像nuxt_base

/data/nuxt_web/nuxt_base/dockerfile

FROM alpine:3.9
COPY code /code
WORKDIR /code
RUN echo "https://mirrors.aliyun.com/alpine/v3.9/main" > /etc/apk/repositories \
    && apk add nodejs npm \
    && npm config set registry http://registry.npm.taobao.org/ \
    && npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ \
    && npm install

這里設定了更新源為taobao

 

/data/nuxt_web/nuxt_base/code/package.json是用來存放nuxt項目需要的依賴包列表，使用npm install，就會安裝package.json里面列舉的依賴包。

package.json內容我就不貼了，根據實際情況來。

 

/data/nuxt_web/dockerfile

FROM nuxt_base:v1
COPY code /code 
WORKDIR /code
EXPOSE 3002
#RUN cd /code && npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ &&/usr/bin/npm install
CMD /usr/bin/npm run build

這里注釋掉了npm install執行命令。為什么呢？因為nuxt_base:v1鏡像已經安裝了依賴包，不需要再安裝一次了。

 

/data/nuxt_web/update.sh

#!/bin/bash
# 判斷是否更新基本鏡像

diff /data/code/nuxt_web_3002/code/package.json /data/nuxt_web/nuxt_base/code/package.json
if [ `echo $?` == 0 ];then
  echo true
else
  echo false
  #exit
  \cp /data/code/nuxt_web_3002/code/package.json /data/nuxt_web/nuxt_base/code/package.json
  cd /data/nuxt_web/nuxt_base
  docker build -t nuxt_base:v1 . --no-cache
fi

 

這個腳本，是用來判斷。項目中的package.json是否和nuxt_base:v1鏡像中的package.json是否一致。

如果一致，就更新基礎鏡像，否則不更新。

 

基礎鏡像

先來封裝基礎鏡像

cd /data/nuxt_web/nuxt_base
docker build -t nuxt_base:v1 .

 

nuxt項目鏡像

將/data/nuxt_web/dockerfile 拷貝到 nuxt項目根目錄，使用命令構建

docker build -t nuxt_web:v1 .

 

三、jenkins發布nuxt項目

由於只有一個nuxt項目，不需要將dockerfile提交到github中，放到服務器的固定位置即可。

發布時，將dockerfile拷貝到目錄即可。先執行update.sh，再執行docker build命令。

 

環境介紹

gitlab版本：GitLab 社區版 10.5.1 

jenkins版本：2.219

服務器：centos 7.6

 

由於jenkins服務器的操作系統為：centos 6.9，它不能安裝docker，因此docker打包動作需要在服務器上面執行。

ansible分組

vi /etc/ansible/hosts

內容如下：

[test_nuxt]
192.168.28.34

 

ansible playbook

vi /opt/ansible/test/docker_nuxt.yml

內容如下：

---
 # 需要傳入變量HOSTS
 # 分別表示: 主機
 - hosts: "{{ HOSTS }}"
   remote_user: root
   become: yes
   become_method: sudo
   # 聲明變量
   vars:
     PROJECT_NAME: "nuxt_web"
     PORT: 3002
     # 遠程項目基礎目錄
     BASE_DIR: "/data/code"
     # 遠程項目目錄名
     PROJECT_DIR: "{{ PROJECT_NAME }}_{{ PORT }}"
     # 完整的jenkins 項目跟路徑
     JENKINS_DIR: "/data/jenkins_data/workspace/{{ JOB_NAME }}"
   tasks:
    #刪除原來的目錄
     - name: delete directory
       file:
         path: "{{  BASE_DIR }}/{{ PROJECT_DIR }}/code/"
         state: absent
    #同步文件到目標服務器
     - name: synchronous web static file
       synchronize:
         src: "{{ JENKINS_DIR }}/"
         dest: "{{  BASE_DIR }}/{{ PROJECT_DIR }}/code/"

    #更新基礎鏡像
     - name: update base image
       shell: bash /data/nuxt_web/update.sh

    #復制dockerfile
     - name: copy dockerfile
       shell: \cp /data/nuxt_web/dockerfile {{  BASE_DIR }}/{{ PROJECT_DIR }}/

    # 打包鏡像
     - name: docker build
       shell: cd {{ BASE_DIR }}/{{ PROJECT_DIR }} && docker build -t {{ PROJECT_NAME }}:{{ BUILD_NUMBER }} .
       # 由於有fsevent警告信息，要忽略警告
       ignore_errors: yes

    #刪除之前的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 }}:{{ PORT }} {{ PROJECT_NAME }}:{{ BUILD_NUMBER }}
     - name: view port,Wait for 45 seconds
       shell: sleep 45;docker exec {{ PROJECT_NAME }} netstat -anpt|grep {{ PORT }}

這個項目默認采用3002端口，因此也使用3002端口來映射。

 

新建job

新建一個job，名字為：test_nuxt，使用自由風格

 

 源碼管理

 

 

執行shell腳本

 

 完整命令如下：

ansible-playbook -v /opt/ansible/test/docker_nuxt.yml -e "HOSTS=test_nuxt JOB_NAME=${JOB_NAME} BUILD_NUMBER=${BUILD_NUMBER}"

 

點擊最下面的保存，最后點擊構建即可

 

由於服務器運行的vue項目，映射的是非80端口，域名解析到這台服務器，是無法訪問的。

因此需要使用Nginx轉發一下即可。

server {
 listen 80;
 server_name nuxt.baidu.com;
 access_log /var/log/nginx/nuxt.baidu.com.access.log main;
 error_log /var/log/nginx/nuxt.baidu.com.error.log;
 location / {
        proxy_pass http://127.0.0.1:3002;
        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";
 }
}