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

前言

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

准备工作

这里借用一个优秀的开源项目做演示：芋道源码/yudao-ui-admin-vue2。

以下是准备工作的相关指引和教程，确保服务器环境和工具安装已完成：

配置服务器环境，确保安装以下组件：
安装 Nginx：
- Nginx WebUI 指南和 Docker 部署

构建 Vue 项目

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

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

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

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

创建自定义构建计划，并配置 Jenkinsfile，示例如下：

groovy 复制代码

pipeline {
    agent any
    stages {
        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 = 22
                    remoteConfig.allowAnyHosts = true

                    withCredentials([
                        usernamePassword(
                            credentialsId: "${REMOTE_CRED}",
                            passwordVariable: 'password',
                            usernameVariable: 'userName'
                        )
                    ]) {
                        remoteConfig.user = userName
                        remoteConfig.password = password

                        stage("通过 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 文件的配置示例：

bash 复制代码

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 部署的完整流程，本文提供了详细的参考配置及注意事项，适合有类似需求的开发者实践。

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