ouorz-mono

<div align="center"> <h1>OUORZ-MONO</h1> <p>为 <a href="https://www.ouorz.com" target="_blank">www.ouorz.com</a> 和其他相关项目提供支持的前端代码和Docker镜像</p> <a href="https://github.com/ttttonyhe/ouorz-mono"> <img src="https://github.com/ttttonyhe/ouorz-mono/workflows/Tests/badge.svg?branch=main" alt="构建状态"> </a> <a href="https://github.com/ttttonyhe/ouorz-mono"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/c4373de0-0b03-4ed0-8e06-2f57d4758076.svg" alt="许可证"> </a> </div> <br/>

<br/> <hr/>

主应用

过往迭代

• Antony-Nuxt (Nuxt.js / Vue.js v2) https://github.com/ttttonyhe/antony-nuxt →
• Antony (Vue.js v2) https://github.com/ttttonyhe/antony →
• Tony (Vue.js v2 / PHP) https://github.com/ttttonyhe/tony →

<br/>

主要特性

• SSR/SSG/按需ISR
• 命令面板
• Redux + Redux Saga 状态管理
• Nexment 评论系统
• 动态目录侧边栏
• 个人仪表板
• 深色模式

<br/>

技术栈概述

极其主观，完全过度设计。

• TypeScript
• 框架
  • React (Next.js)
  • 基础/适配器实现 即将推出
  • Storybook
  • Turborepo
• 数据获取
  • swr
    • 无限加载
    • 重新验证
    • Suspense
  • fetch (API 路由)
• 状态管理
  • Redux Toolkit
  • Redux Saga
• 样式：
  • styled-components
  • Tailwind CSS
• 内容管理：
  • WordPress (七牛云 - 静态文件存储)
  • WP REST API (GraphQL实现即将推出)
  • 腾讯云 CVM (CentOS/Nginx/MySQL/PHP)
  • Nexment (LeanCloud)
  • 邮件订阅 (Buttondown)
• 错误日志 & Web性能指标
  • Sentry
• 代码检查
  • ESLint
  • Prettier
  • CommitLint
• CI/CD
  • Github Actions
  • Vercel

<br/>

项目设置

git clone git@github.com:ttttonyhe/ouorz-mono.git
pnpm install
cd apps/main

创建一个包含您配置的 .env 文件，以下是本项目使用的环境变量列表：

• LeanCloud:
  • NEXT_PUBLIC_LC_KEY
  • NEXT_PUBLIC_LC_ID
• Buttondown:
  • NEXT_PUBLIC_BUTTONDOWN_TOKEN
• Sentry:
  • NEXT_PUBLIC_SENTRY_DSN
  • SENTRY_AUTH_TOKEN
  • SENTRY_PROJECT
  • SENTRY_ORG
• 按需ISR:
  • REVALIDATION_REQUEST_TOKEN

pnpm run dev:main

<br/> <hr/>

WordPress应用

警告

在Docker容器中运行WordPress在低配置机器上极其缓慢

推荐使用不含MySQL 8的>=1 GB RAM，或含MySQL 8的>=2 GB RAM

本项目基于官方WordPress Docker镜像打包成Docker容器：wordpress:php8.0-apache。

<br/>

静态镜像

每次构建都会输出一个静态Docker镜像（类似于典型的容器化应用），这意味着更新WordPress本身或添加新主题/插件需要重新部署。

<br/>

持久存储

所有上传内容都存储在外部存储（七牛云，类似于AWS S3）中，因此wp-content/uploads可以被视为临时数据。

<br/>

自定义主题

main应用使用WordPress REST API获取数据，wordpress应用作为无头CMS运行。主题peg用于自定义REST API端点的行为，因此在开发wordpress应用时，peg/functions.php应该是主要关注点。

<br/>

环境变量

• MySQL数据库:
  • WORDPRESS_DB_HOST
  • WORDPRESS_DB_NAME
  • WORDPRESS_DB_PASSWORD
  • WORDPRESS_DB_USER
  • WORDPRESS_TABLE_PREFIX
• 设置:
  • WORDPRESS_DEBUG

可选地，可以设置WORDPRESS_CONFIG_EXTRA以包含其他配置：

• MySQL SSL连接:
  • define("MYSQL_CLIENT_FLAGS", MYSQLI_CLIENT_SSL);
• 关闭PHP警告和通知:
  • ini_set("error_reporting", E_ALL & ~E_NOTICE);
  • ini_set("display_errors","Off")
• Redis对象缓存:
  • define("WP_REDIS_HOST", "redis_database_host");
  • define("WP_REDIS_PASSWORD", "redis_database_pwd");"
  • define("WP_REDIS_PORT", "redis_database_port")

<br/>

本地开发

docker build --tag ouorz-wordpress .
docker run -p 8080:80 \
-e WORDPRESS_DB_HOST=[dev_database_host] \
-e WORDPRESS_DB_USER=[dev_database_user] \
-e WORDPRESS_DB_PASSWORD=[dev_database_pwd] \
-e WORDPRESS_DB_NAME=[dev_database_name] \
-e WORDPRESS_DEBUG=true \
-e WORDPRESS_CONFIG_EXTRA="define('MYSQL_CLIENT_FLAGS', MYSQLI_CLIENT_SSL);" \
-e WORDPRESS_TABLE_PREFIX=[dev_database_prefix] \
ouorz-wordpress

<br/> <hr/>

分析应用

本项目基于Umami

地理位置数据访问

按照此处 →的说明注册Maxmind GeoLite2，并获取许可证密钥

<br/>

项目设置

git clone git@github.com:ttttonyhe/ouorz-mono.git
pnpm install
cd apps/analytics

创建一个包含您配置的 .env 文件，以下是本项目使用的环境变量列表：

• DATABASE_URL
• HASH_SALT
• MAXMIND_LICENSE_KEY

pnpm --filter @ouorz/analytics run build-postgresql-client
pnpm run dev:analytics

<br/> <hr/>

Twilight工具包

一个极其主观的前端工具包库

UI

Storybook: https://ui.twilight-toolkit.ouorz.com → 目前仅在 React 中可用，Foundation/Adaptor 实现即将推出。

<br/>

实用工具

正在开发中

<br/> <hr/>

单体仓库

工具

构建系统：使用远程缓存的 Turborepo

单体仓库管理器：PNpm

<br/>

实践

运行脚本

• 使用项目别名可以更轻松地在不同包中运行命令：

  pnpm --filter @ouorz/main run upgrade

• 当需要内容感知（即缓存）时，使用预定义的 Turborepo 脚本：

  pnpm run build:main

管理依赖

• 根目录的 package.json 应只包含开发依赖

正在完善中

<br/>

统计数据

<br/> <hr/>

开发

Git 工作流

其实并没有严格遵循这个流程...

<br/>

端到端测试

测试运行器：Cypress

启动服务器：

pnpm run build:main
pnpm run start:main

# 或者
cd apps/main
pnpm run dev:test

运行测试：

pnpm run test:main

apps/main 使用 Cypress 仪表板，如需禁用请相应修改配置文件。

<br/> <hr/>

部署

apps/wordpress

构建然后通过 apps/wordpress/Dockerfile 部署 Docker 镜像。

注意：默认情况下，镜像监听 80 端口，而不是更常见的 8080 端口

<br/>

apps/main

该项目结合了服务器端渲染（SSR）和（按需）增量静态生成（ISG）：

pnpm run build:main
pnpm run start:main

<br/>

apps/analytics

pnpm run build:analytics
pnpm run start:analytics

<br/>

packages/twilight-ui

要部署 storybook，将其导出为静态网页应用：

pnpm run build:twilight:ui:storybook

<br/>

使用 Fly.io 部署

配置文件 fly.toml 位于 apps/wordpress 下。持久存储应挂载到 /var/www/html/wp-content。

fly launch

fly secrets set \
WORDPRESS_DB_HOST=[dev_database_host] \
WORDPRESS_DB_USER=[dev_database_user] \
WORDPRESS_DB_PASSWORD=[dev_database_pwd] \
WORDPRESS_DB_NAME=[dev_database_name] \
WORDPRESS_DEBUG=false \
WORDPRESS_TABLE_PREFIX=[dev_database_prefix] \

fly deploy

可选择在多个 Fly.io 区域创建同名卷，这样 Fly 就可以在多个区域运行一个或多个应用实例：

fly volumes create ouorz_wordpress_wp_content --region yyz --size 1 --no-encryption
fly volumes create ouorz_wordpress_wp_content --region fra --size 1 --no-encryption
fly volumes create ouorz_wordpress_wp_content --region hkg --size 1 --no-encryption

fly scale count 3

可选择使用 Fly.io 提供的全托管 Redis 数据库，可通过以下命令创建：

fly redis create

流量会自动通过受限于您 Fly 组织的私有 IPv6 地址进行路由。

<br/>

使用 Vercel / Netlify 部署

确保将根目录路径设置为 apps/<project-name>，然后将构建命令更新为：

cd ../.. && pnpm run build:<project-name>

<br/>

强烈建议启用基于差异的部署：

git diff --quiet HEAD^ HEAD ./

<br/>

许可证

GPL-3.0