Vue 项目自动化部署：Coding + Jenkins + Nginx 实践分享

前言

本文详细记录如何使用 Coding (以 Jenkinsfile 为核心) 和 Nginx 部署 Vue 项目，包含完整流程、配置细节及注意事项，为开发者提供一个高效的实践参考。

---

准备工作

这里借用一个优秀的开源项目做演示：芋道源码/yudao-ui-admin-vue2。
以下是准备工作的相关指引和教程，确保服务器环境和工具安装已完成：

1. 配置服务器环境，确保安装以下组件：

   • Docker 安装详细教程
   • MySQL 安装详细教程
   • Redis 安装详细教程
   • Coding 全流程自动化部署指南

2. 安装 Nginx：

   • Nginx WebUI 指南和 Docker 部署

---

构建 Vue 项目

以下是构建 Vue 项目的详细步骤：

1. 修改项目域名并提交至 Coding 仓库

在下载代码后，需修改项目中的域名配置，然后提交到 Coding 仓库中。例如：

---

2. 在 Coding 中创建自定义构建计划

创建自定义构建计划，并配置 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 执行命令") {sshPut(remote: remoteConfig,from: 'dist',into: '../d/nginxWebUI/',recursive: true)}echo "部署成功，请访问 http://web.ip.com 预览效果"}}}}}
}

注意事项：

• 如果服务器内核版本较新，推荐使用的账号和密码登录。使用密钥时，内置的jenkins插件可能不兼容的较新的内核版本。
• 修改环境变量如： ${REMOTE_HOST}（服务器地址）和 ${REMOTE_CRED}（Coding 凭证）。
• 如果使用 Vue3 项目，不要使用默认的环境构建，需要修改 Node.js 为较新的版本。
• 免费版 Coding 构建内存限制为 4G，如果出现网络错误，可能是内存不够。
• 确保将编译后的 dist 文件上传至 Nginx 的指定目录（../d/nginxWebUI/修改为服务器上nginx放置静态文件的目录）。

3. 运行构建计划

构建成功示例如下：

---

为当前项目配置 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; 监听 HTTP 的 80 端口。
• root /home/nginxWebUI/dist/; 设置网站根目录。
• try_files $uri $uri/ /index.html; 确保支持单页应用的路由功能。

3. 重启 Nginx 并访问项目

成功部署后访问效果如下：

至此，自动构建vue项目完成

---

结语

通过以上步骤，成功实现了 Vue 项目从 Coding 构建到 Nginx 部署的完整流程，本文提供了详细的参考配置及注意事项，适合有类似需求的开发者实践。

“如果此文章对您有帮助💪，帮我点个赞👍，感激不尽🤝！”