如何在DDEV中实现Radicle(Sage)的HMR及Bud Live Reload功能？

针对Radicle WordPress站点在DDEV中无法通过Bud实现带HTTPS和正确URL的Live Reload问题，按以下步骤配置：

1. 配置DDEV端口映射 #

编辑项目根目录下的 .ddev/config.yaml，添加additional_ports配置，将Bud的开发服务器端口（默认3000）映射到外部HTTPS端口（示例用3001）：

additional_ports:
  - name: bud-live-reload
    container_port: 3000
    http_port: 3000
    https_port: 3001

执行 ddev restart 让配置生效，可通过 ddev describe 确认端口已正确暴露。

2. 调整Bud配置适配DDEV HTTPS环境 #

在Bud的配置文件（如bud.config.js）中，指定DDEV站点的HTTPS地址、加载DDEV证书，并配置Live Reload的WebSocket参数：

export default async bud => {
  bud
    // 设置站点的HTTPS地址
    .setUrl('https://your-project.ddev.site')
    .setProxyUrl('https://your-project.ddev.site')
    .setPublicPath('/')
    .devServer({
      // 加载DDEV容器内的HTTPS证书
      https: {
        key: bud.path('/var/www/html/.dev/tls/your-project.ddev.site-key.pem'),
        cert: bud.path('/var/www/html/.dev/tls/your-project.ddev.site.crt'),
      },
      // 允许容器外部访问
      host: '0.0.0.0',
      // 容器内Bud服务端口，对应config.yaml中的container_port
      port: 3000,
      hot: true,
      liveReload: true,
      // 配置Live Reload的WebSocket连接参数
      client: {
        webSocketURL: {
          hostname: 'your-project.ddev.site',
          port: 3001, // 对应config.yaml中的https_port
          protocol: 'wss',
        },
      },
    });
};

注意替换your-project.ddev.site为你的DDEV站点域名。

3. 启动并验证 #

• 进入容器启动Bud开发服务：ddev exec npm run dev（或对应启动命令，如bud dev）
• 访问DDEV的HTTPS站点，打开浏览器控制台，确认WebSocket连接无报错（可搜索websocket相关日志）
• 修改主题的CSS/JS文件，检查页面是否自动刷新

常见排查点 #

• 若WebSocket连接失败：确认webSocketURL的hostname、port、protocol与DDEV配置完全匹配
• 检查容器内端口占用：ddev exec lsof -i :3000，确保无其他进程占用Bud端口
• 确认DDEV证书路径正确：容器内证书存放在/var/www/html/.dev/tls/，对应项目根目录.ddev/tls/

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