修改 nginx proxy_pass 設定後我的 React 應用程式無法載入

Question

我有 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 / 錯誤。

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;
}