docker封装nuxt项目使用jenkins发布

不念不忘少年蓝@ 2023-07-07 13:58 49阅读 0赞

# 一、概述 #

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

#!/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

内容如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

---
     # 需要传入变量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，使用自由风格

![1341090-20200223151247836-466057608.png][]

##  源码管理 ##

![1341090-20200223151311606-86422288.png][]

## 执行shell脚本 ##

![1341090-20200223151416032-228811677.png][]

完整命令如下：

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

点击最下面的保存，最后点击构建即可

![1341090-20200222151537145-1790948928.png][]

由于服务器运行的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";
     }
    }

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif
[1341090-20200223151247836-466057608.png]: https://img2018.cnblogs.com/i-beta/1341090/202002/1341090-20200223151247836-466057608.png
[1341090-20200223151311606-86422288.png]: https://img2018.cnblogs.com/i-beta/1341090/202002/1341090-20200223151311606-86422288.png
[1341090-20200223151416032-228811677.png]: https://img2018.cnblogs.com/i-beta/1341090/202002/1341090-20200223151416032-228811677.png
[1341090-20200222151537145-1790948928.png]: https://img2018.cnblogs.com/i-beta/1341090/202002/1341090-20200222151537145-1790948928.png