如何将微前端项目部署在同一台服务器同一个端口下
💡
原文中文,约7100字,阅读约需17分钟。
📝
内容提要
本文介绍了微前端项目的部署方案,包括部署顺序、部署分支、应用构建打包、Nginx服务器部署方案等。需要先部署子应用,再将子应用的线上可访问地址配置到主应用,最后再将主应用部署到线上环境。应用构建打包需要在微应用注册信息中将加载微应用的地址换成配置的地址,并在package.json中通过不同的命令区分不同环境。Nginx服务器部署方案需要注意搭建nginx服务之前保证所用到的端口是空闲,子应用和主应用配置在同一台服务器下的同一个端口下,子应用和主应用所用到接口地址都需要在nginx配置代理。最后,通过浏览器访问主应用和各个微应用测试地址,完成了微前端项目的部署。
🎯
关键要点
- 本文介绍微前端项目的部署方案,包括部署顺序、分支、构建打包和Nginx服务器部署。
- 部署顺序为:先部署子应用,再配置子应用地址到主应用,最后部署主应用。
- 线上环境部署统一使用master分支的代码。
- 主应用构建打包需在config目录中配置微前端项目的访问地址。
- 在package.json中通过不同命令区分不同环境的构建打包。
- Nginx服务器部署需确保端口空闲,子应用和主应用配置在同一端口下。
- Nginx配置需代理子应用和主应用所用的接口地址。
- 配置Nginx软连接以指向子应用访问路径。
- 完成Nginx配置后,重启Nginx服务并测试主应用和各个子应用的访问地址。
- 通过浏览器访问测试地址,确认微前端项目部署成功。
➡️