Apache背后的代理反应服务器答案

【问题标题】：Proxy react server behind ApacheApache背后的代理反应服务器
【发布时间】：2018-01-16 04:08:17
【问题描述】：

我刚刚使用 create-react-app 创建了一个反应应用程序，该应用程序从端口 3000 开始，很好。我想使用前缀访问应用程序，在我的例子中是 /node 和端口 80，即http://localhost/node。为此，我已将 apache 配置为：

<Location /node>
    Allow from all
    ProxyPass http://localhost:3000/ retry=0
    ProxyPassReverse http://localhost:3000/
</Location>

部分工作，我可以访问http://localhost/node，但页面无法正确加载，因为捆绑的路径是静态的。在控制台上签名我看到请求http://localhost/static/js/bundle.js 失败并没有找到。

bundle.js 不在 index.html 中，所以应该是 webpack 注入的。

我一直在寻找在哪里配置 webpack 以更改配置以将 bundle.js 放在 node/static/js/bundle.js 或类似的东西下。

【问题讨论】：

标签： reactjs

【解决方案1】：

我通过运行生成了构建文件夹

sudo npm run build

在应用程序根文件夹中。然后我创建了文件夹 /var/www/html/app 并将 index.html 和相关文件复制到该文件夹中。我还必须更正 index.html 中的文件路径。

然后可以通过url http://localhost/app打开react应用。

【讨论】：

【解决方案2】：

如何不使用 apache 代理。

编辑“package.json”，添加

"homepage": "http://localhost/" ,

不是"homepage": "http://localhost/node"

结果：

$ head package.json
{
  "name": "reactapp",
  "private": true,
  "homepage": "http://localhost/",
  "devDependencies": {
....

运行

npm run build

创建符号链接

ln -s create-react-app/build /var/www/html/node

【讨论】：

【解决方案3】：

我遇到了同样的问题，我使用 Webpack 的 publicPath 属性解决了：https://webpack.js.org/guides/public-path/

在我的配置中，我将此类属性绑定到环境变量：

 output: {
   path: path.resolve(process.cwd(), 'build'),
   publicPath: process.env.PUBLIC_URL || '/',
 }

在你的情况下，你会运行类似PUBLIC_URL=/node npm run build 的东西。这将使 Webpack 在 index.html 中的每个 url 前面加上 /node。

【讨论】：