jhumanj/opnform-client

OpnForm Nuxt前端镜像文档

镜像概述

本镜像为OpnForm的Nuxt.js前端应用镜像，用于提供OpnForm的用户界面。基于Nuxt框架构建，支持前端渲染、路由管理及与后端API的交互，是部署OpnForm前端服务的核心组件。

核心功能和特性

• Nuxt.js框架支持：基于Nuxt.js构建，支持服务端渲染(SSR)或静态站点生成(SSG)，提升页面加载速度和SEO表现
• 前端交互功能：提供OpnForm完整的用户界面，包括表单创建、编辑、提交等交互功能
• 响应式设计：适配不同设备屏幕尺寸，确保在桌面和移动设备上均有良好体验
• 路由管理：内置Nuxt路由系统，处理前端页面导航和路由跳转
• API集成：预设与OpnForm后端API的通信配置，支持数据交互

使用场景和适用范围

• 独立部署OpnForm前端：适用于需要将OpnForm前端与后端分离部署的场景
• 开发/测试环境：用于本地开发或测试环境中快速搭建前端服务
• 生产环境部署：可配合反向代理、负载均衡等组件，部署至生产环境提供稳定服务

使用方法和配置说明

基本部署（Docker Run）

bash
docker run -d \
  --name opnform-frontend \
  -p 3000:3000 \
  -e API_URL=http://backend-api:8000 \
  opnform/frontend:latest

参数说明：

• -p 3000:3000：映射容器3000端口到主机3000端口（Nuxt默认端口）
• -e API_URL：指定后端API服务地址，需替换为实际的OpnForm后端接口地址

Docker Compose配置示例

yaml
version: '3'
services:
  frontend:
    image: opnform/frontend:latest
    container_name: opnform-frontend
    ports:
      - "3000:3000"
    environment:
      - API_URL=http://backend:8000  # 后端服务地址（需与后端服务名称对应）
    depends_on:
      - backend  # 依赖后端服务启动
    restart: unless-stopped

环境变量配置

注意事项

1. 确保后端API服务（OpnForm后端）已部署并可访问，API_URL需正确指向后端接口地址
2. 生产环境建议配合Nginx等反向代理使用，配置HTTPS并优化静态资源缓存
3. 如需自定义前端配置，可通过挂载配置文件或设置额外环境变量实现

版本信息

• 基础框架：Nuxt.js
• 基础镜像：Node.js（具体版本以镜像标签为准）