5分钟部署多服务前端应用：MFE-starter与Docker Compose实战指南
【免费下载链接】MFE-starter MFE Starter 
项目地址: https://gitcode.com/gh_mirrors/mf/MFE-starter
你是否还在为前端项目的环境配置而头疼？本地开发环境与生产环境不一致、多服务依赖冲突、部署流程繁琐等问题，是否让你频繁加班却效率低下？本文将带你使用MFE-starter与Docker Compose，通过5个步骤实现多服务应用的一键部署，彻底解决环境一致性难题。读完本文，你将掌握容器化部署的核心技巧，实现"一次配置，处处运行"的开发体验。
为什么选择MFE-starter与Docker Compose？
MFE-starter是一个基于Angular的微前端（Micro-Frontend, 微前端） starter项目，集成了Webpack、TypeScript等现代前端工具链，提供了完整的开发、构建和测试流程。其核心优势在于支持模块化开发，可将大型应用拆分为独立部署的小型前端应用。
Docker Compose则是Docker官方提供的多容器编排工具，通过一个YAML文件定义多个服务的配置，实现多服务的协同部署与管理。两者结合，可完美解决微前端架构下的多服务部署难题。
项目核心文件结构如下：
- docker-compose.yml：定义多服务部署配置
- package.json：项目依赖与脚本
- config/：Webpack与环境配置
- src/：Angular应用源代码
部署前的准备工作
环境要求
确保你的开发环境已安装：
- Docker Engine (20.10+)
- Docker Compose (v2+)
- Git
获取项目代码
git clone https://gitcode.com/gh_mirrors/mf/MFE-starter
cd MFE-starter
核心配置文件解析
Docker Compose配置
打开docker-compose.yml，可以看到项目定义了一个名为angular-starter的服务：
version: '3'
services:
angular-starter:
build:
context: .
dockerfile: Dockerfile-dev
container_name: angular-starter
networks:
- angular-starter
ports:
- '3000:3000'
environment:
- HOST=0.0.0.0
command: npm run start
networks:
angular-starter:
driver: bridge
这个配置定义了：
- 使用
Dockerfile-dev构建开发环境镜像 - 将容器内3000端口映射到宿主机3000端口
- 设置环境变量
HOST=0.0.0.0允许外部访问 - 启动命令为
npm run start，对应package.json中的开发服务器脚本
开发与构建脚本
查看package.json中的核心脚本：
| 脚本命令 | 功能描述 |
|---|---|
npm run start | 启动开发服务器，支持热重载 |
npm run build:dev | 开发环境构建 |
npm run build:prod | 生产环境构建，含代码压缩与优化 |
npm run build:docker | 构建生产环境Docker镜像 |
一键部署开发环境
启动服务
在项目根目录执行：
docker-compose up -d
该命令会：
- 构建Docker镜像（首次执行较慢，后续会使用缓存）
- 创建并启动容器
- 建立专用网络
angular-starter
验证部署结果
打开浏览器访问http://localhost:3000，若能看到Angular应用界面，说明部署成功。
项目使用Angular框架构建，核心应用代码位于src/app/目录，主要包含：
- home/：首页组件
- about/：关于页面
- +detail/：详情页模块
- app.module.ts：应用根模块
生产环境部署优化
构建生产镜像
npm run build:docker
该命令会先执行build:prod生成优化后的静态资源，再通过Dockerfile构建生产镜像。
自定义环境配置
项目提供了多环境配置文件：
- config/config.common.json：通用配置
- config/config.dev.json：开发环境配置
- config/config.prod.json：生产环境配置
修改生产环境API地址示例：
{
"apiUrl": "https://api.yourdomain.com"
}
常见问题解决方案
端口冲突
若3000端口已被占用，修改docker-compose.yml中的端口映射：
ports:
- '3001:3000' # 将宿主机端口改为3001
依赖更新
当package.json中的依赖更新后，需重新构建镜像：
docker-compose down
docker-compose up -d --build
日志查看
docker-compose logs -f angular-starter
总结与扩展
通过本文，你已掌握使用Docker Compose部署MFE-starter项目的完整流程。这个方案的优势在于：
- 环境一致性：消除"在我电脑上能运行"的问题
- 隔离性：每个服务运行在独立容器中，避免依赖冲突
- 可扩展性：如需添加后端API服务，只需在docker-compose.yml中增加服务定义
下一步，你可以尝试：
- 添加Nginx服务作为前端资源服务器
- 集成数据库服务实现全栈部署
- 使用CI/CD管道实现自动化部署
项目完整配置可参考README.md，如有问题可查阅官方文档或提交issue。
点赞+收藏+关注，下期带来《微前端架构下的服务间通信方案》
【免费下载链接】MFE-starter MFE Starter 项目地址: https://gitcode.com/gh_mirrors/mf/MFE-starter
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
