我被一个路径问题卡住了，我不能解决，即使我花了3个小时在堆栈溢出和谷歌搜索，尝试一切都没有成功。我很抱歉，如果我走在附近的解决方案在其他地方没有看到它，请注意，我真的尝试过。
所以，我的项目是一个后端Node JS，前端React的ubuntu 22.04 Nginx服务器（数字海洋）.我的服务器非常简单：
// main.js
const Port_TCP = 3005;
const express = require('express');
const path = require("path");
let app = express();
app.use(express.json());
app.use(express.static(__dirname + '/public'));
app.set('port', Port_TCP);
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, '/public/index.html'))
})
app.listen(Port_TCP);以及public/index.html文件：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My website</title>
<link href="css/app.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="imgs/ico.png">
</head>
<body>
<!-- React root DOM -->
<div id="MainRouter"></div>
<!-- React JS -->
<script type="application/javascript" src="js/app.js" defer></script>
</body>
</html>问题是这样的：
- 在我的localhost（windows），我没有问题，网站正在运行，因为它应该.
- 在我的服务器（ubuntu）上，网站被访问，index.html被加载，但里面的每个url都是错误的，并向我抛出经典的404错误：
404（未找到）错误提示404
404（未找到）错误提示404
(tab图标也找不到）
编辑-奇怪的事情，在服务器上我可以删除app.get（“*"...）部分，但我仍然到达页面。如果我在localhost上这样做，得到了502...
我的项目文件夹和文件设置如下：
/main.js (server)
/mix-manifest.json
/package.json
/package-lock.json
watcher.js (for nodemon)
webpack.mix.js
/js and /sass folder (which contain react project)
/public/
/public/index.html
/public/css/app.css
/public/js/app.js
/public/imgs/edit -我在etc/sites中的NGinx配置是：
server {
root /var/www/mywebsite.fr/public;
index index.html index.htm index.nginx-debian.html;
server_name mywebsite.fr www.mywebsite.fr;
location / {
proxy_pass http://localhost:3005;
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;
try_files $uri $uri/ =404;
}
listen [::]:443 ssl; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/mywebsite.fr/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mywebsite.fr/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.mywebsite.fr) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = mywebsite.fr) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
server_name mywebsite.fr www.mywebsite.fr;
return 404; # managed by Certbot
}如果你能给予我点线索那就太好了。
1条答案
按热度按时间b09cbbtk1#
这是因为相对路径不正确。在开发和构建过程中，相对路径可能略有不同。在reactjs目录中，修改或添加
package.json文件可能会有所帮助："homepage": "file:///android_asset/",（适用于安卓系统）"homepage": ".",（适用于安卓和Windows，iOS未测试）public文件夹路径