Nextjs MCP Docker Template

Docker开发环境模板

一个功能齐全的基于Docker的开发环境模板，专为Next.js应用程序设计，支持PostgreSQL数据库和MCP（模型上下文协议）服务器。

概述

此存储库提供了一个完整的容器化开发环境，其中包括：

• Next.js应用程序 -基于TypeScript的现代React框架
• PostgreSQL数据库 -持久数据存储
• MCP服务器 -用于AI集成的模型上下文协议服务器
• 预配置工具 -基本开发工具和VS代码扩展

建筑

该环境由三个通过Docker Compose编排的Docker服务组成：

服务

1. 应用 -主应用程序容器

- 基于Node.js 24 - 运行Next.js应用程序 - 暴露在港口 3000 - 包括pnpm包管理器

1. PostgreSQL 命令行客户端 -PostgreSQL数据库

- 带持久存储的PostgreSQL服务器 - 暴露在港口 5432 - 默认凭据： root/root - 默认数据库： db

1. 主控程序 -MCP服务器容器

- MCP服务器功能的单独容器 - 暴露在港口 3001 - 与应用程序共享相同的Node.js环境

特性

开发工具

Docker镜像包括：

• pnpm -快速、节省磁盘空间的包管理器
• PostgreSQL客户端 -用于数据库交互
• ripgrep -快速文本搜索工具
• fd查找 -快速文件查找器
• 版本控制系统 -版本控制
• 网络工具 -网络公用设施
• 超级用户 -节点用户的无密码sudo访问

VS代码集成

预先配置了基本扩展：

• 克劳德密码（人类克劳德密码）
• React和Next.js代码片段
• Prisma ORM支持
• 顺风CSS智能感知
• PostgreSQL客户端
• 预分级代码格式化程序
• 还有更多。..

自定义外壳环境

包括一个可定制的bash提示符，其中包括：

• Git分支显示
• 脏污状态指示器
• 颜色编码状态
• 用户名集成

入门指南

先决条件

• 已安装Docker和Docker Compose
• 带有远程容器扩展的VS代码（推荐）

快速开始

1. 克隆此存储库：

   git clone 
   cd 

1. 在VS代码中打开：

   code .

1. 出现提示时，单击“在容器中重新打开”或使用命令面板：

- Remote-Containers: Reopen in Container

1. 环境将自动构建和启动。第一次运行可能需要几分钟。

1. 一旦启动，您的Next.js应用程序将在以下网址可用：

- 应用：http://localhost:3000 - MCP服务器：http://localhost:3001 - PostgreSQL：本地主机：5432

脚本

psql.sh

连接到PostgreSQL数据库的便利脚本。

用途：

./psql.sh

它的作用：

• 使用psql客户端连接到PostgreSQL容器
• 使用默认凭据（root/root）
• 连接到默认数据库（db）
• 连接字符串： postgres://root:root@psql/db

例子：

# Make executable (if needed)
chmod +x psql.sh

# Connect to database
./psql.sh

# You'll be in the PostgreSQL prompt
db=# SELECT version();

数据库配置

默认凭据

• 主持人： psql （容器名称）或 localhost （来自主机）
• 端口： 5432
• 数据库： db
• 用户名： root
• 密码： root

连接串

从容器内：

postgres://root:root@psql:5432/db

从主机：

postgres://root:root@localhost:5432/db

永久存储

数据库数据保存在名为的Docker卷中 psql，确保您的数据在容器重启后仍然有效。

定制

更改数据库凭据

编辑 .devcontainer/docker-compose.yml:

psql:
  environment:
    POSTGRES_USER: your_username
    POSTGRES_PASSWORD: your_password
    POSTGRES_DB: your_database

记得更新 psql.sh 因此。

添加更多工具

编辑 .devcontainer/Dockerfile 并在apt安装部分添加：

RUN apt -y install postgresql \
    postgresql-client \
    ripgrep \
    your-new-tool

添加VS代码扩展

编辑 .devcontainer/devcontainer.json 在...之下 customizations.vscode.extensions:

"extensions": [
  "existing.extension",
  "your.new-extension"
]