---

前言

前面通過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是在前端工程下面，沒有在整個項目下面，所以需要加前端項目路徑。

保存，接著構建

構建成功，瀏覽器訪問項目測試

---

總結

以上就是今天要講的內容，本文介紹了jenkins部署使用Jenkinsfile文件部署前端vue項目，Jenkinsfile文件的作用就是把腳本命令放在文件中統一管理。