微前端项目部署方案

转载作者：我是一只小鸟更新时间：2023-04-10 14:31:48

作者：京东科技高飞。

前言

本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案，针对项目分别部署在不同的服务器上的场景，就一些重点步骤、碰到的问题做了一些总结.

部署顺序

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

部署分支

线上环境部署统一用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 都换成真实注册的域名即可，其他配置都可以复用！。

最后此篇关于微前端项目部署方案的文章就讲到这里了,如果你想了解更多关于微前端项目部署方案的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：上周热点回顾（4.3-4.9）

文章推荐：一个前端大佬的十年回顾|漫画前端的前世今生

文章推荐： 5分钟带你小程序入门[实战总结分享]

文章推荐：由ASP.NETCore读取Response.Body引发的思考

方案:从一组三个数字中返回两个最大的数字
我应该编写一个函数来打印一组给定的三个数字中两个较大数字的平方和。我对这种情况的处理相当笨拙。我没有编写返回一组 3 中最大的两个数字的函数，而是编写了函数，以便表达式减少到两个所需的数字。 # S
方案:位置上的类型参数错误
如果有人可以提供帮助，我将不胜感激。我一直在敲我的头一天试图让这个工作。我已经在互联网上搜索并重新阅读了手册，但我就是不明白。 guile << __EOF__ ( define heading-li
方案 - 使用列表列表
目前我正在处理一个方案问题，其中我们正在使用方案列表表示一个图。我们使用的第一个变体是表示为的边列表图 '((x y) (y z) (x z)) 我们正在使用的图的第二个变体被称为 x 图，表示为
方案 - 从参数顺序运行两个过程？
我正在尝试创建一个函数，该函数将两个函数作为参数并执行它们。我尝试使用 cond ，但它只执行 action1 . (define seq-action (lambda (action1 act
方案，何时使用符号而不是字符串？
我提前为我的原始英语道歉；我会尽量避免语法错误等。两周前，我决定更新我对 Scheme(及其启示)的知识，同时实现我在手上获得的一些数学 Material ，特别是我注册的自动机理论和计算类(cla
方案 - 分数的余数
Scheme中有没有函数支持分数的“div”操作？意思是 - 11 格 2.75 = 4。最佳答案我认为你的问题的答案是:没有，但你可以定义它: #lang racket (define (di
方案:如何将列表拆分为奇数条目和偶数条目的两个列表？
我在scheme中实现合并排序，我必须通过定义两个辅助方法来实现:merge和split。 Merge 需要两个列表(已经按递增顺序)并将它们合并在一起。我这样做了如下: (define merge
方案:似乎无法加载文件
尝试从终端加载方案文件。我创建了一个名为 test.scm 的文件，其中包含以下代码: (define (square x) (* x x)) (define (sum-of-squares x y)
方案 - 计算列表中的元素
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
方案 - 转换为连续传递样式
我有点了解如何将基本函数(例如算术)转换为Scheme中的连续传递样式。但如果函数涉及递归怎么办？例如， (define funname (lambda (arg0 arg1)
方案 - 字符串追加两个字符串列表
我正在尝试附加两个字符串列表但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
方案 - 将列表的元素解压到函数中
这个问题已经有答案了: How do I pass a list as a list of arguments in racket? (2 个回答) 已关闭 8 年前。我有一个函数，它需要无限数量的
方案:与集合混淆!
我对这段代码的工作方式感到困惑: (define m (list 1 2 3 '(5 8))) (let ((l (cdr m))) (set! l '(28 88))) ==>(1 2 3 (5 8
方案:添加到记录列表
我正在为学校做一项计划作业，有一个问题涉及我们定义记录“类型”(作为列表实现)(代表音乐记录)。我遇到的问题是我被要求创建一个过程来创建这些记录的列表，然后创建一个将记录添加到该列表的函数。这很简单
方案 - 计算列表中的元素
我有以下代码: (define (howMany list) (if (null? list) 0 (+ 1 (howMany (cdr list))))) 如果我们执行以
方案 - 字符串追加两个字符串列表
我正在尝试附加两个字符串列表但我不知道如何在两个单词之间添加空格。 (define (string-concat lst1 lst2) (map string-append lst1
方案:使用不带递归的抽象列表函数
如何使用抽象列表函数(foldr、foldl、map 和 filter 编写函数)，无需递归，消耗数字列表 (list a1 a2 a3 ...) 并产生交替和 a1 - a2 + a3 ...？最
方案 - 定义列表与符号
我试图找出在 Scheme 中发生的一些有趣的事情: (define last-pair (lambda (x) (if (null? (cdr x))
方案:列表计数器
这个问题在这里已经有了答案: Count occurrence of element in a list in Scheme? (4 个答案) 关闭 8 年前。我想实现一个函数来计算列表中元素出现
方案 - 使用表格的导数
我正在尝试使用下面的代码获取方案中的导数。谁能告诉我哪里出错了？我已经尝试了一段时间了。 (define d3 (λ (e) (cond ((number? e) 0) ((e

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

微前端项目部署方案

前言

部署顺序

部署分支

应用构建打包

主应用构建打包

测试环境打包配置：

生产环境打包配置：

调度系统(dlink)微应用构建打包

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

标签系统微应用构建打包

Nginx 服务器部署方案

扩展