Jenkins部署Vue项目之Jenkinsfile

BugProvider 2021-06-21

2856

JenkinsFile部署Vue项目

目的：1.利用Jenkins，在前端代码提交代码到远程git仓库后，在jenkins所在的服务器自动构建docker镜像，并运行容器。2.所需资源：
一台Ubuntu PC 装 Jenkins Docker
远端Git仓库 github gitee 均可
一个Vue前端项目

大致流程：

Jenkins + Docker + Nginx

1.准备前端项目

我们使用Vue-Cli 来构建一个初始程序

安装Vue-Cli,在终端执行

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

创建Hello-World程序
```
vue create vueJenkinsfile
```
启动程序
```
cd vueJenkinsfile
npm run serve
```
测试访问是否成功,出现如下画面
项目准备好build后，进入生成的dist文件夹，浏览器打开index.html,没问题
```
npm run build
```

2.在项目中构建dockerfile

项目目录：

1.添加Dockerfile

引用nginx镜像，暴露 80端口

FROM nginx:latest

# 传参数据
ARG PROFILE

# 将dist文件中的内容复制到 `/usr/share/nginx/html/` 这个目录下面
COPY dist/  /usr/share/nginx/html/
# 用本地配置文件来替换nginx镜像里的默认配置
COPY nginx/nginx-${PROFILE}.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3.项目中添加nginx-dev.conf

user  root;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  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;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /usr/share/nginx/html;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

4.项目添加Jenkinsfile

大致流程：git从仓库下载代码 ==> 编译项目 ==> 停止运行的容器删除镜像构建新镜像 ==> 运行新镜像

pipeline {
    agent any
    environment {
        NAME = 'vuejenkinsfile'
        APP = 'fanyao666.online/fanyao/vuejenkinsfile:dev'
        credentialsId = '3c624c30-b117-47c8-9e3e-c9551498e3a5'
    }

    stages {
        stage('下载代码') {
            steps {
                echo '****************************** download code start... ******************************'
                git branch: '$branch', credentialsId: '$credentialsId', url: '$gitUrl'
            }
        }

        stage('vue编译') {  
            steps {
                echo '****************************** vue start... ******************************'
                sh 'cnpm install'
                sh 'cnpm run build'
            }
        }

        stage('构建Docker镜像') {
            steps {
                echo '****************************** delete container and image... ******************************'
                sh 'docker ps -a|grep $NAME|awk \'{print $1}\'|xargs -i docker stop {}|xargs -i docker rm {}'
                sh 'docker images|grep $NAME|grep dev|awk \'{print $3}\'|xargs -i docker rmi {}'

                echo '****************************** build image... ******************************'
                sh 'docker build --build-arg PROFILE=$nginxConfProfile -t $APP .'
            }
        }

        stage('运行容器') {
            steps {
                echo '****************************** run start... ******************************'
                sh 'docker run -d -p $appPort:80 --restart=always --name $NAME $APP'
            }
        }
    }
}