Разверните свое приложение Angular для Netlify за считанные минуты

Жизнь стала проще с Netlify. Теперь вы можете развернуть все свои угловые приложения в Netlify и иметь уникальную ссылку для доступа к ним в любое время.

Когда-то я опубликовал Как развернуть приложение Angular на Heroku. Вот версия Netlify

Это руководство представляет собой пошаговое руководство, которое проведет вас через процесс развертывания от начала до конца и содержит:

Настройка вашего приложения Angular — свежее приложение
Отправка вашего приложения на Github
Непрерывная интеграция вашего приложения с Github на Netlify

Давайте начнем!

Предупреждение о спойлере: если у вас уже есть приложение angular или вы уже знаете, как настроить приложение angular, нажмите здесь, чтобы перейти к разделу Netlify Deployment.

Настройка вашего приложения Angular

Этот шаг предназначен для создания нового углового приложения. Если у вас не установлен angular cli, запустите npm install -g @angular/cli в вашем терминале.

Затем запустите ng new angular-netlify

Это устанавливает новое приложение angular в текущем каталоге и называет его «angular-netlify». Вы можете заменить «angular-netlify» любым именем по вашему выбору или именем вашего приложения.

затем cd angular-netlify чтобы перейти в каталог вашего приложения.

Бежать ng serve для обслуживания/запуска вашего приложения. Это будет работать на в вашем браузере по умолчанию.

Свежее угловое приложение

Отправка вашего приложения на Github

Создайте новый репозиторий, нажав «Новый репозиторий» в меню на панели навигации.

Создание нового репозитория на github

Заполните форму «Создать новый репозиторий» и отправьте форму.

Выполните следующие шаги, чтобы отправить приложение на Github:

В своем терминале убедитесь, что вы находитесь в каталоге angular-netlify, и выполните следующие команды:
git init для инициализации каталога для git
git add .
git commit -m 'initial commit' чтобы добавить свои файлы и зафиксировать их
git remote add origin <your-github-remote-url>
git push чтобы, наконец, отправить ваше приложение на github. Возможно, вам придется запустить git push --set-upstream origin master

Настройте Netlify и разверните приложение Angular

Если вы еще не зарегистрировались на netlify, посетите www.netlify.com и нажмите Войти

Войдите в свою учетную запись Github.

Нажмите Новый сайт от Git

Выберите Github в разделе «Непрерывное развертывание» и разрешите netlify доступ к вашему репозиторию github. Это приведет вас к следующему шагу: выберите репозиторий

Найдите и выберите репозиторий на вашем github, который вы хотите опубликовать в Netlify.

На третьем этапе: «Параметры сборки и развертывания!» выберите мастер ответвляться.

В разделе Основные параметры сборки введите сборки —prod

В разделе «Каталог публикации» введите расстояние

Нажмите Развернуть сайт

ааааааааааааааааааааааа… Бинго!!! Мы живем!

Netlify сгенерирует уникальный URL-адрес, по которому можно будет легко добраться до вашего приложения.

При желании создайте уникальный URL для вашего приложения.

Перейдите на панель инструментов вашего приложения> Настройки> Общие> Сведения о сайте.

В разделе «Информация о сайте» нажмите «Изменить имя сайта» и введите предпочтительное имя вашего приложения (в моем случае: angular-netlify).

Так становится

Нажмите Сохранять

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

Если эта статья хоть как-то помогла вам, ставьте лайк и делитесь.

Вы также можете подписаться на меня в Твиттер а также LinkedIn