前言

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

---

準備工作

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

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

   • Docker 安裝詳細教程
   • MySQL 安裝詳細教程
   • Redis 安裝詳細教程
   • Coding 全流程自動化部署指南

2. 安裝 Nginx：

   • Nginx WebUI 指南和 Docker 部署

---

構(gòu)建 Vue 項目

以下是構(gòu)建 Vue 項目的詳細步驟：

1. 修改項目域名并提交至 Coding 倉庫

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

---

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

創(chuàng)建自定義構(gòu)建計劃，并配置 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('部署到遠端服務器') {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 "部署成功，請訪問 http://web.ip.com 預覽效果"}}}}}
}

注意事項：

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

3. 運行構(gòu)建計劃

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

---

為當前項目配置 Nginx.conf

1. 查看 Nginx 目錄

確認 dist 文件已成功上傳至服務器的 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; 指定前端項目域名。
• listen 80; 監(jiān)聽 HTTP 的 80 端口。
• root /home/nginxWebUI/dist/; 設(shè)置網(wǎng)站根目錄。
• try_files $uri $uri/ /index.html; 確保支持單頁應用的路由功能。

3. 重啟 Nginx 并訪問項目

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

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

---

結(jié)語

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

“如果此文章對您有幫助💪，幫我點個贊👍，感激不盡🤝！”