Предпосылки
Начиная
Для начала используйте Angular CLI для создания нового приложения Angular:
Оболочка
xxxxxxxxxx
1
ng new
Вам будет предложено ввести имя для вашего приложения и некоторые варианты конфигурации. Как только CLI сгенерирует все необходимые файлы для вашего приложения Angular, давайте удостоверимся, что оно работает нормально, выполнив следующие команды:
Оболочка
xxxxxxxxxx
1
cd <app-name>
2
ng serve
В вашем любимом браузере перейдите по адресу http: // localhost: 4200 . Если вы использовали Angular 8, вы должны увидеть экран, похожий на этот:
Теперь, когда ваше приложение запущено, давайте развернем его на S3. Для этого вам необходимо войти в свою учетную запись AWS и перейти на консоль S3 .
Нажмите на кнопку « Создать корзину» , следуйте инструкциям, чтобы дать имя новой корзине, и выберите подходящий регион.
Вам также может понравиться:
Очистка S3 Bucket с помощью Афины .
Оставьте параметры настройки как есть и снимите флажок Блокировать весь открытый доступ в разделе « Установка разрешений ». Теперь рассмотрите и создайте свое ведро. Ваш последний экран должен выглядеть как на картинке ниже:
Наше новое ведро выглядит великолепно. Но это будет выглядеть еще лучше, когда мы его наполним.
В настоящее время у нас есть только папка с приложением Angular. Нам нужно сгенерировать файлы сборки, чтобы S3 мог их понимать и обслуживать. Давайте вернемся к нашему приложению Angular и просто запустим:
Оболочка
xxxxxxxxxx
1
ng build --prod
Вы должны увидеть новую distпапку в каталоге вашего проекта. Он содержит
понятные браузеру файлы, которые вам нужно загрузить в корзину.
Вернитесь к S3, чтобы загрузить содержимое вашей distпапки. Убедитесь, что в раскрывающемся списке « Управление общими разрешениями» вы выбрали « Предоставить общедоступный доступ для чтения к этим объектам» .
Оставьте Установить права доступа и Установить свойства как есть. Затем нажмите Загрузить . Вот несколько полезных скриншотов:
Теперь перейдите к Свойствам и разверните статический хостинг .
Click Use this bucket to host a website and enter index.html for Index document. Click Save.
After saving it, you should see a colored checkmark for Bucket hosting, indicating that it is now enabled. At the top, Endpoint is the link for your freshly deployed Angular app.
After a minute or so, navigate to that link to see the result. Congrats! You just deployed your Angular app to AWS S3!