Comment configurer Nginx avec React Router HistoryLocation?

Je suis actuellement en utilisant Nginx en tant que reverse proxy et de servir mon statique actifs. J'ai été en utilisant Réagir Routeur HashLocation paramètre, car il était le défaut, et il m'a permis de m'actualiser sur une route sans problème et sans avoir besoin de tout autres configurations, mais la question avec l'aide de ce paramètre est la nécessité de l'url d'avoir /#/ajoutant mes itinéraires (par exemple http://example-app.com/#/signup).

Je vais maintenant essayer de passer à Réagir Routeur HistoryLocation réglage, mais je ne peux pas comprendre comment bien configurer Nginx pour servir index.html pour tous les trajets (par exemple,http://example-app.com/signup).

Voici ma première nginx installation (non compris mon mime.les types de fichier):

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

par défaut

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

}

Cette installation a bien fonctionné quand j'ai été en utilisant HashLocation, mais après avoir changé de HistoryLocation (le seul changement que j'ai fait), je remonte une erreur 404 Ne peut pas OBTENIR lors de la tentative d'actualisation sur un sous-route de l'url.

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

dans le location / bloc. Cela me permet d'actualiser et d'accéder directement aux les routes lieux du début, mais maintenant je ne peux pas soumettre PUT/POST demandes, au lieu de reprendre une 405 method not allowed. Je peux voir les demandes ne sont pas traitées correctement dans la configuration que j'ai ajouté maintenant réécrit toutes mes demandes d' /index.html et c'est là que mon API reçoit toutes les demandes, mais je ne sais pas comment accomplir pour être en mesure de soumettre mon PUT/POST demandes vers la bonne ressource, ainsi que d'être en mesure d'actualiser et d'accéder à mes itinéraires.

source d'informationauteur Jimmy Gong