作者：京东科技 高飞
前言
本文旨在通过部署微前端我的项目的实际过程中积淀出一套部署计划，针对我的项目别离部署在不同的服务器上的场景，就一些重点步骤、碰到的问题做了一些总结。
部署程序
因为线上部署主利用时须要用到子利用的线上可拜访地址，因而部署程序应该是先部署子利用，保障子利用可能线上可拜访后，再将子利用的线上可拜访地址配置到主利用，最初再将主利用部署到线上环境。
部署分支
线上环境部署对立用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.tsxconst 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 buildyarn build:test // 或者 npm run build:test在构建打包实现后，咱们将构建好的dist目录挪动到nginx配置根目录下的html目录下，并重命名为csd-tech-main-app，目录构造如下（见下图）
到这里，咱们的主利用就构建打包好了，接下来咱们介绍各个微利用构建打包过程。
调度零碎(dlink)微利用构建打包
进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：
rm -f -r node_modules // 如果部署到实在环境，删除旧的依赖包yarn install // 或者 npm installyarn build // 或者 npm run build在构建打包实现后，咱们将构建好的dist目录挪动到nginx配置目录下的html目录下，并重命名为datalink，目录构造如下（见下图）
数据迁徙零碎（datax）微利用构建打包
进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：
rm -f -r node_modules // 如果部署到实在环境，删除旧的依赖包yarn install // 或者 npm installyarn build // 或者 npm run build在构建打包实现后，咱们将构建好的dist目录挪动到nginx配置目录下的html目录下，并重命名名为datax，目录构造如下（见下图）
标签零碎微利用构建打包
进入我的项目目录，间接应用打包命令构建打包即可，在命令行运行：
rm -f -r node_modules // 如果部署到实在环境，删除旧的依赖包yarn install // 或者 npm installyarn 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 都换成实在注册的域名即可，其余配置都能够复用！