软件开发工具自考真题深圳优化服务
前言
本文详细记录如何使用 Coding (以 Jenkinsfile 为核心) 和 Nginx 部署 Vue 项目，包含完整流程、配置细节及注意事项，为开发者提供一个高效的实践参考。
准备工作
这里借用一个优秀的开源项目做演示：芋道源码/yudao-ui-admin-vue2。
以下是准备工作的相关指引和教程，确保服务器环境和工具安装已完成：
-
配置服务器环境，确保安装以下组件：
- Docker 安装详细教程
- MySQL 安装详细教程
- Redis 安装详细教程
- Coding 全流程自动化部署指南
-
安装 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 部署的完整流程，本文提供了详细的参考配置及注意事项，适合有类似需求的开发者实践。
“如果此文章对您有帮助💪，帮我点个赞👍，感激不尽🤝！”