reactjs - 问题在网站的子路由上托管反应应用程序 - 多个网站一个 IP 地址 NGINX
问题描述
我是 NGINX 的新手,所以这可能是一个简单的修复,但我找不到任何关于我在这里尝试做什么的好文档。
所以我有一个网站,它由 nginx 和 pm2 托管在 ubuntu aws 服务器上。我的问题是我想www.mysite.com
在www.mywebsite.com/app
. 这似乎不应该是最难做的事情。但是,我一直遇到问题,无法按照我的意愿工作。(部分原因是我也希望在其中托管一个 API 服务器,www.mywebsite.com/api
但在此之后这是一个问题)。 我能够首先www.mysite.com
使用以下 nginx 配置托管 react 应用程序:
server {
listen 80;
server_name 18.191.56.251;
root /home/ubuntu/app/src;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_max_temp_file_size 0;
proxy_pass http://127.0.0.1:3000/;
proxy_redirect off;
proxy_read_timeout 240s;
}
}
但是当我通过改变配置将它切换到子路由时:
server {
listen 80;
server_name x.x.x.x;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;
location /status {
return 200;
}
location /app {
proxy_pass http://127.0.0.1:3000;
}
location / {
proxy_pass http://...:3011/;
}
}
然后我的静态网站的基本路线www.mywebsite.com
工作正常,但www.mywebsite.com/app
没有“加载”一个空白页面,但如果你检查你会发现应用程序无法加载一些资源:
bundle.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
0.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
main.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
编辑更多研究:如果我检查对资源的请求,我会看到它的 url 是www.mywebsite.com/static/js/XXX.js
,但静态文件夹位于~/app/build/static
. 这是托管静态文件的 nginx 还是 pm2 问题?
任何帮助表示赞赏,谢谢
解决方案
所以我仍然会喜欢与此不同的结果,但我想出了一个解决方法,我在之后添加了以下内容location /app
:
location /static {
proxy_pass http://127.0.0.1:3000;
}
我不喜欢这个解决方案,因为如果我最终将静态内容作为其他项目的一部分,那么它将无法工作,但不知何故,我网站的所有资源都打包在正确的代理中/
。所以目前一切正常。
推荐阅读
- javascript - 简单的 JavaScript 计数器(不使用 jQuery 或其他框架)
- sql - SQL Server 表中表中两个日期列之间的月份
- node.js - 当我安装 express-validator 时,我得到 file:express-validator
- rest - 与 Google Fit 的总距离(Rest API 1)
- wordpress - 从本地主机转到实时站点时 URL 目录的变化?
- three.js - Mapbox:获取加载的瓷砖坐标?
- javascript - 嵌套函数和闭包
- excel - 使用 VBA 将工作表中的内容添加到另一个工作表中
- json - 输入'列表
' 不是类型 'List 的子类型 ' 在哪里 - node.js - 如何过滤掉多余的模型属性