我正在尝试使用Express运行我在Apache服务器上创建的React webapp。 该应用程序正在使用前端的路由(使用hashHistory)。 Everythinbg在当地有魅力。 在我的生产服务器上,这一切似乎都有点问题,我的身份验证库(Auth0)试图回调一个引发404的前端路由,并出现以下错误:
Error: ENOENT: no such file or directory, stat '/dist/index.html'
at Error (native)
我的虚拟主机条目如下:
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
#ServerName www.example.com
ServerAdmin admin@domain.com
ServerName domain.com
DocumentRoot /var/www/html/folder
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ProxyRequests Off
ProxyPreserveHost On
ProxyVia Full
<Proxy *>
Require all granted
</Proxy>
<Location /*>
ProxyPass http://127.0.0.1:9000
ProxyPassReverse http://127.0.0.1:9000
</Location>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
# changed from None to FileInfo
AllowOverride FileInfo
Order allow,deny
allow from all
</Directory>
这是目录结构:
.
├── dist
│ ├── 22163591c40fdf91545d26bca737a727.png
│ ├── 448c34a56d699c29117adc64c43affeb.woff2
│ ├── 89889688147bd7575d6327160d64e760.svg
│ ├── e18bbf611f2a2e43afc071aa2f4e1512.ttf
│ ├── f4769f9bdb7466be65088239c12046d1.eot
│ ├── fa2772327f55d8198301fdb8bcfc8158.woff
│ ├── index.html
│ ├── nb-utm-tagging-tool.1.0.0.css
│ └── nb-utm-tagging-tool.1.0.0.js
└── serve.js
这是我的Express服务器:
var express = require('express')
var app = express()
var path = require('path');
app.use(express.static('dist'))
app.get('*', function(req, res) {
res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});
app.listen(9000, function () {
console.log('Example app listening on port 9000!')
})
当我启动应用程序时,会调用Auth0 API尝试对用户进行身份验证,但失败并显示上述错误消息。
我应该补充说,当/ login不可用时,/#/ login确实可以让你到达某个地方。不确定为什么或它意味着什么。
不确定我做错了什么。有人能帮忙吗?
答案 0 :(得分:1)
感谢@ pierre-r-a的建议。
我读过这篇文章,这是我尝试做的很好的指南: React-router urls don't work when refreshing or writting manually
我只是将其添加到我的虚拟主机配置文件中,现在一切顺利。
<Location /login>
ProxyPass http://127.0.0.1:9000
ProxyPassReverse http://127.0.0.1:9000
</Location>