logo
0
0
WeChat Login

使用 docker 构建 Todo 应用

在本章节中,我们将创建一个完整的 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 应用了。

About

一个完整的web应用 实现一个Todolist记事本功能,包含网关服务器,前端,后端,数据库,并通过docker管理了多服务的依赖关系、 部署。

Language
JavaScript81.3%
Dockerfile12.2%
HTML6.5%