ReactJS Alpine 镜像文档

镜像概述

ReactJS Alpine 是 Clearandfizzy 核心 Docker 容器之一，基于轻量级 Alpine Linux 发行版构建，集成了 ReactJS 开发和运行环境。该镜像旨在提供一个精简、高效的 ReactJS 应用部署解决方案，适用于开发、测试和生产环境。

核心功能和特性

• 轻量级基础：基于 Alpine Linux，镜像体积小，资源占用低
• ReactJS 环境：预配置 ReactJS 开发和运行环境
• 多阶段构建支持：优化生产环境部署
• 安全性：继承 Alpine Linux 的安全特性，减少攻击面
• 灵活性：可轻松扩展和定制以满足特定项目需求

使用场景和适用范围

• ReactJS 应用开发环境
• 持续集成/持续部署 (CI/CD) 流程
• ReactJS 应用测试环境
• 生产环境 ReactJS 应用部署
• 微前端架构中的 React 应用组件

使用方法和配置说明

基本用法

拉取镜像

docker pull clearandfizzy/reactjs-alpine

运行容器

docker run -it --rm -p 3000:3000 clearandfizzy/reactjs-alpine

开发环境配置

# 运行开发容器并挂载项目目录
docker run -it --rm \
  -p 3000:3000 \
  -v $(pwd):/app \
  -w /app \
  clearandfizzy/reactjs-alpine \
  npm start

生产环境部署

使用 Docker Compose

创建 docker-compose.yml 文件：

version: '3'
services:
  react-app:
    image: clearandfizzy/reactjs-alpine
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    restart: always

创建项目 Dockerfile：

# 构建阶段
FROM clearandfizzy/reactjs-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

启动服务：

docker-compose up -d

环境变量配置

示例：自定义配置

docker run -d \
  --name react-app \
  -p 8080:8080 \
  -e NODE_ENV=production \
  -e PORT=8080 \
  -e REACT_APP_API_URL=[***] \
  clearandfizzy/reactjs-alpine

高级配置

自定义构建命令

docker run -it --rm \
  -v $(pwd):/app \
  -w /app \
  clearandfizzy/reactjs-alpine \
  sh -c "npm install && npm run build:custom"

多阶段构建示例

# 阶段 1: 构建应用
FROM clearandfizzy/reactjs-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 阶段 2: 部署应用
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

故障排除

• 端口冲突：确保宿主机端口未被占用，或使用 -p 参数映射不同端口
• 依赖问题：可进入容器内部调试 docker exec -it <container_id> sh
• 构建错误：检查项目依赖和构建脚本，确保与 Alpine 环境兼容

维护和更新

• 定期拉取最新镜像以获取安全更新
• 使用版本标签固定镜像版本，确保部署一致性
• 生产环境建议使用多阶段构建，减小最终镜像体积

注意事项

• Alpine Linux 使用 musl libc，与 glibc 存在差异，部分原生模块可能需要额外配置
• 生产环境部署时建议配合反向代理服务器使用
• 敏感环境变量不应直接嵌入镜像，而应通过运行时注入或使用 secrets 管理

相关资源

• Alpine Linux 官方文档
• ReactJS 官方文档
• Docker 官方文档