前言

本文詳細(xì)記錄如何使用 Coding (以 Jenkinsfile 為核心) 和 Nginx 部署 Vue 項(xiàng)目，包含完整流程、配置細(xì)節(jié)及注意事項(xiàng)，為開發(fā)者提供一個(gè)高效的實(shí)踐參考。

---

準(zhǔn)備工作

這里借用一個(gè)優(yōu)秀的開源項(xiàng)目做演示：芋道源碼/yudao-ui-admin-vue2。
以下是準(zhǔn)備工作的相關(guān)指引和教程，確保服務(wù)器環(huán)境和工具安裝已完成：

1. 配置服務(wù)器環(huán)境，確保安裝以下組件：

   • Docker 安裝詳細(xì)教程
   • MySQL 安裝詳細(xì)教程
   • Redis 安裝詳細(xì)教程
   • Coding 全流程自動(dòng)化部署指南

2. 安裝 Nginx：

   • Nginx WebUI 指南和 Docker 部署

---

構(gòu)建 Vue 項(xiàng)目

以下是構(gòu)建 Vue 項(xiàng)目的詳細(xì)步驟：

1. 修改項(xiàng)目域名并提交至 Coding 倉庫

在下載代碼后，需修改項(xiàng)目中的域名配置，然后提交到 Coding 倉庫中。例如：

---

2. 在 Coding 中創(chuàng)建自定義構(gòu)建計(jì)劃

創(chuàng)建自定義構(gòu)建計(jì)劃，并配置 Jenkinsfile，示例如下：

pipeline {agent anystages {stage('檢出') {steps {checkout([$class: 'GitSCM',branches: [[name: GIT_BUILD_REF]],userRemoteConfigs: [[url: GIT_REPO_URL,credentialsId: CREDENTIALS_ID]]])}}stage('安裝依賴') {steps {sh 'npm install'}}stage('編譯') {steps {sh 'npm run build:dev'}}stage('部署到遠(yuǎn)端服務(wù)器') {steps {script {def remoteConfig = [:]remoteConfig.name = "my-remote-ltby"remoteConfig.host = "${REMOTE_HOST}"remoteConfig.port = 22remoteConfig.allowAnyHosts = truewithCredentials([usernamePassword(credentialsId: "${REMOTE_CRED}",passwordVariable: 'password',usernameVariable: 'userName')]) {remoteConfig.user = userNameremoteConfig.password = passwordstage("通過 SSH 執(zhí)行命令") {sshPut(remote: remoteConfig,from: 'dist',into: '../d/nginxWebUI/',recursive: true)}echo "部署成功，請(qǐng)?jiān)L問 http://web.ip.com 預(yù)覽效果"}}}}}
}

注意事項(xiàng)：

• 如果服務(wù)器內(nèi)核版本較新，推薦使用的賬號(hào)和密碼登錄。使用密鑰時(shí)，內(nèi)置的jenkins插件可能不兼容的較新的內(nèi)核版本。
• 修改環(huán)境變量如： ${REMOTE_HOST}（服務(wù)器地址）和 ${REMOTE_CRED}（Coding 憑證）。
• 如果使用 Vue3 項(xiàng)目，不要使用默認(rèn)的環(huán)境構(gòu)建，需要修改 Node.js 為較新的版本。
• 免費(fèi)版 Coding 構(gòu)建內(nèi)存限制為 4G，如果出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤，可能是內(nèi)存不夠。
• 確保將編譯后的 dist 文件上傳至 Nginx 的指定目錄（../d/nginxWebUI/修改為服務(wù)器上nginx放置靜態(tài)文件的目錄）。

3. 運(yùn)行構(gòu)建計(jì)劃

構(gòu)建成功示例如下：

---

為當(dāng)前項(xiàng)目配置 Nginx.conf

1. 查看 Nginx 目錄

確認(rèn) dist 文件已成功上傳至服務(wù)器的 Nginx 目錄：

2. 配置 Nginx

以下是 nginx.conf 文件的配置示例：

load_module /usr/lib/nginx/modules/ngx_stream_module.so;
worker_processes auto;events {worker_connections  1024;accept_mutex on;
}http {include mime.types;default_type application/octet-stream;# 前端代理server {server_name web.ip.com;listen 80;location / {root /home/nginxWebUI/dist/;index index.html;try_files $uri $uri/ /index.html;  }}# 后端代理server {server_name demo.ip.com;listen 80;location / {proxy_pass http://127.0.0.1:48080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Host $http_host;proxy_set_header X-Forwarded-Port $server_port;proxy_set_header X-Forwarded-Proto $scheme;}}
}

配置說明：

• server_name web.ip.com; 指定前端項(xiàng)目域名。
• listen 80; 監(jiān)聽 HTTP 的 80 端口。
• root /home/nginxWebUI/dist/; 設(shè)置網(wǎng)站根目錄。
• try_files $uri $uri/ /index.html; 確保支持單頁應(yīng)用的路由功能。

3. 重啟 Nginx 并訪問項(xiàng)目

成功部署后訪問效果如下：

至此，自動(dòng)構(gòu)建vue項(xiàng)目完成

---

結(jié)語

通過以上步驟，成功實(shí)現(xiàn)了 Vue 項(xiàng)目從 Coding 構(gòu)建到 Nginx 部署的完整流程，本文提供了詳細(xì)的參考配置及注意事項(xiàng)，適合有類似需求的開發(fā)者實(shí)踐。

“如果此文章對(duì)您有幫助💪，幫我點(diǎn)個(gè)贊👍，感激不盡🤝！”