neevaplay/frontend

Create React App前端项目Docker镜像文档

镜像概述

本镜像基于Create React App构建，提供React前端应用的完整开发、测试和部署环境。通过预配置的npm脚本和Docker化部署，简化React应用的开发流程和部署过程。

核心功能与特性

• 开发模式：支持热重载的开发环境，实时反映代码变更
• 测试支持：集成测试运行器，提供交互式监控模式
• 生产构建：优化生产环境构建，生成最小化、带哈希值的静态资源
• 配置自定义：支持通过eject命令获取完整配置控制权
• Docker化部署：提供简单的Docker构建和运行命令，便于快速部署

使用场景

• React前端应用的开发与调试
• 前端单元测试与集成测试
• 生产环境React应用的构建与部署
• 需要快速启动React项目的开发团队

使用方法

Docker构建

构建Docker镜像：

bash
docker build -t giggl3/frontend:latest .

本地测试运行

运行Docker容器进行本地测试：

bash
docker run -it -p 8080:80 docker.xuanyuan.run/giggl3/frontend:latest

访问 http://localhost:8080 即可查看应用。

可用脚本

在项目目录中，可运行以下npm脚本：

npm start

启动开发模式应用。打开 http://localhost:3000 在浏览器中查看。代码修改时页面会自动重载，控制台会显示 lint 错误。

npm test

启动交互式监控模式的测试运行器。详见https://***.github.io/create-react-app/docs/running-tests文档。

npm run build

将应用构建到build文件夹用于生产环境。正确捆绑生产模式的React，并优化构建以获得最佳性能。构建文件已最小化，文件名包含哈希值。应用已准备好部署。详见https://***.github.io/create-react-app/docs/deployment文档。

npm run eject

注意：这是单向操作。执行eject后无法恢复！

如果对构建工具和配置选择不满意，可随时执行eject。此命令将从项目中移除单个构建依赖项，转而将所有配置文件和传递依赖（webpack、Babel、ESLint等）复制到项目中，以便完全控制它们。除eject外的所有命令仍可使用，但会指向复制的脚本，以便进行调整。

了解更多

可在https://***.github.io/create-react-app/docs/getting-started中了解更多信息。

学习React，请查看https://reactjs.org/%E3%80%82

代码分割

此部分已移至：https://***.github.io/create-react-app/docs/code-splitting

分析捆绑包大小

此部分已移至：https://***.github.io/create-react-app/docs/analyzing-the-bundle-size

创建渐进式Web应用

此部分已移至：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

npm run build 无法压缩

此部分已移至：https://***.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify