IT技术 - Apache 背后的代理react服务器 - 吾爱随笔录

IT技术 reactjs

2021-05-17 10:40:13

我刚刚使用 create-react-app 创建了一个react应用程序，该应用程序从端口 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 或类似的东西下。

3个回答

如何不使用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

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

sudo npm run build

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

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

我遇到了同样的问题，我使用 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 预先添加/node到index.html.

其它你可能感兴趣的问题