作者：京東科技 高飛
前言
本文旨在通過部署微前端專案的實踐程序中沉淀出一套部署方案，現就一些重點步驟、碰到的問題做了一些總結，
部署順序
因為線上部署主應用時需要用到子應用的線上可訪問地址，因此部署順序應該是先部署子應用，保證子應用能夠線上可訪問后，再將子應用的線上可訪問地址配置到主應用，最后再將主應用部署到線上環境，
部署分支
線上環境部署統一用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 都換成真實注冊的域名即可，其他配置都可以復用！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549781.html
標籤：其他
下一篇：記錄-css實作交融文字效果