Развертывание 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.

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