create-react-app Docker镜像

概述

create-react-app Docker镜像是一个预配置的开发环境，专为使用***的create-react-app工具创建和开发React应用而设计。该镜像提供了一致的开发环境，消除了"在我机器上能运行"的问题，并简化了React项目的初始化、开发和构建流程。

核心功能和特性

• 预安装最新版create-react-app及相关依赖
• 包含Node.js和npm环境，无需本地安装
• 支持热重载(HMR)，提升开发效率
• 内置开发服务器，可直接预览应用
• 支持生产环境构建，生成优化的静态文件
• 兼容Linux、macOS和Windows系统

使用场景和适用范围

• React初学者快速入门，无需复杂环境配置
• 团队协作时确保开发环境一致性
• CI/CD流程中集成React应用的构建和测试
• 多项目开发时隔离不同项目的依赖环境
• 教学环境中统一学生的开发环境
• 快速原型开发和演示

使用方法和配置说明

基本使用方法

创建新的React应用

docker run --rm -v $(pwd):/app teracyhq/create-react-app npx create-react-app my-app

进入开发模式

cd my-app
docker run --rm -it -v $(pwd):/app -p 3000:3000 teracyhq/create-react-app npm start

现在可以通过访问 http://localhost:3000 在浏览器中查看应用。

构建生产版本

docker run --rm -v $(pwd):/app teracyhq/create-react-app npm run build

构建完成后，优化后的静态文件将生成在build目录中。

Docker Compose配置

创建docker-compose.yml文件：

version: '3'

services:
  react-app:
    image: teracyhq/create-react-app
    volumes:
      - ./:/app
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    command: npm start

使用以下命令启动开发环境：

docker-compose up

环境变量

持久化数据

为了确保依赖包不会在容器重启时丢失，可以将node_modules目录单独挂载为卷：

docker run --rm -it -v $(pwd):/app -v react_node_modules:/app/node_modules -p 3000:3000 teracyhq/create-react-app npm start

高级用法

自定义Node.js版本

如需使用特定版本的Node.js，可以通过标签指定：

docker run --rm -v $(pwd):/app teracyhq/create-react-app:node-16 npx create-react-app my-app

生产环境部署

构建完成后，可以使用nginx镜像部署生成的静态文件：

# Dockerfile
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后构建并运行生产镜像：

# 构建React应用
docker run --rm -v $(pwd):/app --name react-builder teracyhq/create-react-app npm run build

# 构建生产镜像
docker build -t my-react-app .

# 运行生产容器
docker run -d -p 80:80 my-react-app

注意事项

• 首次运行时会下载依赖，可能需要几分钟时间
• Windows用户应使用PowerShell或WSL2以获得最佳体验
• 确保Docker引擎版本不低于18.09，以支持所有功能
• 生产环境中应使用多阶段构建，减小最终镜像体积