关于微前端:微前端项目部署方案

作者：京东科技 高飞

前言

本文旨在通过部署微前端我的项目的实际过程中积淀出一套部署计划，针对 我的项目别离部署在不同的服务器上的场景，就一些重点步骤、碰到的问题做了一些总结。

部署程序

因为线上部署主利用时须要用到子利用的线上可拜访地址，因而部署程序应该是先部署子利用，保障子利用可能线上可拜访后，再将子利用的线上可拜访地址配置到主利用，最初再将主利用部署到线上环境。

部署分支

线上环境部署对立用 master 分支的代码

利用构建打包

主利用构建打包

主利用 csd-tech-main-app 基于 ant-design-pro，须要在 config 目录中配置微前端我的项目的拜访地址。

在 config 目录下配置 config.test.ts 用于测试环境的打包配置，生产环境打包配置放在在 config.prod.ts 中。因为本次部署是在本地机器测试部署，因而子利用拜访地址都用 localhost，如果部署到测试环境，或者生产环境，能够换成对应的拜访地址。

测试环境打包配置：

// config/config.test.ts  用于本地或者测试环境构建测试
export default defineConfig({
  define: {
    DATALINK_MICRO_APP_HOST: '//localhost:8888',  // 本地环境调度零碎拜访地址
    DATAX_MICRO_APP_HOST: '//localhost:9528',     // 本地环境数据迁徙零碎拜访地址
    LABEL_SYSTEM_MICRO_APP_HOST: '//localhost:8080', // 本地环境标签零碎拜访地址
  KINESISLINK_MICRO_APP_HOST: '//localhost:6001', // 本地环境监控零碎拜访地址
  },
})

生产环境打包配置：

// config/config.prod.ts 用于生产环境构建测试
export default defineConfig({
  define: {
    DATALINK_MICRO_APP_HOST: 'xxxx',  // 生产环境调度零碎拜访地址
    DATAX_MICRO_APP_HOST: 'xxxx',     // 生产环境数据迁徙零碎拜访地址
    LABEL_SYSTEM_MICRO_APP_HOST: 'xxxx', // 生产环境标签零碎拜访地址
    KINESISLINK_MICRO_APP_HOST: 'xxxx', // 生产环境监控零碎拜访地址
  },
});

而后，咱们须要在微利用注册信息中，将咱们加载微利用的地址换成咱们配置的地址，代码实现如下：

// src/app.tsx


const microAppsOptions = [
  {
    name: 'datalink',
    entry: DATALINK_MICRO_APP_HOST,
    container: '#subapp-container',
    loader,
    activeRule: '/datalink',
    className: 'data-link-child-app',
  },
  {
    name: 'datax',
    entry: DATAX_MICRO_APP_HOST,
    container: '#subapp-container',
    loader,
    activeRule: '/datax',
    className: 'datax-child-app',
  },
  {
    name: 'label-system',
    entry: LABEL_SYSTEM_MICRO_APP_HOST,
    container: '#subapp-container',
    loader,
    activeRule: '/label-system',
    className: 'label-child-app',
  },
];

最初，咱们在 package.json 中，通过不同的命令辨别不同环境，代码实现如下：

"scripts": {
// .... 其余配置
// 生产环境打包命令
    "build": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// 测试环境打包命令
    "build:test": "cross-env REACT_APP_ENV=test UMI_ENV=test umi build",
// 生产环境打包命令
  "build:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// ... 其余配置
}

在配置实现后，咱们在命令行运行如下命令，将主利用构建打包：

rm -f -r node_modules // 如果部署到实在环境，删除旧的依赖包


yarn install  // 或者 npm install


// 本地测试部署，用测试环境命令打包，如果是生产环境打包，间接用 yarn build 或者 npm run build
yarn build:test  // 或者 npm run build:test

在构建打包实现后，咱们将构建好的 dist 目录挪动到 nginx 配置根目录下的 html 目录下，并重命名为 csd-tech-main-app，目录构造如下（见下图）

到这里，咱们的主利用就构建打包好了，接下来咱们介绍各个微利用构建打包过程。

调度零碎 (dlink) 微利用构建打包

进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：

rm -f -r node_modules  // 如果部署到实在环境，删除旧的依赖包


yarn install   // 或者 npm install


yarn build     // 或者 npm run build

在构建打包实现后，咱们将构建好的 dist 目录挪动到 nginx 配置目录下的 html 目录下，并重命名为 datalink，目录构造如下（见下图）

数据迁徙零碎（datax）微利用构建打包

进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：

rm -f -r node_modules  // 如果部署到实在环境，删除旧的依赖包


yarn install   // 或者 npm install


yarn build     // 或者 npm run build

在构建打包实现后，咱们将构建好的 dist 目录挪动到 nginx 配置目录下的 html 目录下，并重命名名为 datax，目录构造如下（见下图）

标签零碎微利用构建打包

进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：

rm -f -r node_modules  // 如果部署到实在环境，删除旧的依赖包


yarn install   // 或者 npm install


yarn build     // 或者 npm run build

在构建打包实现后，咱们将构建好的 dist 目录挪动到 nginx 配置目录下的 html 目录下，并重命名名为 label-system，目录构造如下（见下图）

Nginx 服务器部署计划

在将咱们的主利用和微利用全副打包实现后，咱们将介绍如何应用 Nginx 实现微前端架构的部署。

Nginx 部署计划是能够作为生产计划应用的。

配置时有三点注意事项：

•搭建 nginx 服务之前，保障所用到的端口是闲暇

•子利用和主利用的 nginx 配置基本上是统一的，惟一不同的是子利用须要配置容许跨域拜访。这是因为咱们的微前端架构须要通过 ajax 申请子利用资源，所以须要配置跨域，通过同源策略的限度。

•子利用和主利用所用到接口地址都须要在 nginx 配置代理

本地测试 nginx 服务配置如下：

worker_processes  1;   # Nginx 过程数，个别设置为和 CPU 核数一样


events {worker_connections  1024;   # 每个过程容许最大并发数}


error_log  /usr/local/etc/nginx/logs/error.log;   # 谬误日志门路
error_log  /usr/local/etc/nginx/logs/error.log  notice; # 谬误日志门路
error_log  /usr/local/etc/nginx/logs/error.log  info;  # 谬误日志门路


http {
  include mime.types;   # 文件扩展名与类型映射表
  default_type application/octet-stream;   # 默认文件类型
  server {
    set $root "/usr/local/etc/nginx/html";   # 设置动态文件目录的绝对路径，该变量依据集体的我的项目配置有所不同
    listen       8000;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以间接应用 localhost
  
    location / {
      root   $root/csd-tech-main-app;  # 网站根目录，这里选用主利用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/index.html /index.html;   # 兼容 history 路由模式，找不到的文件间接重定向到 index.html 


      expires -1;                          # 首页个别没有强制缓存
      add_header Cache-Control no-cache;
    }


    location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        root   $root/csd-tech-main-app;
        expires 30d;
    }


    location /api {
        proxy_pass http://xxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


    location /dolphinscheduler {
        proxy_pass http://xxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


    location /labelapi {
        proxy_pass http://xxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        rewrite ^/labelapi/(.*)$ /api/$1 break; 
    }


    location /webhdfs {
        proxy_pass http://xxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


  }


  server {
    set $root "/usr/local/etc/nginx/html";   # 设置动态文件目录的绝对路径，该变量依据集体的我的项目配置有所不同
    listen       8888;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以间接应用 localhost


    location / {
      root   $root/data-link;  # 网站根目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/index.html /index.html;   # 兼容 history 路由模式，找不到的文件间接重定向到 index.html 


      expires -1;                          # 首页个别没有强制缓存
      add_header Cache-Control no-cache;


      add_header "Access-Control-Allow-Origin" $http_origin;   # 全局变量取得以后申请 origin，带 cookie 的申请不反对 *
      add_header "Access-Control-Allow-Methods" "*";  # 容许申请办法
      add_header "Access-Control-Allow-Headers" "*";  # 容许申请的 header
    }


    location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        root   $root/data-link;
        expires 30d;
    }


    location /dolphinscheduler {
        proxy_pass http://xxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


    location /webhdfs {
        proxy_pass http://xxxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


  }


  server {
    set $root "/usr/local/etc/nginx/html";   # 设置动态文件目录的绝对路径，该变量依据集体的我的项目配置有所不同
    listen       9528;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以间接应用 localhost


    location / {
      root   $root/datax;  # 网站根目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/index.html /index.html @rewrites;   # 兼容 history 路由模式，找不到的文件间接重定向到 index.html 


      expires -1;                          # 首页个别没有强制缓存
      add_header Cache-Control no-cache;


      add_header "Access-Control-Allow-Origin" $http_origin;   # 全局变量取得以后申请 origin，带 cookie 的申请不反对 *
      add_header "Access-Control-Allow-Methods" "*";  # 容许申请办法
      add_header "Access-Control-Allow-Headers" "*";  # 容许申请的 header
    }


    location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        root   $root/datax;
        expires 30d;
    }


    location /api {
        proxy_pass http://xxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }


  }


  server {
    set $root "/usr/local/etc/nginx/html";   # 设置动态文件目录的绝对路径，该变量依据集体的我的项目配置有所不同
    listen       8080;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以间接应用 localhost


    location / {
      root   $root/label-system;  # 网站根目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/index.html /index.html;   # 兼容 history 路由模式，找不到的文件间接重定向到 index.html 


      expires -1;                          # 首页个别没有强制缓存
      add_header Cache-Control no-cache;


      add_header "Access-Control-Allow-Origin" $http_origin;   # 全局变量取得以后申请 origin，带 cookie 的申请不反对 *
      add_header "Access-Control-Allow-Methods" "*";  # 容许申请办法
      add_header "Access-Control-Allow-Headers" "*";  # 容许申请的 header
    }


    location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        root   $root/label-system;
        expires 30d;
    }


    location /labelapi {
        proxy_pass http://xxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        rewrite ^/labelapi/(.*)$ /api/$1 break; 
    }


  }


 server {
    set $root "/usr/local/etc/nginx/html";   # 设置动态文件目录的绝对路径，该变量依据集体的我的项目配置有所不同
    listen       6001;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以间接应用 localhost


    location / {
      root   $root/kinesislink;  # 网站根目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/index.html /index.html;   # 兼容 history 路由模式，找不到的文件间接重定向到 index.html 


      expires -1;                          # 首页个别没有强制缓存
      add_header Cache-Control no-cache;


      add_header "Access-Control-Allow-Origin" $http_origin;   # 全局变量取得以后申请 origin，带 cookie 的申请不反对 *
      add_header "Access-Control-Allow-Methods" "*";  # 容许申请办法
      add_header "Access-Control-Allow-Headers" "*";  # 容许申请的 header
    }


    location ~*\.(js|css|png|jpg|jpeg|gif|ico)$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';


        root   $root/kinesislink;
        expires 30d;
    }


    location /ksapi {
       proxy_pass http://xxxxxxxx;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header Host $http_host;
       rewrite ^/ksapi/(.*)$ /api/$1 break; 
    }


    location /2.0 {
       proxy_pass http://xxxxxxxx;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header Host $http_host;
    }


    location /3.0 {
       proxy_pass http://xxxxxxxxx;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header Host $http_host;
    }


    location /dolphinscheduler {
        proxy_pass http://xxxxxxxxxx;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
    }
  }
 
}

在配置实现后，咱们须要重启一下 nginx 服务。

输出 nginx 启动命令启动 nginx

在浏览器中拜访主利用测试地址 localhost:8000，登录后如下图：

在浏览器中拜访 datalink 子利用测试地址 localhost:8888，登录后如下图：


在浏览器中拜访 datax 子利用测试地址 localhost:9528, 登录后如下图：


在浏览器中拜访标签零碎子利用测试地址 localhost:8080, 登录后如下图：


至此，nginx 服务部署功败垂成！

扩大

如果须要把服务部署到实在服务器，只须要把所有的 localhost 都换成实在注册的域名即可，其余配置都能够复用！