在本章节中，我们将创建一个完整的 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     │
                            └───────────────┘

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