Meine React-App wird nach dem Ändern der Nginx-Proxy-Pass-Einstellungen nicht geladen

Question

Ich habe ein React-App-Node-JS-Backend und Nginx. Ich habe das Zertifikat erhalten und über Certbot installiert.

Meine Anwendung stellt Get- und Post-Anfragen, aber dafür muss ich die Einstellung „proxy_pass“ festlegen.

Meine Serverblockdatei:

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


}

Muss ich die Einstellung „proxy_pass“ hinzufügen?

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

Wenn ich es am Serverstandort 433 ablege, füge try_files $uri $uri/ =404; 我的 React 应用程序无法加载，并且我在浏览器中收到 Cannot GET / Fehler ein.

Answer 1

您设置 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;
}