如何将微前端项目部署在同一台服务器同一个端口下

京东云开发者
• 阅读 306

作者：京东科技 高飞

前言

本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案，现就一些重点步骤、碰到的问题做了一些总结。

部署顺序

因为线上部署主应用时需要用到子应用的线上可访问地址，因此部署顺序应该是先部署子应用，保证子应用能够线上可访问后，再将子应用的线上可访问地址配置到主应用，最后再将主应用部署到线上环境。

部署分支

线上环境部署统一用master分支的代码

应用构建打包

主应用构建打包

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

在config目录下配置config.test.ts用于测试环境的打包配置，生产环境打包配置放在在config.prod.ts中。如果部署到测试环境，或者生产环境，可以换成对应的访问地址。

测试环境打包配置：

// config/config.test.ts  用于本地或者测试环境构建测试
export default defineConfig({
  define: {
    DATALINK_MICRO_APP_HOST: '/dlink/',  // 本地环境调度系统访问地址
    DATAX_MICRO_APP_HOST: '/dx2/',     // 本地环境数据迁移系统访问地址
    LABEL_SYSTEM_MICRO_APP_HOST: '/ls/', // 本地环境标签系统访问地址
    KINESISLINK_MICRO_APP_HOST: '/ksl/', // 本地环境监控系统访问地址
  },
});

生产环境配置打包配置：

// config/config.prod.ts  用于生产环境构建测试
export default defineConfig({
  define: {
    DATALINK_MICRO_APP_HOST: '/dlink/',  // 本地环境调度系统访问地址
    DATAX_MICRO_APP_HOST: '/dx2/',     // 本地环境数据迁移系统访问地址
    LABEL_SYSTEM_MICRO_APP_HOST: '/ls/', // 本地环境标签系统访问地址
    KINESISLINK_MICRO_APP_HOST: '/ksl/', // 本地环境监控系统访问地址
  },
});

然后，我们需要在微应用注册信息中，将我们加载微应用的地址换成我们配置的地址，代码实现如下：

// 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: 'subls',
    entry: LABEL_SYSTEM_MICRO_APP_HOST,
    container: '#subapp-container',
    loader,
    activeRule: '/subls',
    className: 'label-child-app',
  },
  {
    name: 'subksl',
    entry: KINESISLINK_MICRO_APP_HOST,
    container: '#subapp-container',
    loader,
    activeRule: '/subksl',
    className: 'kinesislink-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 目录下，并重命名为 main，目录结构如下（见下图）

如何将微前端项目部署在同一台服务器同一个端口下

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

调度系统（dlink）微应用构建打包

进入项目目录，直接使用打包命令构建打包即可，在命令行运行：

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

yarn install   // 或者 npm install

yarn build     // 或者 npm run build

在构建打包完成后，我们将构建好的 dist 目录移动到nginx配置目录下的 html 目录下，并重命名为 dlink ，目录结构如下（见下图）

如何将微前端项目部署在同一台服务器同一个端口下

数据迁移系统（datax）微应用构建打包

进入项目目录，直接使用打包命令构建打包即可，在命令行运行：

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

yarn install   // 或者 npm install

yarn build     // 或者 npm run build

在构建打包完成后，我们将构建好的 dist 目录移动到nginx配置目录下的 html 目录下，并重命名名为dx2 ，目录结构如下（见下图）

如何将微前端项目部署在同一台服务器同一个端口下

标签系统微应用构建打包

进入项目目录，直接使用打包命令构建打包即可，在命令行运行：

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

yarn install   // 或者 npm install

yarn build     // 或者 npm run build

在构建打包完成后，我们将构建好的 dist 目录移动到nginx配置目录下的 html 目录下，并重命名名为ls ，目录结构如下（见下图）

如何将微前端项目部署在同一台服务器同一个端口下

监控系统（kinesis-link）微应用构建打包

进入项目目录，直接使用打包命令构建打包即可，在命令行运行：

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

yarn install   // 或者 npm install

yarn build     // 或者 npm run build

在构建打包完成后，我们将构建好的 dist 目录移动到nginx配置目录下的 html 目录下，并重命名名为ksl ，目录结构如下（见下图）

如何将微前端项目部署在同一台服务器同一个端口下

Nginx 服务器部署方案

在将我们的主应用和微应用全部打包完成后，我们将介绍如何使用 Nginx 完成微前端架构的部署。

Nginx 部署方案是可以作为生产方案使用的。

配置时有四点注意事项：

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

•子应用和主应用配置在同一台服务器下的同一个端口下，主应用配置在根路径下/，子应用的配置路径需要主应用里配置的字应用的入口地址和子应用自身的根路径一致

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

•配置nginx软连接，将/etc/nginx/html/main/子应用访问路径 指向 /etc/nginx/html/子应用访问路径

配置nginx软连接方式：ln -s /etc/nginx/html/子应用访问路径 /etc/nginx/html/main/子应用访问路径

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

nginx.conf

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;   # 默认文件类型

  # nginx开启gzip服务
  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;

  # 需要开启gzip的格式
  gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml 
    application/xml application/xml+rss text/javascript;

  server {
    set $root "/usr/local/etc/nginx/html/main";   # 设置静态文件目录的绝对路径，该变量根据个人的项目配置有所不同
    listen       8000;   # 配置监听的端口
    server_name  localhost;    # 配置的域名，目前是本地测试，所以直接使用 localhost
    include api.conf; #接口代理

    # 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;
    #     expires 30d;
    # }

    location / {
      root   $root;  # 网站根目录，这里选用主应用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/ /index.html;   # 兼容 history 路由模式，找不到的文件直接重定向到 index.html 

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

    location /dlink {
      root   $root;  # 网站根目录，这里选用主应用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/ /dlink/index.html;   # 兼容 history 路由模式，找不到的文件直接重定向到 index.html 

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

    location /dx2 {
      root   $root;  # 网站根目录，这里选用主应用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/ /dx2/index.html;   # 兼容 history 路由模式，找不到的文件直接重定向到 index.html 

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

    location /ls {
      root   $root;  # 网站根目录，这里选用主应用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/ /ls/index.html;   # 兼容 history 路由模式，找不到的文件直接重定向到 index.html 

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

    location /ksl {
      root   $root;  # 网站根目录，这里选用主应用构建后的文件目录
      index  index.html;   # 默认首页文件
      try_files  $uri $uri/ /ksl/index.html;   # 兼容 history 路由模式，找不到的文件直接重定向到 index.html 

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

  }
}

api.conf

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

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

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; 
}

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

location /ksapi {
    proxy_pass http://xxxxxxx;
    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://xxxxxxx;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $http_host;
}

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

在配置完成后，我们需要重启一下 nginx 服务。

输入nginx启动命令启动nginx

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

如何将微前端项目部署在同一台服务器同一个端口下


在浏览器中访问调度系统（dlink）子应用测试地址 http://localhost:8000/dlink ， 登录后如下图：

如何将微前端项目部署在同一台服务器同一个端口下


在浏览器中访问数据迁移系统（dx2）子应用测试地址 http://localhost:8000/dx2 , 登录后如下图：

如何将微前端项目部署在同一台服务器同一个端口下


在浏览器中访问标签管理系统（ls) 子应用测试地址：http://localhost:8000/ls ，登录后如下：

如何将微前端项目部署在同一台服务器同一个端口下


至此，nginx 服务部署大功告成！

扩展

如果需要把服务部署到真实服务器，只需要把所有的 localhost 都换成真实注册的域名即可，其他配置都可以复用！

前端软件开发程序人生移动端桌面端Javascript
点赞
收藏
评论区
推荐文章
blmius blmius
•
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
3492
0
0
京东云开发者 京东云开发者
•
1年前
安全测试前置实践2-安全渗透测试
本文我们将以围绕系统安全质量提升为目标，讲述在功能安全测试&安全渗透测试上实践过程。望通过此篇文章，帮助大家更深入、透彻地了解安全测试。
221
0
0
京东云开发者 京东云开发者
•
1年前
安全测试前置实践1-白盒&黑盒扫描
本文我们将以围绕系统安全质量提升为目标，讲述在安全前置扫描上实践开展过程。希望通过此篇文章，帮助大家更深入、透彻地了解安全测试，能快速开展安全测试。
217
0
0
Wesley13 Wesley13
•
2年前
VBox 启动虚拟机失败
在Vbox（5.0.8版本）启动Ubuntu的虚拟机时，遇到错误信息：NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
714
0
0
Wesley13 Wesley13
•
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300（0x012C），那么在FLV文件中存放的顺序是：|0x01|0x2C|。如果是无符号32位数字300（0x0000012C），那么在FLV文件中的存放顺序是：|0x00|0x00|0x00|0x01|0x2C。2.  
871
0
0
Wesley13 Wesley13
•
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
914
0
0
Wesley13 Wesley13
•
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
925
0
0
Wesley13 Wesley13
•
2年前
Java日期时间API系列36
　　十二时辰，古代劳动人民把一昼夜划分成十二个时段，每一个时段叫一个时辰。二十四小时和十二时辰对照表：时辰时间24时制子时深夜11：00凌晨01：0023：0001：00丑时上午01：00上午03：0001：0003：00寅时上午03：00上午0
891
0
0
Stella981 Stella981
•
2年前
Jenkins 插件开发之旅：两天内从 idea 到发布(上篇)
本文首发于：Jenkins中文社区(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fjenkinszh.cn)!huashan(https://oscimg.oschina.net/oscnet/f499d5b4f76f20cf0bce2a00af236d10265.jpg)
634
0
0
Wesley13 Wesley13
•
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1107
0
0
京东云开发者
京东云开发者
Lv1
最懂产业的云
文章
1.2k
粉丝
32
获赞
478
热门文章
KVC原理与数据筛选
Function源码解析与实践
观察者模式在spring中的应用
单体分层应用架构剖析
责任链和策略设计模式-基于Java编程语言