EC2实例生产模式（pnpm run build/start）下实时预览功能异常求助

系统配置 #

二进制环境 #

• Node: 20.9.0
• npm: 10.1.0
• Yarn: 未安装（N/A）
• pnpm: 9.9.0

核心依赖包 #

所有Payload相关依赖均为 3.0.0-beta.98，Next.js为 15.0.0-canary.104，React/ReactDOM为 19.0.0-rc-06d0b89e-20240801

操作系统 #

• 平台: Linux x64
• 版本: #15-Ubuntu SMP Thu Aug 8 19:13:06 UTC 2024
• 可用内存: 7939MB
• CPU核心数: 2
• AMI: ubuntu/images/hvm-ssd-gp3/ubuntu-noble-24.04-amd64-server-20240801

项目设置 #

通过 create-payload-app@beta 网站模板创建项目，仅修改Payload必要配置。本地用Docker运行MongoDB，EC2上MongoDB与Payload/Next.js同节点部署。

问题现象 #

实时预览仅在**EC2生产模式（pnpm run build/start）**下失效，其他场景均正常：

• ✅ 本地 pnpm run dev
• ✅ 本地 pnpm run build/start
• ✅ EC2 pnpm run dev
• ❌ EC2 pnpm run build/start：预览内容无法更新，应用其余功能正常

已尝试排查步骤 #

• 调整Apache反向代理配置（移除后重新配置）
• 验证环境变量：仅URL与本地不同（本地用localhost，EC2用弹性公网IP）
• 检查EC2安全组：已开放HTTP/HTTPS及相关端口
• 查看服务器日志：无明显错误，应用启动正常且可通过IP访问
• 尝试用iptables替代Nginx/Apache，问题未解决

关键配置 #

环境变量 #

# Database connection string
DATABASE_URI=mongodb://xxxxxxx:xxxxxxx@localhost:27017
# Used to encrypt JWT tokens
PAYLOAD_SECRET=xxxxxxxxxxxxxxxxxxxx
# Used to format links and URLs
PAYLOAD_PUBLIC_SERVER_URL=http://3.78.42.108
NEXT_PUBLIC_SERVER_URL=http://3.78.42.108
# Used for CORS and CSRF protection
PAYLOAD_PUBLIC_DOMAIN_1=http://3.78.42.108
PAYLOAD_PUBLIC_DOMAIN_2=http://3.78.42.108:3000

Apache虚拟主机配置 #

<VirtualHost *:80>
    ServerName 3.78.42.108
    ServerAdmin webmaster@localhost

    # Forward all requests to the Next.js application via the public IP
    ProxyPass "/" "http://3.78.42.108:3000/"
    ProxyPassReverse "/" "http://3.78.42.108:3000/"

    # Static files
    Alias /_next/static/ /home/ubuntu/fhm-xmas-24/.next/static/
    <Directory /home/ubuntu/fhm-xmas-24/.next/static/>
        Require all granted
        ExpiresActive Off
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </Directory>

    Alias /public/ /home/ubuntu/fhm-xmas-24/public/
    <Directory /home/ubuntu/fhm-xmas-24/public/>
        Require all granted
        ExpiresActive Off
        Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

疑问 #

为何EC2生产模式下实时预览失效？Payload与Next.js生产/开发模式的运行差异是否是诱因？

排查方向与解决方案 #

1. 修复Apache的WebSocket代理配置
   Payload实时预览依赖WebSocket实现内容推送，当前Apache配置未处理WebSocket升级请求，导致生产模式下连接失败：

• 启用Apache proxy_wstunnel 模块：

  sudo a2enmod proxy_wstunnel
  sudo systemctl restart apache2
  

• 在VirtualHost配置中添加WebSocket代理规则：

  # 处理Payload预览的WebSocket连接
  ProxyPass /_payload/preview/ws ws://3.78.42.108:3000/_payload/preview/ws
  ProxyPassReverse /_payload/preview/ws ws://3.78.42.108:3000/_payload/preview/ws
  

2. 防止生产构建移除预览逻辑
   Payload 3.x beta与Next.js 15预览版的生产构建可能触发代码树摇，移除预览相关代码。在 next.config.ts 中明确开启预览支持：

export default defineNextConfig({
  experimental: {
    livePreview: true,
  },
})

3. 验证EC2本地跨端口访问权限
   生产模式下Payload可能通过localhost调用预览接口，检查Node进程是否能访问 http://localhost:3000/_payload/preview，可通过curl命令验证：

curl http://localhost:3000/_payload/preview

若访问失败，检查iptables或本地防火墙是否限制了3000端口的本地访问。

4. 查看浏览器控制台的WebSocket日志
   打开浏览器开发者工具→Network→WebSocket，检查预览相关的WebSocket连接状态，是否存在连接超时、403/404错误，这是定位问题的直接依据。

5. 确认Payload预览配置的生产适配
   检查 payload.config.ts 中预览配置，确保生产模式下未禁用，且URL指向正确：

export default buildConfig({
  livePreview: {
    enabled: true,
    previewURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  },
})

内容的提问来源于stack exchange，提问作者TurboPolyp