jenkins部署前端项目

Jenkins部署配置方案

基于对项目结构的分析，这是一个基于Lerna的Monorepo项目，包含两个React应用（ope运营平台和business商家平台）。以下是详细的Jenkins配置方案：

项目结构分析

  1. 项目类型：Lerna Monorepo架构，包含三个包：

    • ope：运营平台（端口8000）

    • business：商家平台（端口9000）

    • zwzshared：共享组件库

  2. 构建特点：

    • 使用Umi框架进行构建

    • ope平台构建后输出到packages/ope/dist目录

    • business平台构建后输出到packages/business/business目录

    • 两个平台有不同的publicPath配置（/ope/和/business/）

Jenkins配置步骤

1. 创建Jenkins任务

在Jenkins中创建一个新的"自由风格项目"，命名为rent-manager-web-deploy。

2. 源码管理配置

  • 选择Git作为源码管理

  • Repository URL: 您的GitLab仓库地址

  • Credentials: 配置访问GitLab的凭据

  • Branches to build: */master（或根据需要指定分支）

3. 构建环境配置

在"构建环境"部分，添加以下环境变量：

NODE_VERSION=14.17.0

4. 构建步骤配置

添加以下构建步骤：

步骤1：安装依赖

# 清理缓存
npm cache clean --force

# 安装lerna
npm install -g lerna

# 安装项目依赖
npm run install

步骤2：构建两个项目

# 构建ope运营平台
npm run build:ope

# 构建business商家平台
npm run build:business

5. 部署步骤配置

由于您已配置好Publish Over SSH插件，接下来配置部署步骤：

步骤1：部署ope运营平台

在"构建后操作"中添加"Send files or execute commands over SSH"：

  • SSH Publishers:

    • Name: 选择您配置好的SSH服务器（192.168.100.238）

    • Source files: packages/ope/dist/**

    • Remote directory: /var/www/ope

    • Exec command:

      cd /var/www/ope
  # 如果需要权限设置
  chmod -R 755 /var/www/ope

步骤2：部署business商家平台

添加另一个"Send files or execute commands over SSH"：

  • SSH Publishers:

    • Name: 选择您配置好的SSH服务器（192.168.100.238）

    • Source files: packages/business/business/**

    • Remote directory: /var/www/business

    • Exec command:

      cd /var/www/business
  # 如果需要权限设置
  chmod -R 755 /var/www/business

6. Nginx服务器配置

在192.168.100.238服务器上配置Nginx，使两个项目可以通过同一地址访问：

创建或修改Nginx配置文件（如：/etc/nginx/sites-available/rent-manager）：

server {
    listen 80;
    server_name 192.168.100.238;

    # ope运营平台
    location /ope {
        alias /var/www/ope;
        try_files $uri $uri/ /ope/index.html;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # business商家平台
    location /business {
        alias /var/www/business;
        try_files $uri $uri/ /business/index.html;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 根路径重定向到ope平台（可选）
    location / {
        return 301 /ope/;
    }

    # 静态资源优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
}

启用配置：

sudo ln -s /etc/nginx/sites-available/rent-manager /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

7. 可选的高级配置

环境区分部署

如果您需要区分不同环境（测试、预发布、生产），可以添加参数化构建：

  • 添加参数：DEPLOY_ENV（选择类型：选项参数）

    • 选项值：test, pre, prod

    然后在构建步骤中使用该参数：

bash
# 根据环境变量构建
REACT_APP_ENV=$DEPLOY_ENV npm run build:ope
REACT_APP_ENV=$DEPLOY_ENV npm run build:business

构建后清理

在"构建后操作"中添加"执行清理工作空间"，以节省磁盘空间。

访问方式

部署完成后，您可以通过以下URL访问两个平台：

  • 运营平台：http://192.168.100.238/ope

  • 商家平台：http://192.168.100.238/business

注意事项

  1. 依赖安装：确保服务器上安装了Node.js和npm

  2. 权限设置：确保Jenkins用户有权限将文件传输到目标目录

  3. 防火墙配置：确保192.168.100.238服务器的80端口是开放的

  4. 路径配置：确保Nginx配置中的路径与实际部署路径一致

  5. 资源限制：构建过程可能需要较多内存，确保服务器资源充足