Как настроить Nginx с React Router HistoryLocation?

В настоящее время я использую 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 на нужный ресурс, а также иметь возможность обновлять и получать доступ к моим маршрутам.


person Jimmy Gong    schedule 26.08.2015    source источник
comment
У меня тоже такая проблема, вы нашли решение?   -  person Hairy Chris    schedule 17.11.2015
comment
Я тоже борюсь с этим. Я пытаюсь изменить путь приложения и пытаюсь запустить приложение маршрутизатора относительно этого каталога.   -  person t-my    schedule 29.11.2016


Ответы (1)


location / {
    try_files $uri /your/index.html;
}

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

Я знаю, что ваш пример сложнее с @proxy, но вышеприведенное отлично работает для моего приложения.

person AJP    schedule 03.02.2016