Add centralized configuration system with environment-aware URLs (#2)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: tobenot

.env.example

@@ -0,0 +1,29 @@
+# 数据库配置
+DATABASE_URL="postgresql://username:password@localhost:5432/database_name"
+
+# JWT密钥
+JWT_SECRET="your-super-secret-jwt-key-here"
+
+# Resend邮件服务API密钥
+RESEND_API_KEY="your-resend-api-key-here"
+
+# 服务器配置
+PORT=3000
+HOST=localhost
+
+# 前端URL配置
+FRONTEND_LOCAL_URL="http://localhost:5174"
+FRONTEND_PRODUCTION_URL="https://tobenot.top/Basic-Web-Game/#/demo-with-backend"
+
+# 后端URL配置
+BACKEND_LOCAL_URL="http://localhost:3000"
+BACKEND_PRODUCTION_URL="https://api.tobenot.top"
+
+# 邮件配置
+EMAIL_FROM="noreply@sendmail.tobenot.top"
+
+# 环境配置
+NODE_ENV="development"
+
+# 兼容旧版本的PUBLIC_URL（可选）
+PUBLIC_URL="http://localhost:3000"

CONFIGURATION.md

@@ -0,0 +1,101 @@
+# 🔧 项目配置说明
+
+## 📋 环境变量配置
+
+本项目使用统一的环境变量配置系统，所有URL和配置都通过环境变量管理。
+
+### 🚀 快速开始
+
+1. 复制环境变量示例文件：
+```bash
+cp .env.example .env
+```
+
+2. 根据你的环境修改 `.env` 文件中的配置
+
+### 📝 配置项说明
+
+#### 服务器配置
+- `PORT`: 服务器端口（默认：3000）
+- `HOST`: 服务器主机（默认：localhost）
+
+#### 前端URL配置
+- `FRONTEND_LOCAL_URL`: 本地开发前端URL（默认：http://localhost:5174）
+- `FRONTEND_PRODUCTION_URL`: 生产环境前端URL（默认：https://tobenot.top/Basic-Web-Game/#/demo-with-backend）
+
+#### 后端URL配置
+- `BACKEND_LOCAL_URL`: 本地开发后端URL（默认：http://localhost:3000）
+- `BACKEND_PRODUCTION_URL`: 生产环境后端URL（默认：https://api.tobenot.top）
+
+#### 邮件配置
+- `EMAIL_FROM`: 邮件发送地址（默认：noreply@sendmail.tobenot.top）
+
+#### 数据库配置
+- `DATABASE_URL`: PostgreSQL数据库连接字符串
+
+#### 安全配置
+- `JWT_SECRET`: JWT签名密钥
+- `RESEND_API_KEY`: Resend邮件服务API密钥
+
+#### 环境配置
+- `NODE_ENV`: 运行环境（development/production）
+
+### 🔄 配置自动切换
+
+系统会根据 `NODE_ENV` 环境变量自动切换配置：
+
+- **开发环境** (`NODE_ENV=development`)：使用本地URL
+- **生产环境** (`NODE_ENV=production`)：使用生产URL
+
+### 🌐 CORS配置
+
+CORS允许的源会根据环境自动配置：
+- 开发环境：包含所有本地开发URL
+- 生产环境：包含生产环境URL
+
+### 📧 邮件链接
+
+邮件中的魔法链接会根据当前环境自动生成正确的URL。
+
+### 🔍 前端API调用
+
+前端会自动检测当前环境并调用正确的API地址：
+- 本地开发：`http://localhost:3000/api/trpc`
+- 生产环境：使用当前域名
+
+## 🛠️ 部署配置
+
+### 本地开发
+```bash
+# 使用默认配置启动
+npm run dev
+
+# 或指定环境变量
+NODE_ENV=development npm run dev
+```
+
+### 生产部署
+```bash
+# 设置生产环境
+NODE_ENV=production npm start
+```
+
+确保在生产环境中设置正确的环境变量：
+- `NODE_ENV=production`
+- `FRONTEND_PRODUCTION_URL`
+- `BACKEND_PRODUCTION_URL`
+- `EMAIL_FROM`
+
+## 📊 配置迁移
+
+### 从旧版本迁移
+
+如果你之前使用的是硬编码的URL，现在可以通过环境变量来配置：
+
+1. 创建 `.env` 文件
+2. 复制 `.env.example` 中的配置
+3. 根据你的环境修改相应的URL
+
+### 兼容性
+
+系统保持向后兼容，旧的 `PUBLIC_URL` 环境变量仍然可以使用。

src/config.ts

@@ -0,0 +1,60 @@
+// 环境变量配置
+export const config = {
+  // 服务器配置
+  server: {
+    port: process.env.PORT || 3000,
+    host: process.env.HOST || 'localhost',
+  },
+  
+  // 前端配置
+  frontend: {
+    // 本地开发前端URL
+    localDev: process.env.FRONTEND_LOCAL_URL || 'http://localhost:5174',
+    // 生产环境前端URL
+    production: process.env.FRONTEND_PRODUCTION_URL || 'https://tobenot.top/Basic-Web-Game/#/demo-with-backend',
+  },
+  
+  // 服务器URL配置
+  backend: {
+    // 本地开发服务器URL
+    localDev: process.env.BACKEND_LOCAL_URL || 'http://localhost:3000',
+    // 生产环境服务器URL
+    production: process.env.BACKEND_PRODUCTION_URL || 'https://api.tobenot.top',
+  },
+  
+  // 邮件配置
+  email: {
+    from: process.env.EMAIL_FROM || 'noreply@sendmail.tobenot.top',
+  },
+  
+  // 环境判断
+  isProduction: process.env.NODE_ENV === 'production',
+  
+  // 获取当前环境的前端URL
+  getFrontendUrl: () => {
+    return config.isProduction ? config.frontend.production : config.frontend.localDev;
+  },
+  
+  // 获取当前环境的服务器URL
+  getBackendUrl: () => {
+    return config.isProduction ? config.backend.production : config.backend.localDev;
+  },
+  
+  // 获取CORS允许的源
+  getCorsOrigins: () => {
+    const origins = [
+      config.frontend.localDev,
+      config.backend.localDev,
+      'http://localhost:5173', // 兼容其他可能的本地端口
+      'http://127.0.0.1:5173',
+      'http://127.0.0.1:5174',
+    ];
+    
+    if (config.isProduction) {
+      origins.push(config.frontend.production);
+      origins.push(config.backend.production);
+    }
+    
+    return origins;
+  }
+};

src/routers/auth.ts

@@ -6,6 +6,7 @@ import { randomBytes, createHash } from 'crypto';
 import * as jwt from 'jsonwebtoken';
 import * as fs from 'fs';
 import * as path from 'path';
+import { config } from '../config';
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
@@ -40,19 +41,19 @@ export const authRouter = router({
       });
 
       const inputForLink = { token: rawToken };
-      const magicLink = `${process.env.PUBLIC_URL}/test.html?token=${rawToken}`;
+      const magicLink = `${config.getBackendUrl()}/test.html?token=${rawToken}`;
 
       const emailHtml = emailTemplate.replace('{{magicLink}}', magicLink);
 
       // 在开发环境下，为了方便调试，同时在控制台打印出魔法链接
-      if (process.env.NODE_ENV !== 'production') {
+      if (!config.isProduction) {
         console.log(`✨ Magic Link for ${email}: ${magicLink}`);
       }
 
       // 真正发送邮件
       try {
         await resend.emails.send({
-          from: 'noreply@sendmail.tobenot.top',
+          from: config.email.from,
           to: email,
           subject: '登录到 YourApp',
           html: emailHtml,

src/server.ts

@@ -7,6 +7,7 @@ import { userRouter } from './routers/user';
 import { announcementRouter } from './routers/announcement';
 import { router } from './trpc';
 import { join } from 'path';
+import { config } from './config';
 
 // 1. 定义应用的主路由
 const appRouter = router({
@@ -34,7 +35,7 @@ export async function createContext({ req }: { req: any }) {
 // 3. 创建并配置 Fastify 服务器
 const server = fastify({ maxParamLength: 5000 });
 server.register(cors, {
-  origin: ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:3000', 'http://127.0.0.1:5173', 'http://127.0.0.1:5174', 'http://tobenot.top'],
+  origin: config.getCorsOrigins(),
   credentials: true
 });
 server.register(fastifyTRPCPlugin, {
@@ -58,10 +59,10 @@ server.register(require('@fastify/static'), {
 const start = async () => {
   console.log('🔍 Starting server...');
   try {
-    console.log('🔍 About to start listening on port 3000...');
-    await server.listen({ port: 3000 });
-    console.log('🚀 Server listening on http://localhost:3000');
-    console.log('📱 Test page available at http://localhost:3000/test.html');
+    console.log(`🔍 About to start listening on port ${config.server.port}...`);
+    await server.listen({ port: config.server.port, host: config.server.host });
+    console.log(`🚀 Server listening on ${config.getBackendUrl()}`);
+    console.log(`📱 Test page available at ${config.getBackendUrl()}/test.html`);
   } catch (err) {
     console.error('❌ Error starting server:', err);
     server.log.error(err);

test.html

@@ -242,7 +242,17 @@ <h1>登录成功！</h1>
     </div>
 
     <script>
-        const API_BASE = 'http://localhost:3000/api/trpc';
+        // 动态获取API基础URL
+        const getApiBase = () => {
+            // 如果是本地开发环境，使用localhost:3000
+            if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+                return 'http://localhost:3000/api/trpc';
+            }
+            // 生产环境，使用当前域名
+            return `${window.location.protocol}//${window.location.host}/api/trpc`;
+        };
+        
+        const API_BASE = getApiBase();
         let sessionToken = null;
 
         // 页面加载时检查 URL 参数，看是否是从邮件链接过来的