什么在起作用
我已在 AWS EC2 实例上启动并运行 MERN stack 仪表板。
- EC2 实例位于EC2...aws.com
- React 应用程序在端口上提供服务5004.
- 节点应用程序正在端口上运行5003.
改变了什么
当我在 GoDaddy 设置要转发的域名(带屏蔽)时,问题就开始了
from 一些商业网站 to ec2.....aws.com.
首先,我设置了NGINX反向代理来提供服务/作为我的反应应用程序(前端)和/api作为我的节点应用程序(后端)
(稍后你会在下面找到nginx代码)
http://somebusiness.com/ http://somebusiness.com/工作正常
http://somebusiness.com/api/heartbeat http://somebusiness.com/api/heartbeat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Somebusiness Dashboard</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<frameset rows="100%,*" border="0">
<frame src="http://ec2-...aws.com/api/heartbeat" frameborder="0" />
</frameset>
</html>
框架中的实际 URL 是按预期工作的 URL:
http://ec2-...aws.com/api/heartbeat http://ec2-...aws.com/api/heartbeat工作正常
I think GoDaddy与此有关,因为在 GoDaddy 上我可以指定此转发的标题、描述和关键字。所以作为后端,我被迫使用http://ec2-...aws.com/api/ http://ec2-...aws.com/api/作为我的后端 URL,目前还可以(这是我的次要问题目前,因为使用域名作为后端也很方便)
主要问题
如果我发送请求至
http://ec2.....aws.com:5003/uploads/avatars/user1.jpg http://ec2.....aws.com:5003/uploads/avatars/user1.jpg
图片已加载确定.
所以如果我发送请求到
http://ec2.....aws.com/api/uploads/avatars/user1.jpg http://ec2.....aws.com/api/uploads/avatars/user1.jpg
图片未加载.
回顾一下:http://ec2-...aws.com/api/ http://ec2-...aws.com/api/对于路由和请求工作正常,但对于服务则不行静态文件。这让我相信我的 nginx 设置是错误的,并且我花了无数个小时尝试各种不同的设置。在这里我展示我留下的地方:
帮助源和代码
因为我正在使用亚马逊Linux 2,我用它的工具来安装nginx1并设置反向代理。
当我在其他 VPS 上使用 NGINX 时,它的结构有点不同(站点启用和站点可用文件夹)。但在这个 nginx 上只有nginx.conf我进行设置的文件。 (我想这没有什么区别,只是想指出这一点)
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name eyeratereviews.com;
root /home/ec2-user/somebusiness-web-backend;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
include /etc/nginx/mime.types;
location / {
proxy_pass http://127.0.0.1:5004;
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;
}
location /api {
root /home/ec2-user/somebusiness-web-backend/uploads/avatars;
default_type application/json;
proxy_pass http://127.0.0.1:5003;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
}
我的node.js项目文件夹结构是这样的
...
控制器/
models/
static/
- 图片/
-- 标志.png
上传/
- 头像/
-- 用户1.jpg
-- 用户2.jpg
——……