將 Nginx 與 Create-React-App 開發服務器和 npm start 結合使用

Question

令人沮喪的問題在這里。 我在必須使用 Nginx 進行外部連接/HTML 服務器的服務器上使用 created-react-app 創建了一個反應項目。 本質上我需要做的是使用 nginx 作為代理服務器，當 URL 輸入瀏覽器時，請求被路由到 localhost:3000 並且反應應用程序生成由 nginx 提供給客戶端的結果。

所以，到目前為止，這是 nginx 文件，但我無法讓它工作。 幾個問題：

1. 是否需要將根指定指向 react 項目中的 /public 目錄以獲取 index.html？

2. 假設您運行npm start並在編譯后，您在瀏覽器中輸入 FQDN 並路由到 localhost:3000

到目前為止我的 Nginx 配置

    server_name         server-name.com;   
    listen              443 ssl;
    ssl_certificate     /etc/letsencrypt/live/site-name/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/site-name/privkey.pem;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    proxy_read_timeout 60s;
    client_max_body_size 64M;
    
    # should this be routed to /public in the react project to pick up index.html?
    # root /var/www/html;

    index index.html index.htm;

    location / {
        #try_files $uri $uri/ =404;
        
        # Make sure React Application return is index.html so client routing remains in sync/reachable        
        #try_files $uri /index.html;
   
        proxy_pass  http://localhost:3000;
        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 {
       rewrite ^/_api/(.+) /$1 break;
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:3030;
    }
}

server {
    server_name         server-name.com   
    listen              80;

    allow 10.0.0.0/16;
    deny all;

    proxy_read_timeout 60s;
    client_max_body_size 64M;

    # Should this be routed to /public in the react project to pick up index.html?
    # root /var/www/html;

    index index.html index.htm;

    location / {
        #try_files $uri $uri/ =404;
        
        # Make sure React Application return is index.html so client routing remains in sync/reachable        
        try_files $uri /index.html;

    }    

    location /_api {
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:3030;
   }
} 

Answer 1

如果您不知道該怎么做，請打開您的 nginx 文件 vi 站點啟用/默認。

然后從該文件中刪除所有內容並簡單地粘貼：

server {
    listen 80;
    client_max_body_size 10M;
    server_name YourWebsiteNameWithDomain yourIPV4;
    location / {
        proxy_pass http://127.0.0.1:3000;
        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;
     }
}

不要忘記重啟你的nginx