web-dev-qa-db-ja.com

React Router HistoryLocationを使用してNginxを構成する方法は？

現在Nginxをリバースプロキシとして使用しており、静的アセットを提供しています。私はReactルーターのHashLocation設定をデフォルトで使用していたため、問題なく追加の構成を行うことなくルートを更新できましたが、この設定の使用に関する問題はルートに/＃/を付加したURLの必要性（例 http://example-app.com/#/signup ）。

ReactルーターのHistoryLocation設定に切り替えようとしていますが、すべてのルートにindex.htmlを提供するようにNginxを適切に構成する方法がわかりません（例 http： //example-app.com/signup ）。

これが私の初期のnginxセットアップです（mime.typesファイルは含みません）。

nginx.conf

# The maximum number of connections for Nginx is calculated by:
# max_clients = worker_processes * worker_connections
worker_processes auto;

# Process needs to run in foreground within container    
daemon off;

events {
  worker_connections 1024;
}

http {
  # Hide nginx version information.
  server_tokens off;

  # Define the MIME types for files.
  include       /etc/nginx/mime.types;

  # Update charset_types due to updated mime.types
  charset_types
    text/xml
    text/plain 
    text/vnd.wap.wml
    application/x-javascript
    application/rss+xml
    text/css
    application/javascript
    application/json;

  # Speed up file transfers by using sendfile() to copy directly
  # between descriptors rather than using read()/write().
  sendfile      on;

  # Define upstream servers
  upstream node-app {
    ip_hash;
    server 192.168.59.103:8000;
  }

  include sites-enabled/*;
}

デフォルト

server {
  listen  80;
  root    /var/www/dist;
  index   index.html index.htm;

  location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1d;
  }

  location @proxy {
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection "upgrade";
    proxy_set_header    Host $Host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-NginX-Proxy true;

    proxy_http_version  1.1;
    proxy_redirect      off;
    proxy_pass          http://node-app;
    proxy_cache_bypass  $http_upgrade;
  }

  location / {
    try_files $uri $uri/ @proxy;
  }

}

この設定は、HashLocationを使用していたときにうまく機能しましたが、HistoryLocationに変更した後（私が行った唯一の変更）、サブルートのURLで更新しようとすると404 Cannot GETが返されます。

if (!-e $request_filename){
  rewrite ^(.*)$ /index.html break;
}

の中に location /ブロック。これにより、ルートを更新して上位の場所として直接アクセスできますが、PUT/POSTリクエストを送信できなくなり、代わりに405メソッドを取得できなくなります。追加した構成がすべての要求を/index.htmlに書き換えるので、要求が適切に処理されていないことがわかります。これは、私のAPIがすべての要求を受け取っているところですが、両方を実行できる方法がわかりません。 PUT/POSTリクエストを適切なリソースに送信し、ルートを更新してアクセスできるようにします。

postnginxreactjsreact-routerhtml5-history
15
Jimmy Gong
location / {
    try_files $uri /your/index.html;
}

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files

あなたの例は@proxyの方が複雑であることはわかっていますが、上記のアプリケーションでは問題なく機能します。

19
AJP