Question

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

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

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

我向localhost：8080发出请求，然后将其传递到docker容器中到监听端口80的nginx。
在那之后，我应该有两个选择，如果我想向后端发出请求，那只是API，那么URI中带有/ api的所有内容都将被重定向到php-fpm，否则其他所有内容都将被重定向到webpack-开发服务器。

当前，我的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文件。是吗？

将Webpack开发服务器与Nginx一起使用

0 个答案: