DDEV部署Craft CMS+Vite时暴露端口出现Bad Gateway问题求助

核心排查方向与解决方案 #

1. 确保Vite绑定所有网络接口 #

Vite默认仅绑定localhost，导致容器外部（包括Traefik路由）无法访问。可通过两种方式修改：

• 修改Vite配置文件（vite.config.ts/vite.config.js）：

export default defineConfig({
  server: {
    host: '0.0.0.0', // 绑定所有可用网络接口
    port: 5173,
    https: true // 与容器内使用的协议保持一致
  }
});

• 启动时添加参数：
  执行命令强制Vite监听所有接口：

ddev npm run dev -- --host 0.0.0.0

2. 修正DDEV端口转发的协议配置 #

默认情况下DDEV以HTTP协议转发请求，若Vite容器内使用HTTPS，需明确指定转发协议：
修改.ddev/config.yaml：

web_extra_exposed_ports:
  - name: craft-vite
    container_port: 5173
    http_port: 5172
    https_port: 5173
    protocol: https # 添加此行指定转发协议为HTTPS

3. 重启服务验证配置生效 #

执行以下命令确保DDEV和Vite加载新配置：

ddev restart
ddev npm run dev -- --host 0.0.0.0

4. 排查本地环境与浏览器问题 #

• 清除浏览器缓存或使用无痕模式访问，避免旧缓存导致请求异常；
• 检查macOS防火墙设置，确认5173端口未被阻止；
• 查看Vite服务日志，确认是否收到Traefik转发的请求，定位问题是转发环节还是Vite服务响应环节。

5. 额外验证步骤 #

若以上操作无效，可直接访问容器IP测试：

1. 获取Web容器IP：ddev exec ip addr show eth0 | grep inet
2. 在浏览器中访问https://<容器IP>:5173/src/app.ts，若能正常访问，说明问题出在Traefik路由配置，需重新检查DDEV端口暴露规则。

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