unocha/reports-site

reports.unocha.org 镜像文档

镜像概述

本镜像用于部署UN OCHA（联合国人道主义事务协调厅）的数字情况报告网站。该网站采用Vue+Nuxt技术栈，实现了SSR+Hydration架构，既能提供完整的HTML响应，又能利用现代JS工具实现客户端交互。内容管理基于Contentful CMS，将数据录入职责委托给专业服务。

核心功能与特性

• SSR+Hydration架构：结合服务端渲染与客户端水合，兼顾首屏加载速度与交互体验
• Contentful CMS集成：通过Contentful管理所有网站内容，支持内容动态更新
• 多环境支持：提供开发环境与生产环境配置，支持Contentful预览环境
• Docker化部署：完整支持Docker及docker-compose部署，确保环境一致性
• E2E测试：支持针对不同环境（本地/生产）的端到端测试
• Google Analytics集成：内置GA事件跟踪功能，支持自定义事件上报

使用场景

适用于UN OCHA数字情况报告的发布、管理与展示，特别适合需要兼顾内容动态更新与用户交互体验的官方报告网站。

使用方法与配置说明

Docker部署

首次构建与启动

bash
# 构建Docker镜像
docker-compose build

# 启动服务并查看日志
docker-compose up

# 后台运行服务（不显示实时日志）
docker-compose up -d

Contentful配置

所有网站内容存储在Contentful，需配置以下参数：

1. 获取Contentful的Space ID和Content Delivery API密钥
2. 在项目根目录创建.env文件，添加以下配置：

bash
CTF_SPACE_ID=0123456789ab  # 替换为实际Space ID
CTF_ENVIRONMENT=master      # 环境名称，通常为master
CTF_CDA_ACCESS_TOKEN=0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijkl  # 替换为实际API密钥

3. Docker构建过程会自动将.env文件内容复制到.contentful.json

Contentful预览环境配置

当同时设置CTF_HOST和CTF_CDA_PREVIEW_TOKEN环境变量时，系统将启用预览模式，实时显示未发布的内容编辑：

bash
CTF_HOST=preview.contentful.com  # 预览环境API地址
CTF_CDA_PREVIEW_TOKEN=your_preview_token  # 预览环境API密钥

开发环境设置（Nuxt）

如需本地开发，可直接使用Nuxt开发模式：

bash
# 安装依赖
npm install

# 启动本地开发服务器（热重载，地址：localhost:3000）
npm run dev

注意：开发模式仅用于功能开发，最终部署必须通过Docker确保环境一致性。提交PR前需使用Docker重新构建并测试。

E2E测试

环境配置

测试环境配置位于_tests/env目录，默认提供local（本地）和production（生产）两种环境。可通过修改_tests/env/index.js中的导入语句切换测试环境。

运行测试

bash
# 安装测试依赖（需在主机执行）
yarn install

# 并行运行所有测试
yarn run test

# 运行指定测试文件
yarn run test _tests/homepage.test.js

Google Analytics集成

在components/_Global.vue中提供ga属性，任何使用_Global作为mixin的组件或页面可通过this.ga.send()发送GA事件：

js
// 事件格式：类别（大写）、操作、标签、值
this.ga.send('event', 'Category', 'Action', 'Label', myValue);

若GA函数未加载，系统会自动模拟该函数并输出调试信息，避免错误： ga.send() not found, but we would have sent: event category action label [myValue]

技术参考

• https://github.com/nuxt/nuxt.js
• Contentful开发文档
• SSR+Hydration架构说明