当前位置：首页 > news >正文

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

news 2025/7/13 7:07:08

文章目录

一、准备工作
二、编写dockerfile文件
三、新建jenkins任务

一、准备工作

默认你的服务器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;# 服务器ipserver_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，提交代码，接着构建项目，这次就构建成功了

打开浏览器访问试试，部署成功
在这里插入图片描述