微前端專案部署方案
2023-04-10 12:02:04
作者：京東科技 高飛
前言
本文旨在通過部署微前端專案的實踐過程中沉澱出一套部署方案，針對專案分別部署在不同的伺服器上的場景，就一些重點步驟、碰到的問題做了一些總結。
部署順序
因為線上部署主應用時需要用到子應用的線上可存取地址，因此部署順序應該是先部署子應用，保證子應用能夠線上可存取後，再將子應用的線上可存取地址設定到主應用，最後再將主應用部署到線上環境。
部署分支
線上環境部署統一用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 都換成真實註冊的域名即可，其他設定都可以複用！