redhathackathon/bank-webui-reactjs

redhathackathon/bank-webui-reactjs 镜像说明

镜像概述

本镜像基于Create React App构建，是Red Hat Hackathon活动中的银行WebUI前端项目，提供了完整的前端开发、测试和生产部署能力，适用于银行类Web界面的快速开发与演示。

核心功能

1. 开发模式运行：通过yarn start启动开发服务器，支持实时热更新和错误提示。
2. 测试执行：使用yarn test启动交互式测试运行器，验证代码功能。
3. 生产构建：通过yarn build生成优化后的生产环境静态文件。
4. 配置自定义：可通过yarn eject导出完整配置文件，实现深度自定义。

使用场景

• 银行前端项目的快速开发与调试
• Hackathon活动中的原型演示
• 银行Web界面的生产环境部署前验证

配置说明

可用脚本

在容器内项目目录中执行以下命令：

• yarn start：启动开发服务器（默认端口3000）
• yarn test：启动交互式测试
• yarn build：生成生产构建文件（输出至build目录）
• yarn eject：导出完整配置文件（不可逆操作）

部署示例

Docker Run 开发模式

bash
docker run -d -p 3000:3000 redhathackathon/bank-webui-reactjs yarn start

访问http://localhost:3000即可查看运行中的Web界面。

生产构建与部署（结合Nginx）

1. 生成生产构建文件：

bash
docker run --rm -v $(pwd)/build:/app/build redhathackathon/bank-webui-reactjs yarn build

2. 使用Nginx部署静态文件（示例docker-compose.yml）：

yaml
version: '3'
services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./build:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

（需自行准备nginx.conf配置文件）