下面是兩種方案的簡要描述王凑。
傳統(tǒng)部署
方式
通過配置 nginx 端口到目錄的轉(zhuǎn)發(fā)。
具體可查看上一篇文章
特點
需要對外開放子應(yīng)用對應(yīng)的端口世分，將編譯好的應(yīng)用文件放到對應(yīng)的配置目錄编振。
docker 部署
方式
首先構(gòu)建主應(yīng)用與子應(yīng)用的 docker 鏡像，通過 docker run 或者 docker-compose 的方式啟動容器臭埋。
通過配置 nginx 轉(zhuǎn)發(fā)規(guī)則踪央，匹配訪問路徑子應(yīng)用容器端口。
假設(shè)服務(wù)器 ip 是 192.168.2.192斋泄，主應(yīng)用容器端口是 8889杯瞻，子應(yīng)用容器端口是 7100、7101炫掐。
其中應(yīng)用容器在構(gòu)建鏡像時是實現(xiàn)了 web 服務(wù)的魁莉，容器跑起來之后在服務(wù)器上是可以通過 127.0.0.1:7100 來訪問應(yīng)用的。
因為前端子應(yīng)用需要注冊到主應(yīng)用上，需要填寫子應(yīng)用的入口地址旗唁。
// index.js
registerMicroApps(
[
{
name: 'app1',
entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7100' : '//localhost:7100',
container: '#subapp-viewport',
loader,
activeRule: '/app1',
},
{
name: 'app2',
entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:7101' : '//localhost:7101',
container: '#subapp-viewport',
loader,
activeRule: '/app2',
}
]
}
此時服務(wù)器需要開放的端口是主應(yīng)用的 8889畦浓，子應(yīng)用的 7100、7101检疫。
為了減少對外開放的端口數(shù)讶请，我們要對 8889 端口進行 nginx 路徑匹配轉(zhuǎn)發(fā)。
修改子應(yīng)用注冊信息：
// index.js
registerMicroApps(
[
{
name: 'app1',
entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:8889/app1' : '//localhost:7100',
container: '#subapp-viewport',
loader,
activeRule: '/app1',
},
{
name: 'app2',
entry: process.env.NODE_ENV === 'production' ? '//192.168.2.192:8889/app2' : '//localhost:7101',
container: '#subapp-viewport',
loader,
activeRule: '/app2',
}
]
}
當前子應(yīng)用在主應(yīng)用配置的入口地址 entry 是 192.168.2.192:8889/app1屎媳，實際經(jīng)過 nginx 代理訪問的是 127.0.0.1:7100夺溢，即實際訪問的是運行在服務(wù)器的子應(yīng)用。
配置 nginx 代理規(guī)則：
# nginx.conf
http {
server {
listen 8889;
server_name 192.168.2.192;
location /app1 {
proxy_pass 127.0.0.1:7100
try_files $uri $uri/ /index.html;
}
}
server {
listen 8889;
server_name 192.168.2.192;
location /app2 {
proxy_pass 127.0.0.1:7101
try_files $uri $uri/ /index.html;
}
}
}
主應(yīng)用訪問子應(yīng)用流程圖：
如果子應(yīng)用部署在其他服務(wù)器烛谊，還需在其他服務(wù)器配置
nginx的跨域問題
特點
訪問權(quán)限規(guī)則由 nginx 的轉(zhuǎn)發(fā)配置決定风响，可開放較少端口，對外開放的端口只有主應(yīng)用服務(wù)的端口丹禀。
