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