jenkins自动化部署前端vue+docker项目

一、准备工作

默认你的服务器centos已经搭建完成，同时已经安装了jenkins和docker。
接下来去下载开源项目ruoyi并上传到自己的gitee中。

二、编写dockerfile文件

打开项目工程，在rouyi-vue-ui下新建docker文件夹,并新建Dockerfile文件、.dockerignore忽略文件、nginx.conf配置文件

Dockerfile文件内容如下：

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

# 维护者信息
MAINTAINER zhy

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

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

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

.dockerignore内容如下

node_modules

nginx.conf内容如下

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;
        }
    }
}

提交代码到gitee仓库

三、新建jenkins任务

打开jenkins，新建任务

填写描述

源码管理选择git，粘贴gitee项目地址


选择凭证，没有的话点击添加即可

构建步骤选择执行shell

添加以下内容

# 先进入到前端工程中
cd ry-vue-demo-ui
# 安装依赖
echo "<-------------------------------------->"
echo "安装依赖"
npm install
echo "<-------------------------------------->"
echo "打包项目"
npm run build:prod
echo "拷贝文件到docker目录下"
cp -r dist/ docker/
cd docker
echo "构建镜像"
docker build -f Dockerfile -t ruoyi-vue . --no-cache
# 删除执行的容器
docker ps -a | grep ruoyi-vue | awk '{print $1}' | xargs -i docker stop {} | xargs -i docker rm {}
echo "运行容器"
docker run -d -p 81:80 --restart=always --name ruoyi-vue ruoyi-vue

保存，立即构建

查看控制台日志输出

结果报错了，说nginx.conf文件不存在

路径写的有问题，这里已经进入到docker目录下了，直接拷贝nginx.conf

修改Dockerfile，提交代码，接着构建项目，这次就构建成功了

打开浏览器访问试试，部署成功