Django React Boilerplate开发环境配置：Docker与本地开发双模式详解

Django React Boilerplate开发环境配置Docker与本地开发双模式详解【免费下载链接】django-react-boilerplateDjango 5, React, Tailwind 4 with Python 3 and Webpack project boilerplate项目地址: https://gitcode.com/gh_mirrors/dj/django-react-boilerplateDjango React Boilerplate是一个集成了Django 5、React、Tailwind 4、Python 3和Webpack的项目模板为开发者提供了高效构建现代Web应用的基础架构。本文将详细介绍如何在两种主流模式下配置该项目的开发环境Docker容器化部署和传统本地开发环境搭建帮助新手快速上手这个强大的全栈开发框架。 准备工作环境与工具要求在开始配置开发环境前请确保您的系统满足以下基本要求操作系统Linux、macOS或Windows建议使用WSL2基础工具Git、Python 3.12、Node.js 18、pnpm包管理器Docker模式额外需求Docker Engine 20.10 和 Docker Compose 2.0项目使用Git版本控制首先需要克隆代码仓库git clone https://gitcode.com/gh_mirrors/dj/django-react-boilerplate cd django-react-boilerplateDjango React Boilerplate基于Django框架构建提供企业级后端开发能力 Docker模式一键启动完整开发环境Docker模式是推荐的快速启动方式通过容器化技术将所有依赖项数据库、缓存、前端和后端服务打包确保开发环境的一致性和可移植性。1️⃣ 环境配置文件准备首先创建必要的环境配置文件# 复制环境变量示例文件并修改 cp backend/.env.example backend/.env # 复制本地设置配置文件 cp backend/project_name/settings/local.py.example backend/project_name/settings/local.py编辑backend/.env文件取消以下行的注释以启用PostgreSQL数据库连接DATABASE_URLpostgres://project_name:passworddb:5432/project_name2️⃣ 执行Docker初始化设置项目提供了便捷的Makefile命令来自动化Docker环境配置# 执行初始化设置创建卷、构建镜像、生成API文档 make docker_setup # 创建数据库迁移文件 make docker_makemigrations # 应用数据库迁移 make docker_migrate3️⃣ 启动与访问项目完成初始化后启动所有服务容器# 启动所有服务后台运行 make docker_up此时系统会启动以下服务容器后端服务Django应用运行在 http://localhost:8000前端服务React开发服务器运行在 http://localhost:3000由Django代理数据库PostgreSQL运行在容器内部端口5432缓存服务Redis运行在容器内部端口6379邮件测试MailHog邮件服务器Web界面在 http://localhost:8025要查看服务日志可以使用# 查看特定服务日志如backend make docker_logs backend4️⃣ 停止与清理开发完成后停止所有服务# 停止所有容器 make docker_down 本地开发模式深度定制开发环境如果需要更灵活的开发环境配置或资源受限可以选择本地开发模式直接在系统中安装所有依赖项。1️⃣ 后端环境配置首先设置Python虚拟环境并安装依赖# 使用Poetry创建并激活虚拟环境 poetry install # 激活虚拟环境 poetry shell配置数据库连接编辑backend/.env文件根据需要选择数据库类型# SQLite简单开发环境 DATABASE_URLsqlite:///db.sqlite3 # 或PostgreSQL生产环境兼容 DATABASE_URLpostgres://user:passwordlocalhost:5432/project_name执行数据库迁移# 创建迁移文件 poetry run python backend/manage.py makemigrations # 应用迁移 poetry run python backend/manage.py migrate # 生成API文档 poetry run python backend/manage.py spectacular --color --file schema.yml启动Django开发服务器poetry run python backend/manage.py runserver2️⃣ 前端环境配置在新的终端窗口中安装前端依赖并启动开发服务器# 安装Node.js依赖 pnpm install # 从API schema生成TypeScript类型定义 pnpm run openapi-ts # 启动Webpack开发服务器 pnpm run dev此时前端资源会通过Webpack开发服务器提供Django通过django-webpack-loader插件自动加载这些资源访问 http://localhost:8000 即可看到完整应用。3️⃣ 后台任务与缓存服务本地开发还需要启动Celery工作器和Redis服务# 启动Redis服务器新终端 redis-server --port 6379 # 启动Celery工作器新终端 poetry run celery --appproject_name worker --loglevelinfo 两种开发模式对比与选择建议特性Docker模式本地开发模式环境一致性✅ 高所有依赖容器化⚠️ 中等依赖系统配置资源占用⚠️ 较高需要运行多个容器✅ 较低仅运行必要服务配置复杂度✅ 简单一键命令⚠️ 较高需手动配置各组件调试便捷性⚠️ 中等需熟悉Docker命令✅ 高直接访问系统服务跨平台兼容性✅ 优秀容器隔离系统差异⚠️ 一般依赖系统库版本选择建议团队协作或快速启动新项目 →Docker模式性能受限设备或需要深度定制 →本地开发模式生产环境部署测试 →Docker模式与生产环境配置一致️ 常用开发命令速查表Docker模式常用命令# 启动所有服务 make docker_up # 停止所有服务 make docker_down # 查看服务日志 make docker_logs [服务名] # 执行数据库迁移 make docker_migrate # 更新依赖并重建容器 make docker_update_dependencies本地开发模式常用命令# 后端开发服务器 poetry run python backend/manage.py runserver # 前端开发服务器 pnpm run dev # 运行测试 make test # 代码格式化 make backend_format pnpm run lint 总结与后续步骤通过本文介绍的两种模式您已经成功配置了Django React Boilerplate的开发环境。无论是追求便捷性的Docker容器化方案还是需要深度定制的本地开发模式该项目都提供了灵活的配置选项。接下来您可以探索项目结构了解前后端代码组织方式阅读CONTRIBUTING.md文档了解贡献指南查看pyproject.toml和package.json了解项目依赖开始开发您的第一个功能利用项目提供的API模板和React组件Django React Boilerplate结合了Django的强大后端能力与React的现代前端开发体验祝您开发愉快如有任何问题可以查阅项目文档或提交issue寻求帮助。【免费下载链接】django-react-boilerplateDjango 5, React, Tailwind 4 with Python 3 and Webpack project boilerplate项目地址: https://gitcode.com/gh_mirrors/dj/django-react-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考