Nginx与SSL和前端+后端相同的服务器

Question

我有一台带有Ubuntu的服务器(VPS Amazon(。在这个服务器上运行我的后端节点和前端React。我的ReactApp运行在nginx上，我的后端运行在pm2上。

在我的react应用程序中，我定义了react_app_BASE_URL:http://[my_ip_server]：4000。所以一切都正常，但在nginx中配置SSL后，我可以访问我的前端登录页面，但当我发送请求时，我发现了以下错误：

a( 如果我在REACT_APP_BASE_URL中设置https(https://[my_ip_server]：4000(，我会得到以下错误：ERR_SSL_PROTOCOL_error。b( 如果我让http，我得到混合内容错误

有人知道我是怎么做这项工作的？

非常感谢！

我的nginx.conf。目前我只使用80端口，直到我解决了我的问题。

server {
#listen [::]:443 ssl ipv6only=on; # managed by Certbot
#listen 443 ssl; # managed by Certbot
#ssl_certificate /etc/letsencrypt/live/mysite.com.br/fullchain.pem; # managed by Certbot
#ssl_certificate_key /etc/letsencrypt/live/mysite.com.br/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
#if ($host = surveys.alcancenet.com.br) {
#  return 301 https://$host$request_uri;
#} # managed by Certbot

listen 80 default_server;
listen [::]:80 default_server;
server_name mysite.com.br;
#return 404; # managed by Certbot
root /var/www/html;

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri /index.html;

}

}

Answer 1

在@Markido的帮助下。我设法解决了这个问题。

我在后台添加了默认路由"/api"；之后，我在nginx配置中放入了以下

location /api {
proxy_pass http://localhost:4000;
} 

Tks！！！

Answer 2

首先，运行应用程序(我假设您使用PS2(和通过nginx代理公开应用程序是有区别的。

向我们展示你的nginx配置文件，并告诉我们你的后端运行在哪个端口上(假设前端运行在4000端口上(，这将是最有帮助的。

编辑；感谢配置和后端端口。

我认为您不需要将create-react应用程序的基本url设置为https，只需设置端口并使用PS2在VPS上运行即可。

我看不出你的配置中是如何有任何指向4000的代理的——你不公开后端吗？

唯一公开的部分是静态html文件。相关代码为；

root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri /index.html;
} 

如果你想使用https调用后端，或者使用一些带有https调用过程的工具生成你的网站，你需要在前端正确地这样做。IE这里有点不对劲。

通常的做法是：；只在端口443 SSL上暴露后端和前端，使用不同的子域(例如api.mydomain.com(，然后使用nginx中的代理将每个域的443流量重定向到相应的本地端口(4000，更有可能是前端端口或静态文件目录(。

代替：

location / {
try_files $uri $uri /index.html;
} 

使用类似的东西

location / {
proxy_pass http://localhost:4000;
}