Angluar 部署多個微前端服務

最近的項目中使用到了前端的Angluar 框架，並且一個項目分成了多個微前端，這時需要把多個微前端部署到一個服務器中，一個微前端部署一個服務器太奢侈。

因此通過nginx反向代理來實現部署多個不同的微前端到同一臺服務器，同時這種方式也解決跨域問題。

第一步：你需要準備兩個或多個Angluar 前端項目，並打包。

打包命令：

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base--href /xxx/view --prod

注：xxx爲自定義的名字，這種方式打包，在瀏覽器訪問時加載靜態資源文件時，會自動加上 /xxx 前綴，在訪問Angluar 路由時加上/xxx/view前綴

兩個項目都打包完成後，放到不同的文件夾下，但是兩個項目的 /xxx 是不一樣的。

第二步：安裝nginx，並配置nginx.conf

安裝nginx請自行搜索。

配置nginx.conf需要注意一下

第一個項目的配置：

location  /axxx/view/ {

        rewrite .* /index.html break;

        root D:/xxx/dist/xxx/;    // 此處的路徑爲打包後項目所在的路徑

}

location  /axxx/ {

        alias D:/xxx/dist/xxx/;    // 此處的路徑爲打包後項目所在的路徑

}

第二個項目的配置：

ocation  /bxxx/view/ {

        rewrite .* /index.html break;

        root D:/bxxx/dist/xxx/;    // 此處的路徑爲打包後項目所在的路徑

}

location  /axxx/ {

        alias D:/bxxx/dist/xxx/;    // 此處的路徑爲打包後項目所在的路徑

}

最後啓動nginx，並訪問 ip:端口號/axxx/view 和 ip:端口號/bxxx/view