sync: 添加Next.js allowedDevOrigins配置说明,更新HMR降级策略

- 新增allowedDevOrigins配置说明,支持外网域名HMR热重载
- 更新HMR降级策略为备选方案,优先使用next dev开发体验更好
- 适配Next.js 15+的新特性
This commit is contained in:
yourname
2026-04-12 02:31:23 +00:00
parent e10fd0e8b0
commit 6031c689de
2 changed files with 108 additions and 10 deletions

View File

@@ -66,7 +66,11 @@
}
```
- 标记Epic 0 完成后此文件才可生效(项目目录需先存在)
- ⛔ **HMR 降级策略**:外网域名 E2E 测试/旅程验证时,如果 HMR WebSocket 失败(控制台 `webpack-hmr` 错误),必须切换到生产模式:
- ⛔ **HMR 降级策略(备选)**:配置了 `allowedDevOrigins` 后,外网域名的 HMR 通常可以正常工作。仅在以下情况下降级到生产模式:
- 配置了 `allowedDevOrigins` 后 HMR 仍失败
- 需要最大化测试稳定性(生产模式无 HMR 干扰)
降级步骤(`next start` 替代 `next dev`
```bash
npx next build
pm2 stop app && pm2 delete app
@@ -188,7 +192,33 @@
- 此步骤创建的 .env.local 不应提交到 git应在 .gitignore 中排除)
- 更新 pipeline-context.md 记录注入状态
4.8. **MinIO 外网地址注入(⛔ 强制)**
4.8. **Next.js allowedDevOrigins 配置(⛔ 外网域名访问时强制)**
当通过外网域名(如 `*.dev.d8d.fun`)访问 Next.js 开发服务器时,必须在 `next.config.ts` 中配置 `allowedDevOrigins`,否则会出现 "Invalid Host header" 错误。
**配置示例**
```typescript
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
allowedDevOrigins: [
"*.dev.d8d.fun",
"localhost",
],
};
export default nextConfig;
```
**配置后重启服务**
```bash
pm2 restart vividspark
```
详见 `./reference/platform-nextjs.md` §10
4.9. **MinIO 外网地址注入(⛔ 强制)**
检测容器环境变量 `MINIO_HOST`,将外网地址注入到 `.env` 中的 `S3_PUBLIC_URL`

View File

@@ -231,11 +231,19 @@ NPM 代理主机默认配置会阻断 WebSocket导致
`get_proxy_host` 确认:`block_exploits: false` + `allow_websocket_upgrade: true`
### §7.1 HMR 降级策略(⛔ E2E 测试/旅程验证时强制
### §7.1 HMR 降级策略(备选方案
#### 前置条件
配置了 `allowedDevOrigins` 后,外网域名的 HMR 通常可以正常工作,**不再需要降级到 `next start`**。
仅在以下情况下考虑降级:
- 配置了 `allowedDevOrigins` 后 HMR 仍失败
- 需要最大化测试稳定性(生产模式无 HMR 干扰)
#### 问题描述
即使 NPM 代理已正确配置(`block_exploits: false` + `allow_websocket_upgrade: true`
即使 NPM 代理已正确配置(`block_exploits: false` + `allow_websocket_upgrade: true`且已配置 `allowedDevOrigins`
通过外网域名访问 `next dev` 时 HMR WebSocket 仍可能失败(握手阶段 Invalid status line
这导致:
- 浏览器控制台持续 `WebSocket connection to 'ws://.../_next/webpack-hmr' failed: Error during WebSocket handshake`
@@ -246,10 +254,9 @@ NPM 代理主机默认配置会阻断 WebSocket导致
#### 检测条件
满足以下条件时触发降级:
1. 浏览器控制台出现 HMR WebSocket 连接失败错误
2. NPM 代理已正确配置(`allow_websocket_upgrade: true`
3. 正在执行 E2E 测试或旅程验证
满足以下条件时考虑降级:
1. 已配置 `allowedDevOrigins` 但 HMR WebSocket 连接失败
2. 正在执行 E2E 测试或旅程验证,且 HMR 干扰测试稳定性
#### 降级步骤
@@ -276,8 +283,8 @@ pm2 start "npx next dev --port 3001" --name app
#### 注意事项
- **代码修改后需重新 build**:生产模式下修改源码不会自动生效,必须 `next build` 后重启
- **E2E/旅程验证优先用 `next start`**:避免 HMR 干扰测试稳定性
- **开发调试用 `next dev`**:需要热重载时使用,通过 localhost 访问可避免 HMR 问题
- **开发调试优先用 `next dev`**:通过外网域名访问需配置 `allowedDevOrigins`,可获得热重载体验
- **仅在必要时用 `next start`**:当 HMR 干扰测试稳定性或配置 `allowedDevOrigins` 后仍失败时使用
---
@@ -364,3 +371,64 @@ MinIO bucket 默认私有,所有通过 URL 直接访问的资源(图片、
browser_network_requests(static=true, filter="\\.(jpg|jpeg|png|gif|webp|svg|mp4|webm)$")
# 状态码 403/404 → 资源不可访问 → AUTO-FIX
```
---
## 10. allowedDevOrigins 配置(⛔ 外网域名访问时强制)
### 问题描述
Next.js 15+ 引入了 `allowedDevOrigins` 配置项,用于指定开发服务器允许的 origin。
当通过外网域名(如 `*.dev.d8d.fun`)访问 `next dev` 开发服务器时,如果未配置 `allowedDevOrigins`,会出现以下错误:
- 浏览器页面显示 "Invalid Host header"
- HMR WebSocket 连接失败
### 配置方法
在 `next.config.ts`(或 `next.config.js`)中添加 `allowedDevOrigins`
```typescript
// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
allowedDevOrigins: [
"*.dev.d8d.fun", // 允许所有 dev.d8d.fun 子域名
"localhost", // 允许 localhost
],
// 其他配置...
};
export default nextConfig;
```
### 配置后重启服务
修改配置后必须重启 Next.js 开发服务器:
```bash
# 如果使用 pm2
pm2 restart vividspark
# 或直接重启
pm2 stop vividspark && pm2 delete vividspark
pm2 start "pnpm dev" --name vividspark
```
### 验证配置
1. 重启服务后,通过外网域名访问(如 `https://admin-custom-xxx.dev.d8d.fun`
2. 确认页面正常加载,不再出现 "Invalid Host header" 错误
3. 打开浏览器控制台,确认 HMR WebSocket 连接成功(无 `webpack-hmr` 错误)
### 与 HMR 降级策略的关系
配置了 `allowedDevOrigins` 后,外网域名的 HMR 通常可以正常工作,**不再需要降级到 `next start`**。
仅在以下情况下考虑降级:
- 配置了 `allowedDevOrigins` 后 HMR 仍失败
- 需要最大化测试稳定性(生产模式无 HMR 干扰)
详见 §7.1