bayesimpact/react-base

bayesimpact/react-base 镜像文档

镜像概述和主要用途

本镜像为 https://hub.docker.com/r/bayesimpact/react-base/ 的源码，用于加速使用React和npm开发项目的初始设置。它预先配置了包含最新版本工具的容器，旨在简化React应用的开发流程。

核心功能和特性

• 预安装最新版本的开发工具：

  • node
  • npm
  • WebPack
  • React
  • EsLint
  • 大量常用node模块

• 提供三种预配置环境：

  • dev：本地开发环境，支持组件热重载
  • dist：发布环境，仅打包运行所需代码
  • test：测试环境，用于运行自动化测试

注意：请勿将此镜像用于生产环境。生产环境应编译React应用并仅部署npm run dist生成的dist文件夹内容。

使用场景和适用范围

适用于Bayes Impact团队及其他需要快速搭建React开发环境的项目，特别适合需要统一开发工具版本和配置的团队协作场景。

详细使用方法和配置说明

环境说明

Dev环境

默认环境为dev，通过默认命令npm start启动服务器，监听80端口。建议创建容器时进行端口转发：

bash
docker run -p 3000:80 bayesimpact/react-base

基础设置和配置

1. 将本镜像作为基础镜像，将实际应用挂载或复制到/usr/app目录

2. Webpack配置文件位于/usr/app/cfg/（包含base.js、dev.js等），如需修改配置，需通过复制新文件覆盖原有文件

3. 应用源代码应挂载到/usr/app/src目录，Webpack默认入口点为/usr/app/src/entry.js或/usr/app/src/entry.jsx

本地测试

测试镜像前，先本地构建：

bash
docker build -t bayesimpact/react-base:latest .

然后重建基于此镜像的应用镜像。

持续集成

依赖仓库配置

1. 添加test-for-base-change任务，用于运行依赖于bayesimpact/react-base镜像版本的测试

2. 该任务必须使用REACT_BASE_TAG环境变量作为镜像标签

使用REACT_BASE_TAG（必需）

如基于bayesimpact/react-base构建镜像，修改Dockerfile：

Dockerfile
ARG REACT_BASE_TAG
FROM bayesimpact/react-base:${REACT_BASE_TAG:-latest}

构建命令：

bash
docker build --build-arg REACT_BASE_TAG <常规构建参数>

如使用docker-compose，在docker-compose.yml中配置：

yaml
service_name:
    ...
    build:
      ...
      args:
        ...
        - REACT_BASE_TAG

构建命令：

bash
docker-compose build service_name

使用Github Status（可选）

如需通知docker-react依赖仓库构建成功，需更新Github状态检查：

bash
curl -u "$GITHUB_STATUS_TOKEN" "$STATUS_UPDATE_URL" \
  -XPOST --data '{"status": "success", "context": "'$STATUS_CONTEXT'"}'

其中GITHUB_STATUS_TOKEN为具有repo:status权限的Github访问令牌，STATUS_UPDATE_URL和STATUS_CONTEXT由依赖仓库的CircleCI构建提供。

docker-react构建配置

在commit工作流中添加任务：

yaml
- check-dependant-repo:
    requires:
      - build
    repo: <你的仓库名称>
    owner: <你的仓库所有者> # 如为bayesimpact可省略

镜像发布

https://hub.docker.com/r/bayesimpact/react-base/%E4%B8%8A%E7%9A%84%E5%85%AC%E5%BC%80%E9%95%9C%E5%83%8F%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E3%80%82%E5%8F%AA%E9%9C%80%E7%BC%96%E8%BE%91%60Dockerfile%60%E5%B9%B6%E6%8E%A8%E9%80%81%E5%88%B0GitHub%E5%8D%B3%E5%8F%AF%E3%80%82%E6%8E%A8%E9%80%81%E5%88%B0%E9%BB%98%E8%AE%A4%E5%88%86%E6%94%AF%E5%89%8D%E9%9C%80%E7%BB%8F%E8%BF%87%E4%BB%A3%E7%A0%81%E5%AE%A1%E6%9F%A5%E3%80%82