前端自动化部署全流程（Jenkins + Nginx）

一、环境准备

1.1 安装工具

Jenkins：CI/CD工具，用于自动化构建和部署
Nginx：静态服务器 + 反向代理
Git：版本控制系统
SSH：Jenkins与Nginx服务器通信

二、jenkins 部署流程

核心步骤：

javascript 复制代码

# Jenkinsfile 示例（声明式 Pipeline）
pipeline {
    agent any
    stages {
        stage('Checkout') {
            steps {
                git url: 'https://your-repo.git', branch: 'main'
            }
        }
        stage('Build Frontend') {
            steps {
                sh 'npm install'       # 安装依赖
                sh 'npm run build'     # 构建前端静态文件（生成 dist/ 目录）
            }
        }
        stage('Deploy to Nginx') {
            steps {
               sshPublisher(
                    configName: 'nginx-server',     # 配置的SSH远程主机
                    transfers: [
                        sshTransfer(
                            sourceFiles: 'dist/**', # 构建后的静态文件路径
                            removePrefix: 'dist',   # 上传时去掉前缀路径
                            execCommand: 'echo "Deployed"' # 可选：部署后执行命令
                        )
                    ]
                )
            }
        }
    }
}

关键点：

代码拉取：通过 Git 拉取最新代码。
静态文件构建：使用 npm run build 生成 dist/ 目录。
文件传输：通过 SSH/SFTP 将 dist/ 上传到 Nginx 服务器的静态文件目录（如 /var/www/html）。
清理旧文件：可在传输前添加
sshPublisher 的 cleanRemote 参数，避免残留旧文件。

三、Nginx 配置

核心配置示例：

javascript 复制代码

# /etc/nginx/conf.d/frontend.conf
server {
    listen 80;
    server_name yourdomain.com;

    # 静态文件服务配置
    location / {
        root /var/www/html;    # 静态文件存储路径
        index index.html;
        try_files $uri $uri/ /index.html; # 支持单页应用（SPA）路由
    }

    # 反向代理到后端接口
    location /api/ {
        proxy_pass http://backend_server_ip:port; # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

# 需要重新加载 Nginx 配置
nginx -s reload

关键点：

静态文件服务：root 指向 Jenkins 上传的静态文件路径
反向代理：将 /api 路径的请求转发到后端服务
HTTPS：建议配置 HTTPS（如 Let's Encrypt），避免明文传输。

四、补充与优化建议

环境隔离

多环境部署：通过 Jenkins 参数化构建，区分 dev/test/prod 环境，对应不同的 Nginx 配置和后端地址
环境变量管理：使用 .env 文件或 Jenkins 变量注入不同环境的 API 地址。

安全性增强

传输加密：使用 SSH 密钥而非密码，避免明文传输。 Nginx 权限控制：设置静态文件目录权限为 644，目录权限为 755。
防火墙：限制 Nginx 服务器的端口访问（如仅允许 Jenkins IP 访问 SSH 端口）。

自动化与监控

健康检查：在 Nginx 配置中添加 health_check 路径，用于监控服务状态。
日志监控：通过 logrotate
管理日志，并集成 ELK（Elasticsearch, Logstash, Kibana）进行日志分析。回滚机制：在 Jenkins
中保留历史构建版本，失败时可快速回滚。

负载均衡（可选）

若后端有多个服务器，可在 Nginx 中配置负载均衡：

javascript 复制代码

upstream backend_servers {
    server 192.168.1.10:3000;
    server 192.168.1.11:3000;
    # 可选：加权轮询、健康检查
}

location /api/ {
    proxy_pass http://backend_servers;
}

五、常见问题排查

静态文件 404：

检查 root 路径是否正确。
确认 Jenkins 上传的 dist/ 文件确实存在于 Nginx 服务器的路径下。

接口转发失败：

检查 proxy_pass 地址是否可达（如 curl http://backend_server_ip:port）。
确保后端服务已启动并监听对应端口。

部署后无变化：

检查 Jenkins 是否正确覆盖了旧文件（如 scp 命令是否包含 -r 递归参数）。
确保 Nginx 配置已重新加载。

六、总结

部署总体逻辑 ：

jenkins打包生成前端静态文件上传到nginx静态服务器下，nginx访问前端静态文件，并进行服务转发，

接口访问转发到指定的后端服务器
jenkins:

代码有变动时，jenkins重新部署打包生成最新的前端文件，上传到nginx服务器。
nginx:

本质上也是一台静态服务器，目的是存放前端静态文件和服务转发

前端自动化部署全流程（Jenkins + Nginx）

一、环境准备

二 、jenkins 部署流程

三 、Nginx 配置

四、补充与优化建议

五、常见问题排查

六、总结

二、jenkins 部署流程

三、Nginx 配置