ddev web容器内运行webpack dev server主机访问报502错误

问题根因 #

你遇到的502错误核心是ddev反向代理与webpack dev server的协议不匹配，以及不必要的内部HTTPS配置导致代理握手失败。以下是可直接落地的解决方案：

步骤1：修改webpack.config.js配置 #

核心调整协议相关参数，适配ddev反向代理的转发规则：

devServer: {
          static: false,
          headers: {
              'Access-Control-Allow-Origin': '*',
          },
          hot: true,
          liveReload: false,
          compress: true,
          client: {
              webSocketURL: "auto://0.0.0.0:0/ws",
              logging: 'info',
              progress: true,
              overlay: {
                  warnings: false,
                  errors: true,
              },
          },
          magicHtml: false,
          host: '0.0.0.0',
          port: 8080,
          // 移除http2配置，ddev 1.18的反向代理不支持向后端转发HTTP2请求
          // http2: true,
          // 关闭内部HTTPS，SSL终止由ddev外层反向代理统一处理
          https: false,
          devMiddleware: {
              index: false,
              serverSideRender: true,
              publicPath: publicPath,
              writeToDisk: true,
          },
      }

步骤2：优化docker-compose配置（可选，不调整也可正常运行） #

你原有配置逻辑正确，可删除冗余的expose字段，端口暴露规则会由HTTP_EXPOSE/HTTPS_EXPOSE自动处理：

version: "3.6"
services:
  web:
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8080:8080
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,8081:8080

步骤3：重启生效并验证 #

1. 执行ddev restart让docker-compose配置生效
2. 执行ddev ssh进入web容器，运行npm run serve启动webpack dev server
3. 在容器内执行curl http://127.0.0.1:8080验证服务正常启动，能返回预期内容
4. 回到主机浏览器访问https://project.ddev.site.de:8081即可正常访问

额外可选方案（需要保留webpack HTTP2/HTTPS时使用） #

如果业务要求webpack必须开启HTTPS和HTTP2，不走ddev反向代理，可在docker-compose配置中直接映射端口：

version: "3.6"
services:
  web:
    ports:
      - 8081:8080

重启ddev后直接访问https://127.0.0.1:8081即可，此时证书使用你自行生成的mkcert证书。

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