Nano Hash - криптовалюты, майнинг, программирование

nginx 2 места для разных приложений (реагировать и угловатых)

У меня есть приложение React и панель администратора, встроенная в Angular:

/var/www/example.com/example/web ‹– Реагировать

/var/www/example.com/example/admin ‹- Угловой

Это моя конфигурация Nginx:

server {

   server_name example.com;
   index index.html index.htm;

   # React
   location / {
        root /var/www/example.com/example/web/build;
        try_files $uri $uri/ /index.html;
   }

   # Admin
   location /admin {
        root /var/www/example.com/example/admin/dist;
        try_files $uri $uri/ /index.html;
   }
}

Когда я перехожу к example.com/admin, он перенаправляет меня в приложение реакции, а не в приложение angular.

Я знаю, что об этом, возможно, уже много раз спрашивали, но я безуспешно пытался исправить это весь день :(

reactjs nginx angular nginx-location nginx-config
30.01.2020

Ответы:


1

Это происходит потому, что последний аргумент директивы try_files должен быть URI. или код ошибки HTTP. В вашем случае при обработке запроса http://example.com/admin результирующий URI второй директивы try_files будет /index.html, который в следующий раз будет обработан с первым блоком местоположения и приведет вас к ответному приложению.

Одним из решений является размещение углового приложения в папке admin папки приложения реакции:

server {

   server_name example.com;
   index index.html index.htm;
   # React folder
   root /var/www/example.com/example/web/build;

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

   # Admin
   location /admin {
        # angular app must be in the /var/www/example.com/example/web/build/admin folder
        try_files $uri $uri/ /admin/index.html;
   }
}

Таким образом, результирующий URI второй директивы try_files будет /admin/index.html, что приведет вас к файлу индекса приложения angular.

Второе решение — использовать директиву alias для второго блока местоположения. :

server {

   server_name example.com;
   index index.html index.htm;

   # React
   location / {
        root /var/www/example.com/example/web/build;
        try_files $uri $uri/ /index.html;
   }

   # Admin
   location /admin {
        alias /var/www/example.com/example/admin/dist;
        try_files $uri $uri/ /admin/index.html;
   }
}

Обратите внимание, что результирующий URI запроса http://example.com/admin будет /admin/index.html, который по-прежнему будет обрабатываться вторым блоком местоположения и обслуживаться с файлом /var/www/example.com/example/admin/dist/index.html (если я использую директиву root вместо alias, префикс местоположения /admin будет добавлен к пути и индексный файл будет искаться в папке /var/www/example.com/example/admin/dist/admin).

В обоих случаях отсутствие файла индекса приложения angular в папке, в которой nginx будет его искать, будет причиной ошибки nginx HTTP 500 из-за бесконечного перенаправления на /admin/index.html URI.

30.01.2020
  • Большое спасибо! Второе решение сработало, но мне не нужно было добавлять /admin/index.html 30.01.2020
  • @ekclone Это связано с тем, что ваш индексный файл найден с помощью директивы index в корневой папке вашего углового приложения. Вы увидите разницу, если попробуете что-то вроде запроса http://example.com/admin/test. Моя конфигурация приведет вас к файлу углового индекса, а ваша — к индексному файлу реакции. 30.01.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..