omegaup/frontend

omegaup-frontend 镜像文档

镜像概述和主要用途

omegaup-frontend 是 omegaup.com 网站的官方前端容器，用于提供网站的用户界面和前端交互功能。作为 omegaup.com 系统架构的核心组件之一，该镜像封装了网站所需的全部前端资源和运行环境，旨在简化前端服务的部署流程，确保用户界面的一致性和可用性。

主要用途包括：

• 作为 omegaup.com 前端服务的标准化部署单元
• 提供网站的静态资源（HTML、CSS、JavaScript）和动态交互功能
• 与 omegaup 后端服务配合，实现完整的用户请求处理流程

核心功能和特性

核心功能

• 静态资源服务：高效托管网站前端所需的 HTML、CSS、JavaScript 文件及多媒体资源
• 前端路由管理：处理客户端路由逻辑，实现单页应用（SPA）的页面切换
• API 通信层：封装与后端服务的接口调用逻辑，处理数据请求与响应
• 用户界面渲染：实现响应式布局，支持不同设备（桌面、移动设备）的显示适配

特性

• 轻量级设计：基于优化的基础镜像，减少容器体积，提升启动速度
• 可移植性：遵循容器化标准，支持在任何 Docker 兼容环境中运行
• 配置灵活性：通过环境变量动态调整前端行为（如后端 API 地址、日志级别等）
• 版本一致性：固定版本的前端资源，避免因环境差异导致的兼容性问题

使用场景和适用范围

使用场景

• omegaup.com 网站的开发、测试和生产环境部署
• 需要快速搭建前端服务进行功能验证的场景
• 与 omegaup 后端服务协同部署的完整系统环境构建
• 前端服务的水平扩展（通过多实例部署提高并发处理能力）

适用范围

• 个人开发者搭建 omegaup 本地开发环境
• 教育机构部署 omegaup 平台供学生使用
• 企业或组织内部部署定制化的 omegaup 系统
• 云服务环境中自动化部署 omegaup 前端服务

使用方法和配置说明

基本部署命令

通过以下命令可快速启动前端容器：

bash
docker run -d \
  --name omegaup-frontend \
  -p 80:80 \
  omegaup/frontend:latest

环境变量配置

容器支持通过环境变量调整运行参数，常用配置如下：

示例：指定自定义后端 API 地址

bash
docker run -d \
  --name omegaup-frontend \
  -p 80:80 \
  -e API_URL="https://api.omegaup.com" \
  omegaup/frontend:latest

Docker Compose 配置示例

与 omegaup 后端服务协同部署的 docker-compose.yml 示例：

yaml
version: '3'
services:
  frontend:
    image: omegaup/frontend:latest
    ports:
      - "80:80"
    environment:
      - API_URL="http://backend:3000/api"
    depends_on:
      - backend
    restart: always

  backend:
    image: omegaup/backend:latest
    # 后端服务配置...

数据卷挂载（可选）

如需自定义静态资源或配置文件，可通过数据卷挂载覆盖容器内默认文件：

bash
docker run -d \
  --name omegaup-frontend \
  -p 80:80 \
  -v ./custom-assets:/usr/share/nginx/html/assets \
  omegaup/frontend:latest

注意事项

• 容器默认使用 80 端口提供 HTTP 服务，生产环境建议配合反向代理（如 Nginx）启用 HTTPS
• 需确保前端容器能够网络访问配置的后端 API 服务
• 升级镜像前建议备份自定义配置或数据卷内容
• 高并发场景下可通过负载均衡器实现多容器实例的流量分发