下面是兩種方案的簡要描述。

傳統(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.jsregisterMicroApps([{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.jsregisterMicroApps([{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.confhttp {server {listen 8889;server_name 192.168.2.192;location /app1 {proxy_pass 127.0.0.1:7100try_files $uri $uri/ /index.html;}}server {listen 8889;server_name 192.168.2.192;location /app2 {proxy_pass 127.0.0.1:7101try_files $uri $uri/ /index.html;}} }

主應(yīng)用訪問子應(yīng)用流程圖：

如果子應(yīng)用部署在其他服務(wù)器，還需在其他服務(wù)器配置 nginx 的跨域問題

特點

訪問權(quán)限規(guī)則由 nginx 的轉(zhuǎn)發(fā)配置決定，可開放較少端口，對外開放的端口只有主應(yīng)用服務(wù)的端口。

總結(jié)

以上是生活随笔為你收集整理的qiankun 微前端_qiankun 微前端应用实践与部署（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。