作者：京東科技高飛

前言

本文旨在通過部署微前端項目的實踐過程中沉澱出一套部署方案，針對項目分别部署在不同的伺服器上的場景，就一些重點步驟、碰到的問題做了一些總結。

部署順序

因為線上部署主應用時需要用到子應用的線上可通路位址，是以部署順序應該是先部署子應用，保證子應用能夠線上可通路後，再将子應用的線上可通路位址配置到主應用，最後再将主應用部署到線上環境。

部署分支

線上環境部署統一用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 都換成真實注冊的域名即可，其他配置都可以複用！

微前端項目部署方案

前言

部署順序

部署分支

應用建構打包

主應用建構打包

測試環境打包配置：

生産環境打包配置：

排程系統(dlink)微應用建構打包

資料遷移系統（datax）微應用建構打包

标簽系統微應用建構打包

Nginx 伺服器部署方案

擴充

繼續閱讀

Jenkins建構前端項目多個nodejs版本切換

部署dubbo-admin時 KeeperErrorCode = ConnectionLoss 異常問題解決

vue項目部署方式:tomcat部署和nginx部署

Tomcat 部署方式之靜态部署

整理了幾十個前端項目實戰，适合學習練手，提升自我能力，不要💰需要打已關66#程式員#程式設計#前端#計算機#代碼

springboot整合docker部署（兩種建構Docker鏡像方式）springboot整合docker部署（兩種建構Docker鏡像方式）

lakego-admin背景管理系統前端項目項目介紹項目基于vue-vben-admin項目開發使用Vite,Vue3,

阿裡雲ubuntu部署nodejs項目前言1.安裝node2.開放安全接口3.上傳node項目代碼5.修改項目檔案結束

Asp項目部署到阿裡雲（windows環境）

阿裡雲伺服器部署flask+gunicorn項目

阿裡雲下部署django+nginx+uwsgi

在雲伺服器上部署你的JAVA WEB項目一、購買域名和伺服器二、将項目上傳至伺服器三、直接通過域名來通路項

git與svn的忽略檔案或檔案夾

在遠端Linux伺服器上安裝部署Tamcat及web項目（一）下一篇：在遠端Linux伺服器上安裝部署Tamcat及web項目(二)

在遠端Linux伺服器上安裝部署Tamcat及web項目(二)上一篇：在遠端Linux伺服器上安裝部署Tamcat及web項目（一）

【Linux指令】-bash: mysql: command not found