---

一、準備工作

默認你的服務器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，提交代碼，接著構建項目，這次就構建成功了

打開瀏覽器訪問試試，部署成功