В настоящее время я использую Nginx в качестве обратного прокси-сервера и для обслуживания своих статических ресурсов. Я использовал параметр React Router HashLocation, поскольку он был установлен по умолчанию и позволял мне обновлять маршрут без проблем и без необходимости каких-либо дополнительных конфигураций, но проблема с использованием этого параметра заключается в том, что URL-адрес должен иметь /#/ в начале мои маршруты (например, http://example-app.com/#/signup).
Сейчас я пытаюсь переключиться на параметр HistoryLocation React Router, но не могу понять, как правильно настроить Nginx для обслуживания index.html для всех маршрутов (например, http://example-app.com/регистрация).
Вот моя первоначальная настройка 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 (единственное изменение, которое я сделал) я возвращаю 404 Cannot GET при попытке обновить URL-адрес подмаршрута.
if (!-e $request_filename){
rewrite ^(.*)$ /index.html break;
}
в блоке location /
. Это позволяет мне обновлять и напрямую получать доступ к маршрутам как к основным местоположениям, но теперь я не могу отправлять запросы PUT/POST, вместо этого возвращая метод 405, который не разрешен. Я вижу, что запросы не обрабатываются должным образом, поскольку конфигурация, которую я добавил, теперь перезаписывает все мои запросы в /index.html, и именно здесь мой API получает все запросы, но я не знаю, как добиться того, чтобы обе возможности отправлять мои запросы PUT/POST на нужный ресурс, а также иметь возможность обновлять и получать доступ к моим маршрутам.