Начиная.

Amazon Web Services (AWS) в настоящее время является одной из ведущих сред облачных вычислений в Интернете. Предлагая более 100 услуг, они предлагают хостинг, услуги домена, хранилище, экземпляры виртуальных машин и так далее.

В этой статье я сосредоточусь на одной конкретной службе: Elastic Beanstalk (EB), и покажу вам, как бесплатно развернуть простое веб-приложение.

EB - это PaaS (платформа как услуга) с элементами IaaS (инфраструктура как услуга), которая используется для создания, развертывания и масштабирования веб-приложений. Он использует сервисы EC2 (Elastic Compute Cloud) и S3 (Simple Storage Service) для создания и хранения вашего веб-приложения соответственно.

Прежде всего, вам необходимо создать учетную запись AWS, если у вас ее нет, вам понадобится кредитная карта для регистрации, но с вас не будет взиматься плата за какие-либо услуги, которые вы не используете, и у большинства сервисов есть уровень бесплатного пользования, который вы можете использовать для небольших проектов или в качестве среды разработки. Вы можете создать свою учетную запись ЗДЕСЬ.

Теперь, когда у нас есть готовая учетная запись, приступим.

Подготовка веб-приложения Angular

Я полагаю, у вас уже установлены angular / cli и глобально Node (npm).

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

Откройте консоль и выполните команду:

ng new --routing angular-test

Это сгенерирует все необходимые файлы для веб-приложения и скелета приложения. Когда закончите, запустите приложение с помощью команды:

cd angular-test
ng serve -o

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

Теперь нам нужно сгенерировать пакет распространения для нашего приложения, то есть создать папку dist в основной папке проекта, где приложение Angular и все зависимости javascript будут встроены как статический веб-сайт.
Для этого введите:

ng build --prod

Аргумент - prod является необязательным, он указывает angular, что создаваемая вами версия является производственной и будет использовать производственную среду.

Подготовка сервера Node.js

Приложение angular, которое мы только что создали, не будет работать как статический веб-сайт, оно должно работать поверх сервера Node.js. В этом разделе мы создадим простой сервер Node.js, который загружает наше приложение angular.

Теперь создайте новую папку, чтобы поместить туда серверный проект, так как он будет иметь свои собственные зависимости npm и другой package.json. Это важно, потому что package.json серверного проекта - это тот, который сообщает Elastic Beanstalk, какие зависимости устанавливать в экземпляре EC2.

В консоли войдите в созданную папку и создайте проект Node.js, выполнив:

npm init

Следуйте инструкциям (или вы можете нажать Enter, пока не закончите).
После этого у вас будет файл package.json в папке без каких-либо зависимостей. В этом примере мы будем использовать 2 библиотеки: Express и Path.
Установите их, запустив на консоли:

npm install express path --save

Аргумент - save автоматически запишет зависимость от вашего package.json.

Теперь проверьте файл package.json на наличие конфигурации с именем «main», значением является ожидаемое имя основного файла проекта Node.js, измените его на «server.js», если это не так.

Теперь создайте файл с именем «server.js» в папке проекта и создайте простой сервер Node.js, подобный этой сути:

Если вы хотите проверить это, вставьте папку dist в базовую папку серверного проекта и запустите ее с помощью:

node server.js

Это запустит сервер на порту 8081. Чтобы увидеть это, введите localhost: 8081 в своем браузере и посмотрите, как приложение angular будет запущено.

Теперь, когда сервер готов, давайте подготовим код, который мы собираемся развернуть на AWS. Возьмите папку dist, файл server.js и файл package.json (серверного проекта) и сожмите их как zip. НЕ включайте папку «node_modules».
В AWS менеджер npm установит зависимости, указанные в package.json, а в папке dist веб-приложения angular будет весь необходимый код. чтобы он работал.

Развертывание в AWS Elastic Beanstalk

Теперь у нас есть все готово для развертывания нашего веб-приложения Angular в Интернете с помощью AWS.
Сначала войдите в AWS и перейдите к сервису Elastic Beanstalk, щелкнув меню сервисов в верхнем левом углу и выбрав сервис Elastic Beanstalk.

Вам нужно будет создать новое приложение, назвать его и поместить описание, для этого урока я назову приложение angular-test. Затем нажмите кнопку создания.

Теперь у вас есть пустое приложение и сообщение, в котором говорится: «В настоящее время для этого приложения не существует среды. Создайте его сейчас », щелкните по нему и создайте свою среду.

Выберите «Среда веб-сервера», и на следующем шаге вам нужно будет настроить среду.
Задайте имя домена (оно должно быть уникальным) или оставьте поле пустым для автоматически сгенерированного имени домена, это URL-адрес, по которому вы попадете в ваше веб-приложение. Если вам не нравится URL-адрес, вы можете получить домен в AWS Route 53 и привязать его к приложению.

В опциях базовой конфигурации выберите «Node.js» в качестве платформы и выберите «загрузить свой код» в разделе кода приложения.
Нажмите кнопку «Загрузить» и выберите локальный файл, затем выберите ранее сжатый zip-файл, содержащий папку dist, server.js и package.json.

Наконец, нажмите «Создать среду» и дождитесь завершения работы AWS. За это время AWS создаст новый экземпляр EC2 и установит все необходимое программное обеспечение, а также создаст корзину S3 для загрузки всех файлов. Дайте ему несколько минут, чтобы завершить весь процесс настройки.

Когда закончите, вы будете перенаправлены на панель инструментов среды:

Если есть гигантская зеленая галочка и написано «ОК, все в порядке!»
Чтобы проверить, все ли в порядке, откройте URL-адрес, который отображается рядом с именем среды, и посмотрите, как работает ваше приложение. (Примечание: открытие в первый раз может занять столько времени, поэтому не волнуйтесь, если вы откроете его и не увидите, что ваше приложение запущено)

Возможные ошибки

Если вы открываете свое веб-приложение и в браузере появляется сообщение «502 Bad Gateway», у вас, скорее всего, проблема с портом. В server.js УБЕДИТЕСЬ, что вы используете порт 8081, и все должно быть в порядке.

Другая ошибка, которую вы можете иметь, связана с зависимостями, убедитесь, что package.json правильный, «main» - «server.js» и что вы используете package.json сервера, а не Angular package.json, поскольку они полностью разные и будут устанавливать разные зависимости.

Заключение

Amazon Web Services - хорошая альтернатива бесплатному размещению ваших веб-приложений. Это один из самых простых способов разместить приложение Angular быстро и легко, но будьте осторожны, чтобы оставаться на уровне бесплатного пользования AWS.

Это мой первый пост на Medium, так что ваши аплодисменты и отзывы приветствуются. 😁