React Frontend Container 镜像文档

镜像概述

React Frontend Container 是一个预配置的Docker镜像，专为运行React前端应用设计。该镜像基于轻量级Web服务器（通常为Nginx）构建，内置React应用的编译产物（静态HTML/CSS/JS文件），可直接启动并对外提供服务，无需额外配置Web服务器环境。

核心功能与特性

• 预配置Web服务器：内置Nginx等轻量级Web服务器，已优化静态资源服务（如Gzip压缩、缓存策略）。
• 静态文件支持：原生支持React单页应用（SPA）的静态文件（HTML/CSS/JS）服务，包括路由重定向配置（解决SPA路由刷新404问题）。
• 轻量级：基于Alpine Linux或精简基础镜像，镜像体积小，启动速度快。
• 易于集成：支持通过卷挂载（Volume）替换默认静态文件，或通过环境变量调整服务配置。
• 跨环境兼容：适用于开发、测试及生产环境，部署流程一致。

使用场景

• 开发环境快速验证：本地编译React应用后，通过容器快速启动并测试运行效果。
• CI/CD流程集成：作为前端构建流水线的输出环节，直接打包为容器镜像用于后续部署。
• 生产环境部署：作为独立服务部署React单页应用，配合负载均衡器实现高可用。
• 演示环境搭建：快速搭建临时前端演示服务，无需手动配置Web服务器。

使用方法

基本运行

通过以下命令启动容器，将React应用暴露在本地80端口：

docker run -d -p 80:80 --name react-frontend [镜像名称]

参数说明：

• -d：后台运行容器；
• -p 80:80：将容器内80端口映射到主机80端口（主机端口:容器端口）；
• --name react-frontend：指定容器名称；
• [镜像名称]：替换为实际使用的React前端镜像标签（如my-project/react-frontend:latest）。

自定义端口映射

若需使用非80端口（如8080），调整端口映射参数：

docker run -d -p 8080:80 --name react-frontend [镜像名称]

挂载本地编译文件

若需使用本地最新编译的React产物（如dist目录），通过卷挂载替换容器内默认文件：

# 假设本地React项目编译后产物在当前目录的dist文件夹
docker run -d -p 80:80 -v $(pwd)/dist:/usr/share/nginx/html --name react-frontend [镜像名称]

自定义Nginx配置

如需修改Web服务器配置（如添加跨域头、调整缓存策略），可挂载自定义Nginx配置文件：

# 假设本地自定义配置文件为 nginx.conf
docker run -d -p 80:80 -v $(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf --name react-frontend [镜像名称]

Docker Compose 配置示例

创建docker-compose.yml文件，集成前端服务与其他依赖（如API服务）：

version: '3'
services:
  react-frontend:
    image: [镜像名称]
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html  # 挂载本地编译产物（可选）
      - ./nginx.conf:/etc/nginx/conf.d/default.conf  # 挂载自定义配置（可选）
    restart: always  # 自动重启

启动服务：

docker-compose up -d

环境变量（可选）

部分镜像支持通过环境变量调整配置，具体以实际镜像为准，常见变量包括：

• PORT：指定容器内Web服务端口（默认80）；
• CACHE_TTL：静态资源缓存时间（默认3600秒）；
• ENABLE_GZIP：是否启用Gzip压缩（默认true）。

示例（使用环境变量）：

docker run -d -p 80:80 -e PORT=80 -e CACHE_TTL=7200 --name react-frontend [镜像名称]

注意事项

• 容器默认运行非root用户，确保挂载卷时目录权限正确（可添加--user root临时调整权限，生产环境不建议）；
• 生产环境建议配合HTTPS反向代理（如Traefik、Nginx）使用，容器内优先暴露HTTP端口；
• 若React应用涉及API请求，需在Web服务器配置中添加跨域（CORS）策略或通过反向代理转发API请求。