Блог

Главная - Вопросы по программированию - Развертывание приложения Angular в nginx, обслуживание статических ресурсов, игнорирование вложенных путей url

Развертывание приложения Angular в nginx, обслуживание статических ресурсов, игнорирование вложенных путей url

#angular #nginx #deployment

#угловатый #nginx #развертывание

Вопрос:

Я пытаюсь настроить nginx для развертывания моего приложения angular.

Я делаю это с помощью виртуального сервера, и конфигурация сервера ngnix:

 server {
        listen 80;
        include /etc/nginx/mime.types;
        server_name app.mydomain.com;
        root /opt/prodat/gandalf/current;
        location / {
                try_files $uri$args $uri$args/ /index.html;
        }
        location ~ .css {
                add_header  Content-Type    text/css;
        }
        location ~ .js {
                add_header  Content-Type    application/x-javascript;
        }
}

Когда начальная страница (index.html ) загружает, все работает нормально.

Проблема заключается в том, когда я перезагружаю страницу с внутренним путем к angular, например http://app.mydomain.com/activities/list

в журнале nginx мы видим следующее:

 "GET /activities/vendor-es2015.js HTTP/1.1" 404 134 "http://app.mydomain.com/activities/list" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0"
"GET /activities/main-es2015.js HTTP/1.1" 404 134 "http://app.mydomain.com/activities/list" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0"
"GET /activities/assets/plugins/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 134 "http://app.mydomain.com/activities/list" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0"

Запросы включают в себя действия, и во всех ответах возвращается 404 Не найдено.

Я попытался исправить это, добавив эти строки в конфигурацию nginx:

        location ~ /activities/(.*) {
                try_files /$1 $uri$args $uri$args/ /index.html;

        }

Помимо того, что я вообще не работаю, мне не нравится помещать каждый подпуть приложения angular в конфигурацию nginx.

Может ли кто-нибудь подсказать мне лучшее решение?

Заранее благодарю.

Комментарии:

1. Вы можете использовать стратегию определения местоположения хэша angular.io/api/common/HashLocationStrategy или настройте nginx для перенаправления на индекс на 404. В официальной документации есть руководство для этого angular.io/guide/deployment#fallback-configuration-examples

2. Я хотел бы исправить это в конфигурации nginx, чтобы не приходилось изменять приложение angular.

3. Вы пробовали использовать вторую ссылку из документации Angular? Я использовал только для Apache, а не для nginx, но идея должна быть аналогичной; вы можете настроить правила перезаписи в конфигурации вашего веб-сервера, которые перенаправят 404-е обратно на ваш index.html так что nginx будет обслуживать его как одностраничное приложение.

4. Привет, Алекс, я решил эту проблему, сделав базовый путь абсолютным в развертывании Angular. Большое вам спасибо за вашу помощь.

5. Рад это слышать.

Ответ №1:

Наконец, я решил эту проблему, изменив базовый путь angular при развертывании.

index.html:

 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>eProdat - General Data Protection Regulation (GDPR)</title>
  <base href="/">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="robots" content="noindex,nofollow">
  <link rel="shortcut icon" href="assets/images/isotipo.png" type="image/png">

  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/colors/blue.css" id="theme" rel="stylesheet">
  <link href="assets/css/custom.css" rel="stylesheet">
  <link href="assets/css/toastr.css" rel="stylesheet">


  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body class="fix-header fix-sidebar card-no-border">

  <app-root></app-root>

  <script src="assets/plugins/jquery/jquery.min.js"></script>
  <script src="assets/plugins/bootstrap/js/popper.min.js"></script>
  <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="assets/plugins/sticky-kit/sticky-kit.min.js"></script>
  <script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
  <script src="assets/js/jquery.slimscroll.js"></script>
  <script src="assets/js/waves.js"></script>
  <script src="assets/js/sidebarmenu.js"></script>
  <script src="assets/js/custom.js"></script>

<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="scripts.js" defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>

</html>

Таким образом, пути css и js запрашиваются как абсолютные, не зависящие от пути браузера.

Приветствую вас.