实践项目：使用 docker 部署 TodoList 应用

在本章节中，我们将创建一个完整的 Todo 应用，包含以下组件：

• Nginx: 路由转发
• 前端: React 应用
• 后端: Node.js API 服务
• 数据库: MongoDB

5_compose/
├── docker-compose.yml    # Compose 配置文件
├── nginx/                # nginx
├── frontend/            # React 前端应用
├── backend/             # Node.js 后端服务
└── INSTRUCTIONS.md            # 项目说明

                        ┌─────────────┐
                        │   Nginx     │
                        │   :8080     │
                        └─────┬───────┘
                             │
                    ┌────────┴────────┐
                    │                 │
            ┌───────▼─────┐   ┌──────▼──────┐
            │  Frontend   │   │   Backend    │
            │  (React)    │   │  (Node.js)   │
            │   :3000     │   │    :3001     │
            └─────────────┘   └──────┬───────┘
                                    │
                            ┌───────▼───────┐
                            │   MongoDB     │
                            │  Database     │
                            │    :27017     │
                            └───────────────┘

1. nginx 服务

   • 使用官方 nginx 镜像
   • 映射端口 8080，作为应用的访问入口
   • 将 nginx.conf 配置文件打包进镜像

2. frontend 服务

   • 使用本地 Dockerfile 构建
   • 暴露端口 3000，仅容器网络访问
   • 设置 API URL 环境变量
   • 依赖于 backend 服务
   • 使用卷挂载实现热重载

3. backend 服务

   • 使用本地 Dockerfile 构建
   • 映射端口 3001，仅容器网络访问
   • 设置 MongoDB 连接环境变量
   • 依赖于 mongodb 服务
   • 使用卷挂载实现热重载

4. mongodb 服务

   • 使用官方 MongoDB 镜像
   • 映射端口 27017，仅容器网络访问
   • 使用命名卷持久化数据

• Docker Compose 会自动创建一个默认网络 (bridge模式)
• 所有服务都在同一网络中
• 服务可以通过服务名互相访问

• 使用命名卷 mongodb_data 持久化数据库数据
• 使用绑定挂载实现开发时的代码热重载

1. 在后台启动服务

   docker compose up -d
   

2. 查看服务状态

   docker compose ps
   

3. 查看服务日志

   查看特定服务的日志：
   ```bash
   docker compose logs frontend
   docker compose logs backend
   docker compose logs mongodb
   

4. 停止所有服务

   docker compose down
   

5. 重新构建服务

   docker compose build
   

6. 重启单个服务

   docker compose restart frontend
   

我们使用了在 nginx 这里配置了 8080 端口作为 todo 应用的整体入口，在 cnb 上我们可以通过添加一个8080 的端口映射来实现外网访问, 可以按照如下步骤来配置。 点击这个浏览器图标，就可以访问 todo 应用了。