entigolabs/entigo-kubernetes-training-application

Create React App 开发环境镜像

镜像概述

本镜像基于***的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%EF%BC%8C%E5%8C%85%E5%90%AB%E5%BC%80%E5%8F%91%E3%80%81%E6%B5%8B%E8%AF%95%E3%80%81%E6%9E%84%E5%BB%BA%E5%8F%8A%E9%85%8D%E7%BD%AE%E8%87%AA%E5%AE%9A%E4%B9%89%E7%AD%89%E5%85%A8%E6%B5%81%E7%A8%8B%E5%B7%A5%E5%85%B7%E9%93%BE%EF%BC%8C%E6%97%A8%E5%9C%A8%E7%AE%80%E5%8C%96React%E5%BA%94%E7%94%A8%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%8E%E5%BC%80%E5%8F%91%E8%BF%87%E7%A8%8B%E3%80%82

核心功能与特性

开发模式支持

• 通过yarn start命令启动开发服务器，支持热重载，代码修改后自动刷新页面
• 默认监听3000端口，可通过浏览器访问应用

测试功能

• 提供yarn test命令启动交互式测试运行器，支持测试用例的实时监控与执行
• 集成测试报告与错误提示功能

生产构建

• 使用yarn build命令生成优化的生产版本，输出至build目录
• 自动进行代码压缩、依赖优化及文件名哈希处理，确保最佳性能

配置自定义

• 支持yarn eject命令（单向操作），将所有配置文件（webpack、Babel、ESLint等）复制到项目中，允许完全自定义构建工具链

使用场景

• React应用的快速初始化与开发
• 前端组件的测试与调试
• React应用的生产构建与部署准备
• 需要自定义构建配置的中大型React项目

使用方法与配置说明

基础使用流程

1. 启动开发模式

   bash
   # 在项目目录中运行
   yarn start
   

   • 应用将运行在开发模式下，访问http://localhost:3000查看
   • 代码修改后页面自动重载，控制台将显示 lint 错误

2. 执行测试

   bash
   yarn test
   

   • 启动交互式测试运行器，支持实时监控测试用例
   • 详细测试方法参见https://***.github.io/create-react-app/docs/running-tests

3. 构建生产版本

   bash
   yarn build
   

   • 生成优化后的生产构建文件至build目录
   • 构建文件已压缩，文件名包含哈希值，可直接部署
   • 部署相关说明参见https://***.github.io/create-react-app/docs/deployment

4. 自定义配置（谨慎使用）

   bash
   yarn eject
   

   注意：此操作不可逆。执行后将移除单一构建依赖，复制所有配置文件及依赖到项目中，允许完全自定义构建工具链

Docker部署示例

开发环境部署

bash
docker run -it -p 3000:3000 -v $(pwd):/app docker.xuanyuan.run/my-react-app yarn start

• -p 3000:3000：映射容器3000端口到本地，允许访问开发服务器
• -v $(pwd):/app：挂载本地项目目录到容器，实现代码实时同步

生产构建部署

bash
# 构建生产文件
docker run -it -v $(pwd):/app docker.xuanyuan.run/my-react-app yarn build

# 使用nginx部署构建结果
docker run -d -p 80:80 -v $(pwd)/build:/usr/share/nginx/html docker.xuanyuan.run/nginx

扩展学习

• 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/troubleshooting