jenkins部署前端vue项目使用Docker+Jenkinsfile方式

文章目录

前言
一、前提准备
二、准备构建文件
三、Jenkins中构建项目
总结

前言

前面通过jenkins+docker的方式部署了若依前端vue项目，接下来接着学习使用Jenkinsfile的方式部署前端vue项目。

一、前提准备

已经安装好centos服务器，并且安装了jenkins和docker。gitee中新建工程，并且上传ruoyi-vue项目成功。

二、准备构建文件

打开ry-vue-ui前端项目，新建docker文件夹，新建Dockerfile、.dockerignore、nginx.conf三个配置文件。

Dockerfile镜像构建文件内容如下：

bash 复制代码

# 拉取nginx基础镜像
FROM nginx:1.21.1

# 维护者信息
MAINTAINER zhy

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

# 对外暴漏的端口号
# [注：EXPOSE指令只是声明容器运行时提供的服务端口，给读者看有哪些端口，在运行时只会开启程序自身的端口！！]
EXPOSE 80

# 启动nginx容器
CMD ["nginx", "-g", "daemon off;"]

.dockerignore忽略文件内容如下：

bash 复制代码

node_modules

nginx.conf配置文件内容如下：

bash 复制代码

worker_processes  1;



events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        # nginx 监听端口
        listen       80;
        # 服务器ip
        server_name  192.168.17.79;

        location / {
            # 前端资源存放路径
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

在前端项目根目录新建Jenkinsfile

内容如下：

bash 复制代码

pipeline {
    agent any
    // 环境变量
    environment {
        // 名称
        APP_NAME = 'vue-web'
         // 环境
        APP_PROFILE = 'prod'
         // 镜像名称
        APP_IMAGE = 'ry-vue-web'
         // 端口
        APP_PORT = 99
    }

    stages {

        stage('vue环境准备') {
            steps {
                sh """
                cd ry-vue-demo-ui/
                # 下载依赖 & 构建dist
                sudo npm install && sudo npm run build:${APP_PROFILE}
                # 拷贝dist到Docker目录下
                cp -r dist docker/
                """
            }
        }

        stage('构建Docker镜像') {
            steps {
                sh """
                    # 删除旧容器
                    docker ps -a | grep ${APP_NAME} | awk '{print \$1}' | xargs -i docker stop {} | xargs -i docker rm {}
                    # 删除旧镜像
                    docker images | grep ${APP_NAME} | awk '{print \$3}' | xargs -i docker rmi {}
                    # 进入Docker目录
                    cd ry-vue-demo-ui/docker/
                    # 构建镜像
                    docker build -f Dockerfile -t ${APP_IMAGE} . --no-cache
                """
            }
        }

        stage('运行容器') {
            steps {
                sh """
                    docker run -d -p ${APP_PORT}:80 --restart=always --name ${APP_NAME} ${APP_IMAGE}
                """
            }
        }

    }
}