作者：京東科技 高飛
前言
本文旨在通過(guò)部署微前端項(xiàng)目的實(shí)踐過(guò)程中沉淀出一套部署方案，現(xiàn)就一些重點(diǎn)步驟、碰到的問(wèn)題做了一些總結(jié)。
部署順序
因?yàn)榫€上部署主應(yīng)用時(shí)需要用到子應(yīng)用的線上可訪問(wèn)地址，因此部署順序應(yīng)該是先部署子應(yīng)用，保證子應(yīng)用能夠線上可訪問(wèn)后，再將子應(yīng)用的線上可訪問(wèn)地址配置到主應(yīng)用，最后再將主應(yīng)用部署到線上環(huán)境。
部署分支
線上環(huán)境部署統(tǒng)一用master分支的代碼
應(yīng)用構(gòu)建打包
主應(yīng)用構(gòu)建打包
主應(yīng)用csd-tech-main-app基于ant-design-pro，需要在config目錄中配置微前端項(xiàng)目的訪問(wèn)地址。
在config目錄下配置config.test.ts用于測(cè)試環(huán)境的打包配置，生產(chǎn)環(huán)境打包配置放在在config.prod.ts中。如果部署到測(cè)試環(huán)境，或者生產(chǎn)環(huán)境，可以換成對(duì)應(yīng)的訪問(wèn)地址。
測(cè)試環(huán)境打包配置：
// config/config.test.ts 用于本地或者測(cè)試環(huán)境構(gòu)建測(cè)試
export default defineConfig({
define: {
DATALINK_MICRO_APP_HOST: '/dlink/', // 本地環(huán)境調(diào)度系統(tǒng)訪問(wèn)地址
DATAX_MICRO_APP_HOST: '/dx2/', // 本地環(huán)境數(shù)據(jù)遷移系統(tǒng)訪問(wèn)地址
LABEL_SYSTEM_MICRO_APP_HOST: '/ls/', // 本地環(huán)境標(biāo)簽系統(tǒng)訪問(wèn)地址
KINESISLINK_MICRO_APP_HOST: '/ksl/', // 本地環(huán)境監(jiān)控系統(tǒng)訪問(wèn)地址
},
});
生產(chǎn)環(huán)境配置打包配置：
// config/config.prod.ts 用于生產(chǎn)環(huán)境構(gòu)建測(cè)試
export default defineConfig({
define: {
DATALINK_MICRO_APP_HOST: '/dlink/', // 本地環(huán)境調(diào)度系統(tǒng)訪問(wèn)地址
DATAX_MICRO_APP_HOST: '/dx2/', // 本地環(huán)境數(shù)據(jù)遷移系統(tǒng)訪問(wèn)地址
LABEL_SYSTEM_MICRO_APP_HOST: '/ls/', // 本地環(huán)境標(biāo)簽系統(tǒng)訪問(wèn)地址
KINESISLINK_MICRO_APP_HOST: '/ksl/', // 本地環(huán)境監(jiān)控系統(tǒng)訪問(wèn)地址
},
});
然后，我們需要在微應(yīng)用注冊(cè)信息中，將我們加載微應(yīng)用的地址換成我們配置的地址，代碼實(shí)現(xiàn)如下：
// 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',
},
];
最后，我們?cè)?package.json 中，通過(guò)不同的命令區(qū)分不同環(huán)境，代碼實(shí)現(xiàn)如下：
"scripts": {
// ....其他配置
// 生產(chǎn)環(huán)境打包命令
"build": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// 測(cè)試環(huán)境打包命令
"build:test": "cross-env REACT_APP_ENV=test UMI_ENV=test umi build",
// 生產(chǎn)環(huán)境打包命令
"build:prod": "cross-env REACT_APP_ENV=prod UMI_ENV=prod umi build",
// ...其他配置
}
在配置完成后，我們?cè)诿钚羞\(yùn)行如下命令，將主應(yīng)用構(gòu)建打包：
rm -f -r node_modules // 如果部署到真實(shí)環(huán)境，刪除舊的依賴包
yarn install // 或者 npm install
// 本地測(cè)試部署，用測(cè)試環(huán)境命令打包， 如果是生產(chǎn)環(huán)境打包，直接用yarn build 或者 npm run build
yarn build:test // 或者 npm run build:test
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動(dòng)到nginx配置根目錄下的 html 目錄下，并重命名為 main，目錄結(jié)構(gòu)如下（見(jiàn)下圖）
到這里，我們的主應(yīng)用就構(gòu)建打包好了，接下來(lái)我們介紹各個(gè)微應(yīng)用構(gòu)建打包過(guò)程。
調(diào)度系統(tǒng)（dlink）微應(yīng)用構(gòu)建打包
進(jìn)入項(xiàng)目目錄，直接使用打包命令構(gòu)建打包即可，在命令行運(yùn)行：
rm -f -r node_modules // 如果部署到真實(shí)環(huán)境，刪除舊的依賴包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動(dòng)到nginx配置目錄下的 html 目錄下，并重命名為 dlink ，目錄結(jié)構(gòu)如下（見(jiàn)下圖）
數(shù)據(jù)遷移系統(tǒng)（datax）微應(yīng)用構(gòu)建打包
進(jìn)入項(xiàng)目目錄，直接使用打包命令構(gòu)建打包即可，在命令行運(yùn)行：
rm -f -r node_modules // 如果部署到真實(shí)環(huán)境，刪除舊的依賴包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動(dòng)到nginx配置目錄下的 html 目錄下，并重命名名為dx2 ，目錄結(jié)構(gòu)如下（見(jiàn)下圖）
標(biāo)簽系統(tǒng)微應(yīng)用構(gòu)建打包
進(jìn)入項(xiàng)目目錄，直接使用打包命令構(gòu)建打包即可，在命令行運(yùn)行：
rm -f -r node_modules // 如果部署到真實(shí)環(huán)境，刪除舊的依賴包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動(dòng)到nginx配置目錄下的 html 目錄下，并重命名名為ls ，目錄結(jié)構(gòu)如下（見(jiàn)下圖）
監(jiān)控系統(tǒng)（kinesis-link）微應(yīng)用構(gòu)建打包
進(jìn)入項(xiàng)目目錄，直接使用打包命令構(gòu)建打包即可，在命令行運(yùn)行：
rm -f -r node_modules // 如果部署到真實(shí)環(huán)境，刪除舊的依賴包
yarn install // 或者 npm install
yarn build // 或者 npm run build
在構(gòu)建打包完成后，我們將構(gòu)建好的 dist 目錄移動(dòng)到nginx配置目錄下的 html 目錄下，并重命名名為ksl ，目錄結(jié)構(gòu)如下（見(jiàn)下圖）
Nginx 服務(wù)器部署方案
在將我們的主應(yīng)用和微應(yīng)用全部打包完成后，我們將介紹如何使用 Nginx 完成微前端架構(gòu)的部署。
Nginx 部署方案是可以作為生產(chǎn)方案使用的。
配置時(shí)有四點(diǎn)注意事項(xiàng)：
?搭建nginx服務(wù)之前，保證所用到的端口是空閑
?子應(yīng)用和主應(yīng)用配置在同一臺(tái)服務(wù)器下的同一個(gè)端口下，主應(yīng)用配置在根路徑下/，子應(yīng)用的配置路徑需要主應(yīng)用里配置的字應(yīng)用的入口地址和子應(yīng)用自身的根路徑一致
?子應(yīng)用和主應(yīng)用所用到接口地址都需要在nginx 配置代理
?配置nginx軟連接，將/etc/nginx/html/main/子應(yīng)用訪問(wèn)路徑 指向 /etc/nginx/html/子應(yīng)用訪問(wèn)路徑
配置nginx軟連接方式：ln -s /etc/nginx/html/子應(yīng)用訪問(wèn)路徑 /etc/nginx/html/main/子應(yīng)用訪問(wèn)路徑
本地測(cè)試nginx服務(wù)配置如下：
nginx.conf
worker_processes 1; # Nginx 進(jìn)程數(shù)，一般設(shè)置為和 CPU 核數(shù)一樣
events {
worker_connections 1024; # 每個(gè)進(jìn)程允許最大并發(fā)數(shù)
}
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; # 文件擴(kuò)展名與類型映射表
default_type application/octet-stream; # 默認(rèn)文件類型
# nginx開啟gzip服務(wù)
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"; # 設(shè)置靜態(tài)文件目錄的絕對(duì)路徑，該變量根據(jù)個(gè)人的項(xiàng)目配置有所不同
listen 8000; # 配置監(jiān)聽(tīng)的端口
server_name localhost; # 配置的域名，目前是本地測(cè)試，所以直接使用 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; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認(rèn)首頁(yè)文件
try_files $uri $uri/ /index.html; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁(yè)一般沒(méi)有強(qiáng)制緩存
add_header Cache-Control no-cache;
}
location /dlink {
root $root; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認(rèn)首頁(yè)文件
try_files $uri $uri/ /dlink/index.html; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁(yè)一般沒(méi)有強(qiáng)制緩存
add_header Cache-Control no-cache;
}
location /dx2 {
root $root; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認(rèn)首頁(yè)文件
try_files $uri $uri/ /dx2/index.html; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁(yè)一般沒(méi)有強(qiáng)制緩存
add_header Cache-Control no-cache;
}
location /ls {
root $root; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認(rèn)首頁(yè)文件
try_files $uri $uri/ /ls/index.html; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁(yè)一般沒(méi)有強(qiáng)制緩存
add_header Cache-Control no-cache;
}
location /ksl {
root $root; # 網(wǎng)站根目錄，這里選用主應(yīng)用構(gòu)建后的文件目錄
index index.html; # 默認(rèn)首頁(yè)文件
try_files $uri $uri/ /ksl/index.html; # 兼容 history 路由模式，找不到的文件直接重定向到 index.html
expires -1; # 首頁(yè)一般沒(méi)有強(qiáng)制緩存
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 服務(wù)。
輸入nginx啟動(dòng)命令啟動(dòng)nginx
在瀏覽器中訪問(wèn)主應(yīng)用測(cè)試地址localhost:8000 ，登錄后如下圖：
在瀏覽器中訪問(wèn)調(diào)度系統(tǒng)（dlink）子應(yīng)用測(cè)試地址 http://localhost:8000/dlink ， 登錄后如下圖：
在瀏覽器中訪問(wèn)數(shù)據(jù)遷移系統(tǒng)（dx2）子應(yīng)用測(cè)試地址 http://localhost:8000/dx2 , 登錄后如下圖：
在瀏覽器中訪問(wèn)標(biāo)簽管理系統(tǒng)（ls) 子應(yīng)用測(cè)試地址：http://localhost:8000/ls ，登錄后如下：
至此，nginx 服務(wù)部署大功告成！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-410659.html
擴(kuò)展
如果需要把服務(wù)部署到真實(shí)服務(wù)器，只需要把所有的 localhost 都換成真實(shí)注冊(cè)的域名即可，其他配置都可以復(fù)用！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-410659.html
到了這里，關(guān)于如何將微前端項(xiàng)目部署在同一臺(tái)服務(wù)器同一個(gè)端口下的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
