zooproject/nuxt-client

Nuxt3极简启动器

参考Nuxt3文档了解更多信息。

镜像概述

zooproject/nuxt-client是与ZOO-Project-DRU实例交互的Nuxt3客户端应用，支持开发、构建及生产环境部署，可通过配置对接OIDC认证服务（如Keycloak）与后端服务。

核心功能

• 提供与ZOO-Project-DRU实例交互的前端界面
• 支持OIDC协议集成，实现用户认证与授权
• 兼容npm、pnpm、yarn、bun等多种包管理器
• 开发环境热更新，生产环境优化构建与预览

使用场景

• 作为ZOO-Project-DRU系统的前端客户端入口
• 开发基于Nuxt3的前端应用并对接后端服务
• 部署生产环境的Nuxt3前端应用

配置说明

在项目根目录创建.env文件，填写以下配置项：

bash
NUXT_OIDC_ISSUER = https://{keycloak服务器地址}/realms/{你的领域}
NUXT_OIDC_CLIENT_ID = {你的Nuxt客户端ID}
NUXT_OIDC_CLIENT_SECRET = {你的Nuxt客户端密钥}
NUXT_ZOO_BASEURL = http://{你的ZOO服务器地址}
NUXT_BASE_URL = http://{你的Nuxt服务器地址}
AUTH_ORIGIN = http://{你的Nuxt服务器地址}
NEXTAUTH_SECRET = {你的NextAuth密钥（可通过openssl rand -base64 32生成）}
# NODE_ENV = production # 生产环境时取消注释
NEXTAUTH_URL = http://{你的Nuxt服务器地址}

开发服务器

启动开发服务器（默认端口3000）：

bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev

生产构建

构建生产环境应用：

bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build

本地预览生产构建：

bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview

启动生产构建应用：

bash
# npm
npm run start
# pnpm
pnpm run start
# yarn
yarn start
# bun
bun run start

Docker部署示例

Docker Run命令

bash
docker run -d -p 3000:3000 \
  -e NUXT_OIDC_ISSUER=https://keycloak.example.com/realms/my-realm \
  -e NUXT_OIDC_CLIENT_ID=my-nuxt-client \
  -e NUXT_OIDC_CLIENT_SECRET=my-secret \
  -e NUXT_ZOO_BASEURL=http://zoo-server.example.com \
  -e NUXT_BASE_URL=http://nuxt-client.example.com \
  -e AUTH_ORIGIN=http://nuxt-client.example.com \
  -e NEXTAUTH_SECRET=$(openssl docker.xuanyuan.run/rand -base64 32) \
  -e NEXTAUTH_URL=http://nuxt-client.example.com \
  zooproject/nuxt-client

Docker Compose示例

yaml
version: '3.8'
services:
  nuxt-client:
    image: zooproject/nuxt-client
    ports:
      - "3000:3000"
    environment:
      NUXT_OIDC_ISSUER: "[***]"
      NUXT_OIDC_CLIENT_ID: "my-nuxt-client"
      NUXT_OIDC_CLIENT_SECRET: "my-secret"
      NUXT_ZOO_BASEURL: "[***]"
      NUXT_BASE_URL: "[***]"
      AUTH_ORIGIN: "[***]"
      NEXTAUTH_SECRET: "your-generated-secret"
      NEXTAUTH_URL: "[***]"
    restart: unless-stopped