varungujarathi9/video-party-client

Create React App Docker镜像文档

镜像概述

本镜像基于Create React App构建，提供完整的React应用开发环境，集成了开发、测试、构建所需的工具链，旨在简化React前端项目的搭建与开发流程。

核心功能与特性

• 开发模式支持：通过npm start启动开发服务器，支持代码热重载，实时预览修改效果
• 测试功能：通过npm test启动交互式测试运行器，支持测试监控与结果反馈
• 生产构建：通过npm run build生成优化的生产版本，包含代码压缩、哈希文件名等特性
• 配置自定义：通过npm run eject可完全控制构建配置（不可逆操作）

使用场景

• React前端项目的快速初始化与开发
• 前端应用的单元测试与集成测试
• 生产环境构建物的生成与优化
• 需要标准化开发环境的团队协作场景

使用方法与配置说明

基本使用命令

启动开发服务器

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

• 参数说明：
  • -p 3000:3000：将容器3000端口映射到主机，通过http://localhost:3000访问应用
  • -v $(pwd):/app：挂载当前目录到容器内/app目录，实现代码实时同步
  • --rm：容器停止后自动清理

运行测试

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

• 启动交互式测试监控模式，文件修改时自动重新运行测试

构建生产版本

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

• 生成优化的生产构建物到build目录，包含minified代码和内容哈希文件名

配置自定义（eject）

注意：此操作不可逆，将复制所有配置文件到项目中

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

• 适用于需要深度定制webpack、Babel等构建配置的场景

Docker Compose配置示例

创建docker-compose.yml文件：

yaml
version: '3'
services:
  react-dev:
    image: docker.xuanyuan.run/create-react-app
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
    command: npm start
    environment:
      - NODE_ENV=development

启动服务：

bash
docker-compose up

学习资源

• https://***.github.io/create-react-app/docs/getting-started
• https://reactjs.org/
• https://***.github.io/create-react-app/docs/code-splitting
• https://***.github.io/create-react-app/docs/analyzing-the-bundle-size
• https://***.github.io/create-react-app/docs/advanced-configuration