Question

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

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

部分工作，我可以访问http://localhost/node，但页面无法正确加载，因为到bundle的路由是静态的。使用控制台我看到请求http://localhost/static/js/bundle.js失败但未找到。

bundle.js不在index.html中，因此应该由webpack注入。

我一直在寻找配置webpack的地方，以更改配置，将bundle.js放在node / static / js / bundle.js之类的东西。

Answer 1

我通过运行

生成了构建文件夹

sudo npm run build

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

然后转到网址http://localhost/app即可打开反应应用。

Answer 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

Answer 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在/node中的每个URL之前附加index.html。