jenkins发布vue

1. Jenkins容器安装npm / nodejs

1.1 进入容器
docker exec -it jenk bash

1.2. 更换源
sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

1.3. 安装nodejs
apk add --no-cache nodejs

1.4. 安装npm
apk add --no-cache npm

2. 代码准备

代码根目录下新增两个文件, 分别为Dockerfile, Jenkinsfile, 内容如下

2.1 Dockerfile内容

FROM nginx
EXPOSE 80
RUN rm -rf /usr/share/nginx/html/*
COPY dist /usr/share/nginx/html
ENTRYPOINT nginx -g "daemon off;"

2.2 Jenkinsfile内容

设镜像名为image_name
设容器名为container_name

pipeline {
  agent any
  stages {
    stage('NpmBuild') {
      steps {
        sh '''
        npm install
        npm run build:prod
        '''
      }
    }

    stage('DockerBuild') {
      steps {
        sh '''
            docker build -t image_name .
            '''
      }
    }

    stage('Deploy') {
      steps {
        sh '''if [ $(docker ps -aq --filter name=container_name) ];then docker rm -f container_name;fi
        docker run \\
            --detach \\
            --publish 80:80 \\
            --name container_name \\
            -v /etc/nginx/conf.d/web.conf:/etc/nginx/conf.d/web.conf \\
            image_name'''
      }
    }
  }
}

3. 提前准备nginx的配置文件web.conf

在Jenkins的宿主机下执行以下操作

vi /etc/nginx/conf.d/web.conf

server {
    listen 80;
    server_name 192.168.37.227;
    client_max_body_size 100M;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        error_page  404    /;
}
}

4. 发布

准备工作完成以后按照上篇文章https://www.jianshu.com/p/0470157ca9f1的第四步开始创建流水线即可