3dpar/dashboard

Create React App Docker镜像文档

镜像概述

本Docker镜像基于https://github.com/***/create-react-app构建，提供了完整的React应用开发环境。它集成了开发服务器、测试工具和生产构建流程，旨在简化React项目的初始化、开发、测试和部署过程。

核心功能与特性

• 开发模式支持：内置开发服务器，支持代码热重载，实时反映代码变更
• 测试框架集成：提供交互式测试运行器，支持测试用例的实时监控与执行
• 生产构建优化：自动将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 docker.xuanyuan.run/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 docker.xuanyuan.run/create-react-app yarn test

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

3. 构建生产版本

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

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

4. 暴露配置（Eject）

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

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

扩展学习

• https://***.github.io/create-react-app/docs/getting-started
• https://reactjs.org/

高级主题

• 代码分割：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