3dpar/dashboard

Create React App Docker镜像文档

镜像概述

本Docker镜像基于https://github.com/***/create-react-app%E6%9E%84%E5%BB%BA%EF%BC%8C%E6%8F%90%E4%BE%9B%E4%BA%86%E5%AE%8C%E6%95%B4%E7%9A%84React%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E3%80%82%E5%AE%83%E9%9B%86%E6%88%90%E4%BA%86%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E3%80%81%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7%E5%92%8C%E7%94%9F%E4%BA%A7%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B%EF%BC%8C%E6%97%A8%E5%9C%A8%E7%AE%80%E5%8C%96React%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E3%80%81%E5%BC%80%E5%8F%91%E3%80%81%E6%B5%8B%E8%AF%95%E5%92%8C%E9%83%A8%E7%BD%B2%E8%BF%87%E7%A8%8B%E3%80%82

核心功能与特性

• 开发模式支持：内置开发服务器，支持代码热重载，实时反映代码变更
• 测试框架集成：提供交互式测试运行器，支持测试用例的实时监控与执行
• 生产构建优化：自动将React应用打包为优化的生产版本，包含代码压缩、哈希文件名生成等
• 配置灵活性：支持通过eject命令暴露底层构建配置，满足高级定制需求

使用场景

• React应用的快速原型开发
• 前端团队的统一开发环境配置
• CI/CD流程中的React应用测试与构建环节
• 小型到中型React项目的标准化开发流程

使用方法

基本使用流程

1. 拉取镜像（假设镜像名称为create-react-app）
2. 运行容器并挂载本地项目目录
3. 执行相应命令进行开发、测试或构建

常用命令示例

1. 启动开发模式

bash
docker run -it --rm -p 3000:3000 -v $(pwd):/app create-react-app yarn start

• -p 3000:3000：将容器内3000端口映射到本地，通过http://localhost:3000访问应用
• -v $(pwd):/app：挂载当前目录到容器内/app目录，实现代码实时同步
• yarn start：启动开发服务器，支持热重载

2. 运行测试

bash
docker run -it --rm -v $(pwd):/app create-react-app yarn test

• 启动交互式测试运行器，监控文件变化并自动重新运行测试
• 测试结果将输出到控制台

3. 构建生产版本

bash
docker run -it --rm -v $(pwd):/app create-react-app yarn build

• 在项目根目录生成build文件夹，包含优化后的生产版本文件
• 构建产物可直接部署到静态文件服务器

4. 暴露配置（Eject）

bash
docker run -it --rm -v $(pwd):/app create-react-app yarn eject

注意：此操作不可逆。执行后会将所有构建配置文件（webpack、Babel、ESLint等）复制到项目目录，允许完全自定义构建流程。

扩展学习

• https://***.github.io/create-react-app/docs/getting-started
• React官方文档

高级主题

• 代码分割：https://***.github.io/create-react-app/docs/code-splitting
• ** bundle大小分析**：https://***.github.io/create-react-app/docs/analyzing-the-bundle-size
• 渐进式Web应用(PWA)：https://***.github.io/create-react-app/docs/making-a-progressive-web-app
• 高级配置：https://***.github.io/create-react-app/docs/advanced-configuration
• 部署指南：https://***.github.io/create-react-app/docs/deployment

常见问题

• yarn build构建失败问题：https://***.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify