我刚刚使用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之类的东西。
答案 0 :(得分:0)
我通过运行
生成了构建文件夹sudo npm run build
在app根文件夹中。然后我创建了文件夹/ var / www / html / app并将index.html和相关文件复制到该文件夹。我还必须更正index.html中的文件路径。
然后转到网址http://localhost/app即可打开反应应用。
答案 1 :(得分:0)
如何不使用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
答案 2 :(得分:0)
我遇到了同样的问题,我使用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
。