Skip to content

Repository files navigation

活动网站解决方案

MMGC Project 是面向活动官网、投稿展示、视频资源分发和后台运营管理的一套活动网站解决方案。项目以 mirai-mad.com 为主站入口,同时兼顾国内访问、海外访问、视频与静态资源 CDN 分发、API 源站直连和 Admin 后台管理。

当前仓库采用 pnpm workspace 管理,包含前台站点、服务端 API、旧 Admin 后台和新 Admin 模板预留目录。

线上域名与部署链路

访问入口

域名 用途 说明
mirai-mad.com 主站入口 国内用户优先走七牛云 CDN;海外用户由源站按 IP 判断后切换到 global.mirai-mad.com
global.mirai-mad.com 海外主站 接入 Cloudflare,缓存未命中时回源到七牛云,再到雅加达前端源站
assets.mirai-mad.com 国内视频与静态资源 接入七牛云 CDN,最终回源到 KODO 对象存储
assets-global.mirai-mad.com 海外视频与静态资源 接入 Cloudflare,缓存未命中访问七牛云 CDN,再回源到对象存储源站
API 源站 所有接口 前台、海外前台和 Admin 的 API 请求都直接访问源站

xx.xx.xx 表示当前主站源站 IP 占位,实际部署时以服务器配置为准。

国内链路

flowchart LR
  user_cn["国内用户"]
  main_domain["mirai-mad.com"]
  qiniu_main["七牛云 CDN<br/>主站加速"]
  origin["源站<br/>xx.xx.xx"]

  asset_domain["assets.mirai-mad.com"]
  qiniu_asset["七牛云 CDN<br/>资源加速"]
  kodo["KODO 对象存储<br/>视频/图片/静态资源"]

  api["API 源站<br/>/mmgcApi"]

  user_cn --> main_domain --> qiniu_main --> origin
  user_cn --> asset_domain --> qiniu_asset --> kodo
  main_domain -. "接口请求直连" .-> api
Loading

国内用户访问 mirai-mad.com 时,页面访问链路经过七牛云 CDN 到源站。视频、图片和静态资源访问 assets.mirai-mad.com,由七牛云 CDN 加速,最终回源到 KODO 对象存储。所有 API 请求不走静态资源 CDN,直接访问 API 源站。

海外链路

flowchart LR
  user_global["海外用户"]
  main_domain["mirai-mad.com"]
  origin_judge["源站<br/>IP 地域判断"]
  global_domain["global.mirai-mad.com"]
  cf_main["Cloudflare<br/>主站缓存"]
  qiniu_global_main["七牛云 CDN<br/>海外主站回源层"]
  jakarta_frontend["雅加达前端源站"]

  asset_global["assets-global.mirai-mad.com"]
  cf_asset["Cloudflare<br/>资源缓存"]
  qiniu_asset_global["七牛云 CDN<br/>海外资源回源层"]
  asset_origin["资源源站<br/>对象存储"]

  api["API 源站<br/>所有接口直连"]

  user_global --> main_domain --> origin_judge
  origin_judge -- "海外访问切换" --> global_domain
  global_domain --> cf_main
  cf_main -- "缓存命中" --> user_global
  cf_main -- "未命中" --> qiniu_global_main --> jakarta_frontend

  user_global --> asset_global --> cf_asset
  cf_asset -- "缓存命中" --> user_global
  cf_asset -- "未命中" --> qiniu_asset_global --> asset_origin

  global_domain -. "接口请求直连" .-> api
Loading

海外用户首次访问 mirai-mad.com 后,由源站根据 IP 地域判断切换到 global.mirai-mad.com。海外主站接入 Cloudflare,Cloudflare 无缓存时访问七牛云,再回源到雅加达前端。海外视频和静态资源统一放在 assets-global.mirai-mad.com,该域名先经过 Cloudflare,缓存未命中再访问七牛云 CDN,最终回源到资源源站。所有 API 仍然直接访问源站。

总体部署拓扑

flowchart TB
  subgraph users["访问用户"]
    cn["国内用户"]
    global["海外用户"]
    admin_user["运营/Admin 用户"]
  end

  subgraph domains["公网域名"]
    main["mirai-mad.com"]
    global_main["global.mirai-mad.com"]
    assets_cn["assets.mirai-mad.com"]
    assets_global["assets-global.mirai-mad.com"]
    admin_domain["Admin 入口"]
  end

  subgraph cdn["CDN 与边缘缓存"]
    qiniu_cn["七牛云 CDN<br/>国内主站/资源"]
    cf["Cloudflare<br/>海外主站/资源"]
    qiniu_global["七牛云 CDN<br/>海外回源层"]
  end

  subgraph origin["源站服务"]
    frontend["Frontend<br/>Nuxt 3 SSR"]
    jakarta["雅加达前端源站"]
    backend["Backend API<br/>Koa2 + TypeScript"]
    admin["Admin<br/>Vue 3 SPA"]
  end

  subgraph storage["数据与资源"]
    mongo["MongoDB"]
    redis["Redis"]
    kodo["KODO/对象存储"]
  end

  cn --> main --> qiniu_cn --> frontend
  cn --> assets_cn --> qiniu_cn --> kodo

  global --> main --> frontend
  frontend -- "海外 IP 切换" --> global_main
  global_main --> cf --> qiniu_global --> jakarta
  global --> assets_global --> cf --> qiniu_global --> kodo

  admin_user --> admin_domain --> admin
  frontend -. "API 直连" .-> backend
  jakarta -. "API 直连" .-> backend
  admin -. "API 直连" .-> backend
  backend --> mongo
  backend --> redis
  backend --> kodo
Loading

工程架构

flowchart LR
  subgraph repo["MMGC-Project Monorepo"]
    frontend["apps/frontend<br/>前台活动网站<br/>Nuxt 3 + Vue 3"]
    backend["apps/backend<br/>服务端 API<br/>Koa2 + TypeScript"]
    admin["apps/MMGCBACK<br/>旧 Admin 后台<br/>Vue 3 + Vben + Ant Design Vue"]
    admin_next["apps/admin-next<br/>新 Admin 模板<br/>React + Vite + Ant Design 5"]
  end

  subgraph capabilities["核心业务能力"]
    activity["活动管理"]
    submission["投稿与作品展示"]
    video["视频播放与资源分发"]
    member["成员与账号体系"]
    sponsor["赞助商管理"]
    dashboard["数据统计"]
  end

  frontend --> backend
  admin --> backend
  admin_next -. "迁移预留" .-> backend

  backend --> activity
  backend --> submission
  backend --> video
  backend --> member
  backend --> sponsor
  backend --> dashboard
Loading

前台站点:apps/frontend

前台站点负责活动官网展示、作品展示、视频播放、投稿入口、多语言页面和 SEO。技术栈以 Nuxt 3、Vue 3、Pinia、Element Plus、Varlet UI、UnoCSS 为主。

常用命令:

corepack pnpm --filter mirai-offcial-website run dev
corepack pnpm --filter mirai-offcial-website run dev:online
corepack pnpm --filter mirai-offcial-website run build

服务端:apps/backend

服务端提供统一 REST API,负责活动、作品、用户、投稿、评论、赞助商、统计、邮件、资源上传和第三方服务对接。技术栈以 Koa2、TypeScript、Mongoose、Redis、JWT、七牛云 SDK 为主。

常用命令:

corepack pnpm --filter mmgc_backend run dev
corepack pnpm --filter mmgc_backend run check-types
corepack pnpm --filter mmgc_backend run build

Admin 后台:apps/MMGCBACK

旧 Admin 是当前线上可用后台,负责运营侧的数据管理、活动管理、视频管理、投稿管理、表单配置、富文本编辑和数据看板。它基于 Vue 3、Vite、Vue Vben Admin、Ant Design Vue、ECharts 构建。

常用命令:

corepack pnpm --filter @mmgc/admin run dev
corepack pnpm --filter @mmgc/admin run dev:adminonline
corepack pnpm --filter @mmgc/admin run build

新 Admin 模板:apps/admin-next

apps/admin-next 是新后台模板预留目录,目标是用更低复杂度的 React + Vite + Ant Design 5 + TanStack Query 逐步替换旧后台的业务页面。新旧后台需要并行运行,优先迁移登录、Dashboard、视频管理、活动管理和投稿表单。

常用命令:

corepack pnpm --filter @mmgc/admin-next run dev
corepack pnpm --filter @mmgc/admin-next run build

项目结构

MMGC-Project/
├─ apps/
│  ├─ frontend/      # 前台活动网站,Nuxt 3 SSR
│  ├─ backend/       # 服务端 API,Koa2 + TypeScript
│  ├─ MMGCBACK/      # 当前线上 Admin 后台,Vue 3 SPA
│  └─ admin-next/    # 新 Admin 模板与迁移预留
├─ env/              # 环境变量模板与部署配置说明
├─ .github/          # GitHub Actions 工作流
├─ docker-compose.yml
├─ docker-compose.production.yml
├─ package.json
├─ pnpm-workspace.yaml
├─ pnpm-lock.yaml
└─ turbo.json

本地开发

环境要求

  • Node.js:与仓库脚本和部署环境保持一致
  • pnpm:pnpm@9.15.4
  • MongoDB
  • Redis

安装依赖

corepack enable
corepack pnpm install

启动所有工作区开发服务

corepack pnpm run dev

常用端口

服务 默认端口 说明
Frontend 3000 Nuxt 前台站点
Backend 8055 REST API,默认路径 /mmgcApi
Admin 8080 旧 Admin 后台
MongoDB 27017 数据库
Redis 6379 缓存

Docker 部署

docker compose up -d
docker compose logs -f

生产环境可叠加 production compose:

docker compose -f docker-compose.yml -f docker-compose.production.yml up -d

更完整的上线说明见:

验证命令

按改动范围选择运行:

corepack pnpm install --frozen-lockfile
corepack pnpm --filter mmgc_backend run build
corepack pnpm --filter mirai-offcial-website run build
corepack pnpm --filter @mmgc/admin run build
corepack pnpm --filter @mmgc/admin-next run build
corepack pnpm run build

Docker 相关改动可按需验证:

docker build -f apps/backend/Dockerfile -t mmgc-backend-test .
docker build -f apps/frontend/Dockerfile -t mmgc-frontend-test .
docker build -f apps/MMGCBACK/Dockerfile -t mmgc-admin-test .

不触发 Workflow 的 Push

当前 GitHub Actions 只在 master 分支 push 时触发部署。仅同步文档、TODO 或不希望触发部署时,优先推到非 master 分支:

git switch -c docs/update-deployment-guide
git push origin docs/update-deployment-guide

如果必须直接推 master,在提交信息中加入 GitHub Actions 支持的跳过标记:

git commit -m "docs: update deployment guide [skip ci]"
git push origin master

可用标记包括 [skip ci][ci skip][no ci][skip actions][actions skip]。不要使用 git push -o ci.skip,这是 GitLab 常见写法,不能作为 GitHub Actions 的跳过方式。

如果仓库启用了 required checks,被跳过的检查可能保持 Pending,PR 可能因此无法合并;这种情况下推一个不带跳过标记的新提交即可重新触发检查。

维护约定

  • 使用仓库声明的 pnpm@9.15.4
  • 新依赖必须同步更新根 pnpm-lock.yaml
  • 旧 Admin 位于 apps/MMGCBACK,短期仍作为线上后台,不要因新模板迁移破坏旧后台。
  • 新 Admin 位于 apps/admin-next,迁移时必须复用现有后端接口契约。
  • API 请求默认直连源站,静态资源和视频资源按国内、海外域名分别走 CDN 链路。

About

A turborepo based repo for MMGC event. Support AI translate in backstage, Support bilibili fetching feature.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages