xavierh/cwackerfuss-react-wordle

React Wordle Docker 镜像文档

镜像概述

React Wordle 是一个广受欢迎的猜词游戏（Wordle）的开源克隆项目。该 Docker 镜像基于 React、TypeScript 和 Tailwind CSS 构建，为开发者提供了一个开箱即用的容器化部署方案。通过此镜像，您可以快速在本地或云端部署自己的 Wordle 游戏实例，并支持高度的自定义与二次开发。

核心功能和特性

• 多环境支持：提供开发（Development）和生产（Production）两种 Docker 构建目标，满足不同阶段的部署与调试需求。
• 高度可定制：支持自定义单词长度（包括固定长度和每日可变长度）、多语言适配以及界面主题修改。
• 数据分析集成：内置对 Google Analytics 和 Plausible Analytics 的支持，方便进行用户行为与流量追踪。
• 现代化技术栈：基于 React、TypeScript 和 Tailwind CSS 构建，代码结构清晰，组件化程度高。

使用场景和适用范围

• 个人娱乐与学习：部署个人的猜词游戏网站，或作为学习 React 和 TypeScript 的前端实践项目。
• 多语言/本地化游戏：通过替换词库和界面文本，快速构建特定语言（如中文、日语、西班牙语等）或特定方言的猜词游戏。
• 垂直领域定制：将词库替换为特定领域的词汇（如医学、***、编程、电影、动漫等），打造垂直领域的趣味猜词应用。
• 企业内部活动：部署定制版游戏用于企业内部的文化建设、团建活动或品牌营销。

使用方法和配置说明

1. 快速部署（使用 Docker）

开发环境部署

开发环境适用于本地调试和二次开发，默认监听 3000 端口。

bash
# 构建开发环境镜像
docker build -t reactle:dev -f docker/Dockerfile .

# 运行开发环境容器
docker run -d -p 3000:3000 --name reactle-dev reactle:dev

部署完成后，在浏览器中访问 http://localhost:3000。

生产环境部署

生产环境经过构建优化，适用于正式对外提供服务，容器内部默认监听 8080 端口。

bash
# 构建生产环境镜像
docker build --target=prod -t reactle:prod -f docker/Dockerfile .

# 运行生产环境容器（将宿主机的 80 端口映射到容器的 8080 端口）
docker run -d -p 80:8080 --name reactle-prod reactle:prod

部署完成后，在浏览器中访问 http://localhost（或您配置的域名/IP）。

2. Docker Compose 部署示例

如果您更喜欢使用 Docker Compose 进行编排，可以参考以下 docker-compose.yml 配置：

yaml
version: '3.8'

services:
  react-wordle-prod:
    build:
      context: .
      dockerfile: docker/Dockerfile
      target: prod
    image: reactle:prod
    container_name: reactle-prod
    ports:
      - "80:8080"
    restart: unless-stopped

运行命令：

bash
docker-compose up -d --build

3. 环境变量与配置参数

项目支持通过 .env 文件配置环境变量，以启用特定功能或进行本地化设置。在构建镜像前，请确保在项目根目录配置好 .env 文件。

注意：启用数据追踪时，请确保遵守您所在地区关于用户隐私和数据收集的**（如 GDPR），必要时需自行在代码中实现用户同意授权机制。*

4. 高级自定义指南

修改猜测单词长度

默认配置为 5 个字母的单词。若需修改：

• 固定长度：更新 src/constants/wordlist.ts 中的 WORDS 数组和 src/constants/validGuesses.ts 中的 VALID_GUESSES 数组，仅保留目标长度的单词。
• 可变长度：在上述两个数组中包含所需的不同长度的单词。系统会根据目标词的长度自动验证猜测词的有效性。

多语言与本地化适配

若要创建其他语言版本，需进行以下修改：

1. 在 .env 中更新标题、描述及 REACT_APP_LOCALE_STRING。
2. 修改 public/index.html 中的提示信息、HTML lang 属性（若为从右向左书写的语言，需添加 dir="rtl"）。
3. 更新 public/manifest.json 中的应用名称。
4. 替换 src/constants/strings.ts 中的界面文本。
5. 替换 wordlist.ts 和 validGuesses.ts 中的英文词库为目标语言词库。
6. 更新设置、信息、统计迁移等弹窗组件中的文本。
7. 若目标语言包含英语中没有的字母，需更新 src/components/keyboard/Keyboard.tsx 中的键盘布局。

确保统计数据迁移的安全性

如果您修改了应用并打算发布，建议在 src/constants/settings.ts 中更新 Blowfish 加密密钥和初始化向量（使用随机的 30 字符和 8 字符字符串），以确保迁移代码在您的应用中是唯一且安全的。