Как настроить NGINX для перенаправления приложения React Router, созданного на поддоменах?
В настоящее время я создаю приложение, используя реакцию и маршрутизатор реакции, приложение отлично работает, когда обслуживается nginx и докером, но как только я перезагружаю или копирую/вставляю URL-адрес, nginx выдает ошибку 404, потому что конфигурация не может достичь указанных мест мной и отображает страницу с ошибкой, вместо этого 500. Кроме того, все мое приложение работает под поддоменом, из-за чего некоторые ответы, которые я видел и пробовал, не работают, поскольку я, кажется, что-то упускаю, чтобы правильно указать nginx, где найти мой index.html внутри соответствующих каталогов.
Сейчас мои файлы конфигурации выглядят так:
nginx.conf
user www-data;
worker_processes 4;
pid /run/nginx.pid;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
по умолчанию включено внутри сайтов
##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# http://wiki.nginx.org/Pitfalls
# http://wiki.nginx.org/QuickStart
# http://wiki.nginx.org/Configuration
#
# Generally, you will want to move this file somewhere, and start with a clean
# file but keep this around for reference. Or just disable in sites-enabled.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##
# Default server configuration
#
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
server_name _;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ index.html =404;
}
location = /example1/example2/ {
try_files $uri $uri/ index.html =404;
}
}
Также я использую browserHistory с моим реагирующим маршрутизатором.
Ответы 1
Я слишком долго с этим боролся. По какой-то причине я не мог понять ни один из принятых ответов на другие подобные вопросы. При поиске этой проблемы в Google нужно пройти через многое, и многие решения предполагают довольно сложное перенаправление и анализ uri. Решение, которое я сам придумал, довольно очевидно, когда я понял его правильно.
Я создал приложение для реагирования с помощью create-реагировать-приложение. Протестировано с сервером разработки во время разработки, прямые подссылки и все работает нормально. Я хотел развернуть его в контейнере nginx под поддоменом /ui/.
Без саба все работает как положено, но добавление базовой ванны как-то все испортило.
После пробежки это окончательное решение. Ключевые моменты:
- установите базовое имя на ваш BrowserRouter
- установить домашнюю страницу на package.json
- обслуживать статические файлы таким образом, чтобы uri подпапки указывал на правильную папку
App.js или что-то еще, что вы можете использовать в качестве основного компонента:
<BrowserRouter basename = "/ui">
<Switch>
<Route path = "/results" component = {Results} />
<Route path = "/testing" component = {Testing} />
</Switch>
</BrowserRouter>
Затем package.json:
...
"homepage": "/ui"
...
вся моя настройка nginx:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
location /ui/ {
root /app;
try_files $uri $uri/ /ui/index.html =404;
}
}
}
Докерфайл:
FROM node:alpine as build-step
WORKDIR /app
COPY project/package.json /app
RUN npm install
COPY project/ /app
RUN npm run build
FROM nginx
COPY --from=build-step /app/build /app/ui
COPY nginx/nginx.conf /etc/nginx/nginx.conf
.dockerignore
project/node_modules
project/build
мой скрипт сборки (./start-site.sh)
set -e
docker build -t mysite .
docker run --rm --name ui -p 80:80 mysite
Почему это работает?
При запросе, например, js-фрагментов браузер выполняет следующий запрос:
http://localhost/ui/static/js/main.c1ffd94a.chunk.js
Nginx использует
/ui/статические/js/main.c1ffd94a.chunk.js
как uri и пытается найти соответствующий файл из указанного вами корня, с добавлением косой черты или без нее. Действительно, есть соответствующий файл для возврата, и он работает.
Маршрутизируемые страницы вашего приложения для реагирования запрашиваются следующим образом:
http://localhost/ui/results/8997/
Соответствующие файлы явно не найдены, поэтому nginx возвращает
/ui/index.html
который является точкой входа для вашего приложения, и реагирующий маршрутизатор анализирует URL-адрес. Это также фиксирует любые ошибки 404 в разделе /ui, которые будут обрабатываться вашим реагирующим приложением.
Возможно, вы уже поняли это, но, по крайней мере, у следующего парня, который отчаянно будет гуглить об этом, будет что почитать.