javascript - React JS BrowserRouter + Express JS + Nginx 代理没有正确生根
问题描述
我的问题是我想通过 URL 将参数传递给 React 组件。如果我通过 localhost 开发环境尝试,一切正常。
我的问题仅在我将 React 应用程序部署到我的运行时服务器时出现。(https://panel.nuerk-solutions.de/dvb)
我使用https://pterodactyl.io/,它实际上是一个 GamesServerPanel。
现在 Pterodactyl 只为我管理 Docker 容器,并且可以为这些容器打开端口。到目前为止,一切正常。除此之外,我使用 Express 作为服务器(参见配置)。然后我在我的 Nginx-Config 中配置了一个代理,将 IP 地址重定向到这个域:https://panel.nuerk-solutions.de/dvb。到目前为止,一切仍然有效。只有当我尝试在 URL 中设置我的参数时:https : //panel.nuerk-solutions.de/dvb/Hbf/3/5 然后才会出现一个白页,并出现错误,如下所示。由于某种原因,它尝试访问/dvb/Hbf/3
然后是文件。为什么呢?
我只想将参数传递给Hbf
组件。3
5
感谢您的帮助!
Docker 容器 - 快速日志:
container@pterodactyl~ Server marked as running...
v16.6.1
:/home/container$ npm install && npm run start
up to date, audited 55 packages in 843ms
found 0 vulnerabilities
> backend@1.0.0 start
> node index
Server Ready!
GET /dvb 304 5.365 ms - -
GET /static/css/main.a334b880.chunk.css 304 0.810 ms - -
GET /static/css/2.ed1298f3.chunk.css 304 0.411 ms - -
GET /static/js/main.5eb45bf9.chunk.js 304 0.424 ms - -
GET /static/js/2.6ba6ee6f.chunk.js 304 0.522 ms - -
GET /manifest.json 304 0.513 ms - -
GET /logo192.png 304 0.550 ms - -
------------------------
GET /dvb/Hbf/3/5 200 4.206 ms - 2286
GET /dvb/Hbf/3/static/css/main.a334b880.chunk.css 200 1.639 ms - 2286
GET /dvb/Hbf/3/static/js/main.5eb45bf9.chunk.js 200 2.164 ms - 2286
GET /dvb/Hbf/3/static/js/2.6ba6ee6f.chunk.js 200 2.228 ms - 2286
GET /dvb/Hbf/3/static/css/2.ed1298f3.chunk.css 200 2.379 ms - 2286
GET /dvb/Hbf/3/manifest.json 200 1.303 ms - 2286
GET /dvb/Hbf/3/favicon.ico 200 1.396 ms - 2286
GET /dvb/Hbf/3/static/css/main.a334b880.chunk.css 304 1.040 ms - -
GET /dvb/Hbf/3/static/css/2.ed1298f3.chunk.css 304 0.600 ms - -
GET /dvb/Hbf/3/manifest.json 304 0.743 ms - -
Nginx 配置:
server {
listen 80;
server_name panel.nuerk-solutions.de;
return 301 https://$server_name$request_uri;
}
server {
listen 80;
listen [::]:80;
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name panel.nuerk-solutions.de;
ssl on;
ssl_certificate /etc/ssl/certs/cert.pem;
ssl_certificate_key /etc/ssl/private/key.pem;
ssl_client_certificate /etc/ssl/certs/origin-pull-ca.pem;
ssl_verify_client on;
location / {
proxy_pass http://134.255.234.93:2086;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_intercept_errors on;
proxy_redirect off;
}
反应代码:
import {DvbWidget} from "./dvb/Dvb";
import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom';
import Quote from "./qutoe/Quote";
function App() {
return (
<Router
forceRefresh={true}>
<Navbar>
<NavItem icon={<PlusIcon/>} destinationPath="/dvb"/>
<NavItem icon={<BellIcon/>} destinationPath="/quote"/>
<NavItem icon={<MessengerIcon/>}/>
<NavItem icon={<CaretIcon/>}>
<DropdownMenu/>
</NavItem>
</Navbar>
<Switch>
<Route exact path="/dvb/:stop?/:amount?/:offset?"
children={() => <DvbWidget name={"MainStaion"}/>}/>
<Route path="/quote" children={() => <Quote />}/>
</Switch>
</Router>
);
}
快递代码:
const express = require('express');
const app = express();
const path = require('path');
const morgan = require("morgan");
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function(req, res, next) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(2086);
console.log("Server Ready!");
解决方案
解决方案是将start_url
manifest.json 和homepage
package.json 中的 设置为/
.
推荐阅读
- html - How do I center table text both horizontally and vertically?
- javascript - Array.splice 重复编辑和插入后,意外结果
- php - 如何在谷歌任务 api 中添加新任务
- r - 使用 R 提取每家道琼斯 30 指数公司的数据
- kubernetes - Google Kubernetes engine inter-cluster session affinity(Sticky Session)
- macos - 按下回车键后停止在 NSTextField 中突出显示文本(alt:跳转到行尾)
- html - 在下拉菜单中添加社交按钮
- nginx - 无法从我的网络服务器上的教程访问我的 Vapor 应用程序
- android - 如何通过分页在Firebase中实时降序?
- javascript - 模式中的 Bootstrap 4 下拉菜单在 Chrome 中不正确