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

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

news 2025/7/14 6:15:10

文章目录

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

前言

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

一、前提准备

已经安装好centos服务器，并且安装了jenkins和docker。gitee中新建工程，并且上传ruoyi-vue项目成功。
在这里插入图片描述

二、准备构建文件

打开ry-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.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;}}
}

在前端项目根目录新建Jenkinsfile
在这里插入图片描述

内容如下：

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/# 下载依赖 & 构建distsudo 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}"""}}}
}

提交代码到gitee中

注意：以上文件内容涉及到的路径均需和你自己的路径匹配，不一致记得修改。

三、Jenkins中构建项目

打开jenkins新建任务,选择流水线项目
在这里插入图片描述
增加描述信息

流水线选择SCM

选择git

复制你gitee中的项目地址

粘贴到jenkins中，选择凭证和分支，没有凭证的话，点击添加自行添加gitee的用户凭证

然后保存，立即构建，可以查看控制台输出
我这里报错了，是因为在这个项目下没有找到Jenkinsfile文件，他可能有个检测机制
在这里插入图片描述
点击配置，修改Jenkinsfile的路径,因为我的Jenkinsfile是在前端工程下面，没有在整个项目下面，所以需要加前端项目路径。

保存，接着构建

构建成功，浏览器访问项目测试