运维(1) Jenkinsfile+Dockerfile+Nginx实现前端Vue自动化部署

亦凉 2022-12-30 01:23 85阅读 0赞

### 一、前言 ###

本文将基于以下环境通过`Dockerfile`\+`Jenkinsfile`\+`Nginx` 以`jenkins流水线`的方式实现前端`Vue`自动化部署

1.  `Docker` version 1.13.1, build 4ef4b30/1.13.1
2.  `Jenkins` 2.235.2
3.  `Nginx` 1.19.1
4.  `node` 12.18.3
5.  `npm` 6.14.7
6.  `cnpm` 6.1.1

### 二、编写配置文件 ###

在vue项目中新增如下配置文件

> 温馨小提示：这里的配置文件可以根据不同环境去进行编写，本文只是个demo，举例使用时，只会放单个环境配置示例！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]

#### 1、nginx.conf ####

user  nginx;
    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;
        #tcp_nopush     on;
    
        keepalive_timeout  65;
    
        #gzip  on;
    
        # include /etc/nginx/conf.d/*.conf;
    
        server {
            listen       80;
            server_name  localhost; # 服务器地址或绑定域名
    
            #charset koi8-r;
            #access_log  /var/log/nginx/host.access.log  main;
    
            # =========================================================
            # ================== ↓↓↓↓↓↓ start ↓↓↓↓↓↓ ==================
            # =========================================================
    
            location / {
                root   /usr/share/nginx/html;
                #try_files $uri $uri/ @router;
                index  index.html index.htm;
                try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题
                #proxy_pass http://zhengqingya.gitee.io; # 代理的ip地址和端口号
                #proxy_connect_timeout 600; #代理的连接超时时间（单位：毫秒）
                #proxy_read_timeout 600; #代理的读取资源超时时间（单位：毫秒）
            }
    
            # =========================================================
            # ================== ↑↑↑↑↑↑ end ↑↑↑↑↑↑ ==================
            # =========================================================
    
            #error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   /usr/share/nginx/html;
            }
    
        }
    }

#### 2、Dockerfile ####

> 温馨小提示： `PROFILE` 为docker构建镜像时区分环境的传参数据 ex: `test`/`dev`/`prod`

FROM nginx:latest
    MAINTAINER zhengqingya
    
    # 传参数据
    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、Jenkinsfile ####

> 温馨小提示：
> 
> 1.  `credentialsId`参数值为jenkins`凭据`中的`唯一标识`  
>     ![在这里插入图片描述][20201223183111877.png]  
>     ![在这里插入图片描述][20201223183207626.png]
> 2.  大概流程： `git拉取代码` \-> `vue打包` \-> `检查下之前docker中是否存在已有的容器和镜像，有则删除` \-> `构建新的docker镜像` \-> `运行容器`

pipeline {
        agent any
        environment {
            NAME = 'small-tools-web'
            PROFILE = 'dev'
            APP = 'registry.cn-hangzhou.aliyuncs.com/zhengqing/small-tools-web:dev'
            APP_PORT = 80
        }
    
        stages {
            stage('下载代码') {
                steps {
                    echo '****************************** download code start... ******************************'
                    git branch: 'dev', credentialsId: 'xxxxxxxxxxxxxxxxx', url: 'https://gitee.com/zhengqingya/small-tools.git'
                }
            }
    
            stage('vue环境准备') {
                steps {
                    echo '****************************** vue start... ******************************'
                    sh 'cnpm install'
                    sh 'cnpm run build:dev'
                }
            }
    
            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=dev -t $APP .'
                }
            }
    
            stage('运行容器') {
                steps {
                    echo '****************************** run start... ******************************'
                    sh 'docker run -d -p $APP_PORT:80 --restart=always --name $NAME $APP'
                }
            }
        }
    }

### 三、Vue自动化部署 ###

在jenkins中`新增任务`选择`流水线` 确定

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]  
主要在高级项目选项中如下配置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]  
然后立即构建即可…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]

--------------------

> 今日分享语句：  
> 每个人的一生，都伴随着诸多的感受、体会和经历。  
> 它们或好或坏，或对或错，或让你快乐，或使你痛苦，但正是这些过程，让你一步步走向了成熟。  
> 也许曾经的我们，年少轻狂，锋芒毕露，有一股初生牛犊不怕虎的气势。可随着年龄的增长，我们慢慢学会了做一个温润、平和且安静的人。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20221120/f284710e451843c1b77717c7480e5062.png
[20201223183111877.png]: /images/20221120/87e9063ce81f408a920ff65a93757243.png
[20201223183207626.png]: /images/20221120/0250a2023ccc4212b159ee1c0823cacd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]: /images/20221120/8b292b78e1ce4712b15bb6b8a24a9cf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]: /images/20221120/18ee2fc49ef7443b8b2846a21a6cacc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 3]: /images/20221120/5c2ecefcd67f4727b8efee0a8498c04f.png