将 webpack 开发服务器与 nginx 结合使用

Question

我正在尝试在我的 React 前端上启用 HMR，该前端也使用 nginx/php-fpm 作为后端。我在 stackoverflow 上读了一些文章和问题，但仍然无法让它工作。

首先，如果我理解正确的话，它应该像这样工作：

1.我将 docker nginx 容器（80）映射到端口 8080

2. 我向 localhost:8080 发出请求，然后将其传递到 docker 容器中，并传递给在端口 80 上侦听的 nginx。
3. 之后我应该有两个选择，如果我想向后端发出请求，这只是 API，那么 URI 中带有 /api 的所有内容都将被重定向到 php-fpm，否则其他所有内容将被重定向到 webpack-dev-server 。

目前我的 nginx 配置如下：

upstream backend {
        server app:9000;
}
server {
        root /var/www/emailApp/public;
        location / {
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_pass http://localhost:8080;
        }

        location ~ ^\/api\/.+$ {
                fastcgi_pass backend;
                fastcgi_split_path_info ^(.+\.php)(/.*)$;
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $request_filename;
                fastcgi_param DOCUMENT_ROOT $realpath_root;
        }
}

我不确定这是否正确，但如果它与“/”匹配，它应该尝试将其传递到端口 8080，如果它与 /api/ 匹配，那么它应该将它传递到 php 后端。

这是我的 webpack 配置

    entry: './assets/index.jsx',
    output: {
        filename: 'main.js',
        publicPath: "http://localhost:8080/public/"
    },

    devServer: {
        contentBase: path.join(__dirname, 'public'),
        host: '0.0.0.0',
        compress: true,
        port: 8080
    },

我主要是从教程中做到这一点的，但我不认为我理解它。因为现在我调用index.php，它调用返回模板的控制器，该模板包含对公共文件夹中main.js的引用。但阅读文档后的事件我完全不明白它。devServer 部分可能，它指定将侦听 0.0.0.0:8080 的服务器，但如果我没有记错的话，我需要更改项目的结构，所以我有 index.html 文件，其中将在公共文件夹中包含我的 js 文件， 正确的 ？