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