Простые варианты развертывания

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

Сборка и обслуживание с диска

Во время разработки вы обычно используете команду ng serve для создания, просмотра и обслуживания приложения из локальной памяти с помощью webpack-dev-server. Однако, когда вы будете готовы к развертыванию, вы должны использовать команду ng build для сборки приложения и развертывания артефактов сборки в другом месте.

И ng builds, и ng serve очищают выходную папку перед сборкой project, но только команда ng build записывает сгенерированные артефакты сборки в выходную папку.

По умолчанию выходной папкой является dist/project-name/. Для вывода в другую папку измените outputPath в angular.json.

Когда вы приближаетесь к концу процесса разработки, обслуживание содержимого вашей выходной папки с локального веб-сервера может дать вам лучше понять, как ваше приложение будет вести себя при развертывании на удаленном сервере. Вам понадобятся два терминала, чтобы получить возможность перезагрузки в реальном времени.

  • На первом терминале запустите команду ng build в режиме просмотра, чтобы скомпилировать приложение в папку dist.
  `` `` ng build -watch``  

Как и команда ng serve, это регенерирует вывод файлы при изменении исходных файлов.

  • На втором терминале установите веб-сервер (например, lite-server) и запустите его для выходной папки. Например:
  lite-server --baseDir = "dist"  

Сервер автоматически перезагрузит ваш браузер при выводе новых файлов.

Базовое развертывание на удаленном сервере

Для простейшего развертывания создайте производственную сборку и скопируйте выходной каталог на веб-сервер

  1. Начните с производственной сборки:
  2.   ng build --prod  
  3. Скопируйте все, что находится в выходной папке (dist/по умолчанию), в папку на сервере.
  4. Настройте сервер для перенаправления запросов на отсутствие файлов для индексации. html. Подробнее о перенаправлениях на стороне сервера см. Ниже.

Это простейшее готовое к работе развертывание вашего приложения.

Развернуть на Страницы GitHub

Еще один простой способ развернуть приложение Angular — использовать страницы GitHub.

  1. Вам необходимо создать учетную запись GitHub если у вас его нет, а затем создайте репозиторий для своего проекта. Запишите имя пользователя и имя проекта в GitHub.
  2. Создайте свой проект, используя имя проекта Github, с помощью команды Angular CLI ng build и параметров, показанных здесь:
  3.   ng build --prod --output-path docs --base-href// 
  4. Когда сборка будет завершена, сделайте копию из docs/index.html и назовите его docs/404.html.
  5. Зафиксируйте свои изменения и нажмите.
  6. На странице проекта GitHub настройте его для публикации из папка с документами.

Вы можете увидеть свою развернутую страницу по адресу https:// .github.io//.

Конфигурация сервера

В этом разделе описаны изменения, которые вы могли внести на сервер или в файлы, развернутые на сервере.

Маршрутизировано приложения должны вернуться к index.html

Angular-приложения — идеальные кандидаты для работы с простым статическим HTML-сервером. Вам не нужен серверный движок для динамической компоновки страниц приложения, потому что Angular делает это на стороне клиента.

Если приложение использует маршрутизатор Angular, вы должны настроить сервер, чтобы он возвращал главную страницу приложения (index.html) при запросе файла, которого у нее нет.

Перенаправленное приложение должно поддерживать «глубокие ссылки». Глубинная ссылка — это URL-адрес, указывающий путь к компоненту внутри приложения. Например, http://www.mysite.com/heroes/42 — это глубокая ссылка на страницу сведений о герое, на которой отображается герой с идентификатором: 42.

Нет проблем, когда пользователь переходит по этому URL-адресу из работающего клиента. Маршрутизатор Angular интерпретирует URL-адрес и направляет на эту страницу и героя.

Но щелкнув ссылку в электронном письме, введите ее в адресную строку браузера или просто обновите браузер, находясь на странице сведений о герое. — все эти действия обрабатываются самим браузером, вне запущенного приложения. Браузер делает прямой запрос к серверу для этого URL, минуя маршрутизатор.

Статический сервер обычно возвращает index.html, когда он получает запрос для http://www.mysite.com/ . Но он отклоняет http://www.mysite.com/heroes/42 и возвращает ошибку 404 — Not Found, если вместо этого он не настроен на возврат index.html.

Fallback примеры конфигурации

Не существует единой конфигурации, подходящей для каждого сервера. В следующих разделах описываются конфигурации некоторых из самых популярных серверов. Список ни в коем случае не является исчерпывающим, но должен предоставить вам хорошую отправную точку.

  • Apache: добавьте правило перезаписи в файл .htaccess, как показано (https://ngmilk .rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
  RewriteEngine  On # Если запрашивается существующий ресурс или каталог, перейдите к нему как RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -f [OR] RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -d RewriteRule ^ - [L] # Если  запрошенный ресурс не существует, используйте index.htmlRewriteRule ^/index.html

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. Pen OYzpoa от w3resource (@ w3resource) на CodePen.

  • Nginx: используйте файлы try_files, как описано в веб-приложениях шаблонов Front Controller, измененные для обслуживания index.html:
  •   try_files $ uri $ uri//index. html;  

    Живая демонстрация:

    Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь любой вывод

    См. Pen OYzpaa от w3resource (@ w3resource) на CodePen.

  • IIS: добавьте правило перезаписи в web.config, аналогично к показанному в примере кода ниже:
  •                  

    Живая демонстрация:

    Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода

    См. Pen GayWeX от w3resource (@ w3resource) на CodePen.

  • Страницы GitHub: вы не можете напрямую настроить Сервер GitHub Pages, но вы можете добавить страницу 404. Скопируйте index.html в 404.html. Он по-прежнему будет служить ответом 404, но браузер обработает эту страницу и правильно загрузит приложение. Также неплохо использовать docs/on master и создать файл .nojekyll.
  • Хостинг Firebase: добавьте правило перезаписи.
  •    "rewrites": [{"source": "**", "destination": "/index.html"}]  

    Живая демонстрация:

    Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

    См. Pen QRapXL от w3resource (@ w3resource) на CodePen.

    Запрос служб с другого сервера (CORS)

    Разработчики Angular могут столкнуться с совместным использованием ресурсов между источниками ошибка при выполнении запроса службы (обычно запроса службы данных) к серверу, отличному от собственного хост-сервера приложения. Браузеры запрещают такие запросы, если сервер не разрешает их явно.

    Клиентское приложение ничего не может сделать с этими ошибками. Сервер должен быть настроен для приема запросов приложения.

    Оцените статью
    nanomode.ru
    Добавить комментарий