使用 nginx 代理 webpack

由于浏览器的跨域的限制，某些场景中可能需要将 webpack 开发服务器使用 Nginx 进行代理，以便使用域名进行访问。 在尝试了数次后，总结 Nginx 代理到 webpack server 的 webSocket 的方法。

webpack（v5.96.1） 关键配置：

devServer: {
    allowedHosts: 'all',
    devMiddleware: {},
    client: {
        progress: true, // 在浏览器中以百分比显示编译进度。
        logging: 'info',
        overlay: true,
        webSocketTransport: 'ws',
        webSocketURL: { // 关键配置
            hostname: '0.0.0.0',
            pathname: '/ws', // 尝试了很多次，好像只能用这个路径，没有深究。
            port: 0,
            protocol: 'ws',
        },
    },
    webSocketServer: 'ws',
    static: path.resolve(__dirname, 'dist'),
    port: 3010,
    host: '0.0.0.0',
    hot: false,
    liveReload: true,
    watchFiles: ['src/**/*.{ts,tsx,js,jsx}'],
    open: ['https://dazi.cool/app_type'], // 启动时自动打开的 URL
    compress: true, // 启用 gzip
}

Nginx 配置

location /app_type/ {
      proxy_pass http://127.0.0.1:3010/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
}
# 代理到 webpack 的 webscoket
location /ws {
      proxy_pass http://127.0.0.1:3010/ws;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_redirect off;
  }