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
Vous devez vous connecter pour publier un commentaire.
http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
Je sais que votre exemple est plus complexe avec la
@proxy
mais la ci-dessus fonctionne très bien pour mon application.