AI导哈

三层应用框架

一个使用Podman构建的三层应用框架，包含React前端、Flask API和PostgreSQL数据库，支持用户登录和待办事项管理。

  • by sdace9719
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 sdace9719/mcp-devops

使用说明

MCP 三层应用程序（使用 Podman Compose）

使用 Podman 的一个简单的三层架构：React 前端（Vite + Tailwind）、Flask API 和 PostgreSQL。使用演示用户登录，查看和管理待办事项。

栈

  • 前端：使用 React + Vite + Tailwind，由 Nginx 提供服务
  • 后端：Flask + Gunicorn
  • 数据库：PostgreSQL 15（已预装演示用户和待办事项）

目录布局

  • frontend/React 应用和 Dockerfile（构建 + Nginx 运行时）
  • backend/Flask 应用，需求文件，Dockerfile
  • db/PostgreSQL Dockerfile 和初始化 SQL 用于填充模式/数据
  • podman-compose.yml编曲

快速入门

确保您已安装 Podman 和 podman-compose。

cd /home/swapnil/mcp
podman-compose build
podman-compose up -d
# App will be available at http://localhost:${FRONTEND_PORT:-8082}

查看日志：

podman logs -f mcp_backend
podman logs -f mcp_frontend
podman logs -f mcp_db

凭证；资格；资历

  • 电子邮箱： demo@example.com
  • 密码： demo123

环境

对于本地开发，通过 compose 设置默认值：

  • DB_HOST=db， DB_PORT=5432， DB_NAME=appdb， DB_USER=appuser， DB_PASSWORD=appsecret
  • JWT_SECRET=supersecretjwtkeychangeme， JWT_EXPIRES_IN=86400

API

  • POST /api/auth/login → { token }
  • POST /api/auth/register → 创建一个用户
  • GET /api/todos → 列出所有待办事项（使用Bearer令牌）
  • POST /api/todos → 添加待办事项
  • PATCH /api/todos/:id → 切换完成

开发说明

  • 前端开发服务器： npm run dev 里面 frontend/ (代理 /api （到后端）
  • 后端在容器中通过Gunicorn运行。您也可以通过设置环境变量在本地运行Flask flask --app app.main run （确保数据库可访问）。

清理

podman-compose down -v

相关 MCP