修改 nginx proxy_pass 设置后我的 React 应用程序无法加载
P粉427877676
P粉427877676 2024-04-05 11:53:10
0
1
489

我有 React app Node JS 后端和 nginx。我已经获得证书并通过 Certbot 安装它。

我的应用程序发出获取和发布请求,但为此我需要设置 proxy_pass 设置。

我的服务器块文件:

server {

        root /var/www/nikolsoborsocial/html;
        index index.html index.htm index.nginx-debian.html;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        location / {
                try_files $uri $uri/ =404;
                               
        }
        
        


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


    if ($host = nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        
        return 404; # managed by Certbot


}

我需要添加 proxy_pass 设置吗?

proxy_pass http://localhost:3000;
include proxy_params;

如果我将其放入 433 服务器位置,插入 try_files $uri $uri/ =404; 我的 React 应用程序无法加载,并且我在浏览器中收到 Cannot GET / 错误。

P粉427877676
P粉427877676

全部回复(1)
P粉481815897

您设置 nginx 配置文件以在“location /”服务器块中提供 React 文件。

因此,如果您尝试在“location /”块中添加 proxy_pass 设置,它将覆盖提供反应文件的代码。 Nginx 会将请求代理到运行在 localhost:3000 上的后端服务器。

如何解决此问题?

您必须在后端服务器中为此请求提供文件,或添加新的位置块。

这是添加新位置块的示例

server {
    root /var/www/nikolsoborsocial/html;
    index index.html index.htm index.nginx-debian.html;

    server_name nikolsoborsocial nikolsoborsocial.org www.nikolsoborsocial.org;

    location / {
        try_files $uri $uri/ =404;
    }

    # Proxy Pass settings
    location /app {
        proxy_pass http://localhost:3000;
        include proxy_params;
    }

    # SSL configuration
    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板