Развертывание Angular-приложения на Netlify

На сегодняшний день Netlify  является одной их лучших платформ для развертывания приложений и сайтов. Но сервис также можно использовать для размещения обычных JavaScript-приложений, созданных на основе Angular, React и Vue.

Как развернуть Angular-приложение на Netlify?

  • Создайте проект помощью Angular CLI.
  • Создайте репозиторий на GitHub.
  • Опубликуйте проект на GitHub.
  • Настройте Netlify, чтобы он ссылался на репозиторий GitHub.
  • Настройте Netlify для сборки и развертывания.

Создание Angular- проекта

Чтобы создать проект, в Angular CLI выполните терминале следующую команду:

ng new my-ng-netlify-project --routing

Перейдите в новый каталог:

cd my-ng-netlify-project

Теперь у нас есть новый Angular- проект. Замените HTML-код в файле app.component.html следующим:

<ul>
        <li><a [routerLink]="['/']">Home</a></li>
        <li><a [routerLink]="['/about']">About</a></li>
</ul>

<router-outlet></router-outlet>

В результате этих операция мы получили страницу с меню навигации и ссылкой на раздел About и главную страницу.

Теперь создадим компоненты Home и About. Выполните следующую команду, чтобы добавить компонент Home:

ng g c home

В файл home.component.html добавьте следующий HTML-код:

<h1>My Home Page</h1>

Запустите следующую команду, чтобы создать компонент About:

ng g c about

В файл about.component.html добавьте следующий HTML-код:

<h1>My About Page</h1>

Затем зарегистрируем маршруты в файле app-routing.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  { path: 'about', component: AboutComponent }
];

Теперь у нас есть Angular-приложение, и его можно опубликовать на GitHub.

git add .
git commit -m "My Netlify Angular project"

Создание репозитория GitHub

Перейдем на GitHub и создадим новый репозиторий.

Далее выполним в терминале следующие команды. Они импортируют наш Angular-проект в репозиторий GitHub:

git remote add origin git@github.com:pjlamb12/my-ng-netlify-project.git
git push -u origin master

Не забудьте изменить git@github.com: pjlamb12 / my-ng-netlify-project.git на URL-адрес, предоставленный GitHub

Настройка Netlify для сборки и развертывания приложения

Сначала подключим новый репозиторий GitHub к Netlify и установим параметры сборки. После этого Netlify создаст и развернет наше приложение. Давайте перейдем на app.netlify.com.

Если вы еще не зарегистрировались в Netlify, сделайте это. Это можно сделать с помощью учетной записи GitHub.

Создание нового сайта на Netlify

После входа в систему нажмите на кнопку «Новый сайт из Git». Затем вы увидите следующую панель:

Выберите GitHub, а затем выполните поиск репозитория, созданного для Angular-приложения.

Выбор ветки GitHub для команд развертывания и сборки

Для развертывания в Netlify нужно указать следующие параметры:

  • Ветка в GitHub для использования на сайте.
  • Команды для запуска сборки приложения.

Выберите проект my-ng-netlify-project, и вы увидите следующее:

Netlify позволяет выбрать, какую ветвь следует использовать для сборок. Затем можно ввести команду сборки (в данном случае ng build —prod). После этого указать Netlify папку, в которой находится собранный проект. По умолчанию Angular 7+ собирает проект в папке. dist/project-name. В нашем случае это dist/my-ng-netlify-project.

После того, как вы заполнили форму и нажали кнопку «Развернуть сайт», перейдете на страницу с описанием проекта. В верхней части этой страницы вы увидите блок заголовка:

«Angry-stonebraker-390db1» — это автоматически сгенерированный идентификатор сайта. Но его можно изменить.

Когда сборка будет завершена, сайт станет доступен по адресу angry-stonebraker-390db1.netlify.com.

Маршрутизация Catchall

Перейдите на страницу About и обновите страницу браузера. После этого вы увидите следующее:

Нам нужен механизм перенаправления Netlify на файл index.html. Это связано с тем, что маршрут /about расположен не на сервере, а на стороне клиента. К счастью, Netlify предоставляет способ сделать это.

Добавьте в проект Angular новый файл в каталог src: src/_redirects. В этот файл мы добавим следующий код:

/*    /index.html    200

Также нужно отредактировать angular.json, чтобы файл _redirects был включен в сборку. Мы можем добавить его в массив assets после favicon и папки src/assets.

После внесения изменений можно отправить подготовленные файлы в репозиторий. Когда мы это сделаем, Netlify автоматически обновит сайт.

Angular Universal

Приложение, которое мы создали и развернули на Netlify, не является JAMStack-сайтом, полностью сгенерированным на сервера. В Angular есть опция рендеринга на стороне сервера. Она называется Angular Universal.

Заключение

Netlify — отличная платформа, которая позволяет легко запускать сайты и веб-приложения. Поэтому в следующий раз, когда у вас появится идея для создания Angular- приложения разверните на Netlify.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, дизлайки, лайки!

Данная публикация является переводом статьи «Deploying an Angular App to Netlify» , подготовленная редакцией проекта.

Меню