Пошаговое руководство по настройке статических веб-сайтов на AWS

Статические веб-сайты на AWS могут быть невероятно быстрыми при правильной настройке. Давайте рассмотрим каждый шаг и объясним, какие сервисы вам понадобятся для создания статического сайта на AWS.

Это может быть веб-сайт Gatsby или любой другой статический веб-сайт HTML / CSS, который вы хотите разместить. Хотя это необязательно, мы предполагаем, что у вас есть приложение, доступное в Git, а также инструмент для сборки / развертывания. В наших примерах мы покажем, как это настроить с помощью GitLab.

Требуемые услуги

AWS предлагает огромное количество сервисов. Давайте объясним, какие сервисы вам понадобятся и почему.

AWS Simple Storage Service / S3

Amazon S3 - это место для хранения всех файлов вашего сайта. Думайте об этом как о высокопроизводительном диске или FTP. Всякий раз, когда пользователи посещают ваш веб-сайт, файлы веб-сайта могут быть получены из S3.

AWS CloudFront

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

Это гарантирует быстрое подключение к вашему статическому сайту из любой точки мира. Вы можете увидеть доступные периферийные местоположения AWS на карте ниже.

Более того, получение пользователями веб-страниц из CloudFront обходится дешевле, чем получение их из S3, так что это определенно беспроигрышная ситуация. Вы должны платить определенную плату каждый раз, когда обновляете веб-сайт, но, если ваш веб-сайт не меняется каждый час, скорее всего, это будет не так много.

Обратите внимание: вам нужно будет аннулировать кеш в CloudFront при каждом изменении вашего веб-сайта, что требует небольших затрат.

AWS Route 53

Route 53 - это доменное имя и DNS-сервис Amazon. Хотя это необязательно, вы сможете приобрести желаемое доменное имя через Route 53. Если у вас уже есть доменное имя у предпочтительного регистратора, вам не нужно передавать его в AWS, вы можете продолжать использовать предпочтительного регистратора домена.

Еще одна услуга Route 53 - это управление DNS, отсюда и ссылка на 53, поскольку DNS работает на порту 53. Направив DNS вашего домена на AWS, вы сможете управлять записями DNS через AWS. Хотя это происходит за отдельную плату, на момент написания статьи 0,5 доллара США в месяц за хостинговую зону я настоятельно рекомендую. Route 53 обеспечивает высокий уровень интеграции с другими доступными сервисами AWS.

Вы сможете легко настроить записи DNS, чтобы они указывали на CloudFront через AWS.

Настройка статического веб-сайта на AWS

Шаг 1. Создайте корзину S3

Создайте корзину S3 в AWS, оставив все настройки по умолчанию.

Перейдите в свойства своего ведра и включите статический хостинг веб-сайтов.

Шаг 2. Настройте доменное имя в Route 53.

Создайте новую зону хостинга в AWS для своего доменного имени. Если у вас уже есть один настроенный в Route53, на этом этапе никаких действий не требуется.

Шаг 3. Добавьте CloudFront перед S3 Bucket

Создайте раздачу CloudFront в консоли управления AWS. В качестве источника выберите URL-адрес сайта S3. Он должен быть похож на yourbucket.s3-website-eu-west-1.amazonaws.com. В качестве псевдонима домена введите свое доменное имя. Вам нужно будет создать сертификат Amazon с ACM, следуйте инструкциям, которые будут отображаться на экране для этой части. Остальное можно оставить по умолчанию.

Шаг 4. Настройте DNS-канал от Route53 к CloudFront.

Нам нужно указать ваше доменное имя на только что созданный нами дистрибутив CloudFront. Для этого введите свою размещенную зону в Route 53. Создайте запись A с псевдонимом для распространения CloudFront, как показано на следующем примере снимка экрана.

Шаг 5. Настройте перенаправление WWW.

Чтобы заставить WWW перенаправлять на другой веб-сайт, нам нужно создать еще одну корзину S3. Создайте корзину S3 с именем www.yourwebsite.com. Опять же, настройте его как статический веб-сайт, но с перенаправлением, см. Пример конфигурации ниже.

После этого вам нужно будет создать новую запись DNS A в Route 53 для вашей зоны хостинга для домена www. Вы укажете домен www на эту недавно созданную корзину www S3. Например, см. Снимок экрана ниже.

Настройте CI / CD для своего статического веб-сайта

Если вы разрабатываете свой веб-сайт с использованием статических фреймворков, таких как Gatsby, вы можете настроить для него автоматический CI / CD! Таким образом, каждый раз, когда вы фиксируете изменение, оно может быть автоматически развернуто в вашем домене! Для этого нам нужно несколько действий.

  1. Существующая стратегия сборки
  2. Выгрузка файлов сайта в S3
  3. Недействительность кеша в CloudFront

Для этого вам понадобится пользователь Amazon с правильными правами доступа для связи с вашим инструментом развертывания (будь то Github, BitBucket, Gitlab или другие).

Шаг 1. Создание политик IAM

Сначала создайте политику, как показано ниже, с правильными правами на создание недействительности кеша в CloudFront, чтобы иметь возможность отображать новую версию веб-сайта после развертывания. Назовите это mywebsite-cloudfront-invalidate

Во-вторых, создайте другую политику, чтобы иметь возможность загружать и синхронизировать файлы в корзину S3 из инструмента CI / CD. Назовите это mywebsite-s3-full-rights.

Шаг 2. Создайте группу пользователей IAM и пользователя

Затем создайте группу пользователей, например, mywebsite-cicd. Предоставьте группе пользователей доступ к двум только что созданным политикам.

Затем создайте нового программного пользователя IAM с только программным доступом, это означает, что вы получите ключ доступа AWS и секретный ключ для доступа к AWS. Их можно использовать для предоставления доступа к вашему инструменту CI / CD. Обязательно сохраните ключи после создания, так как вы больше не сможете их увидеть. Создайте этого пользователя в только что созданной группе пользователей.

Шаг 3. Настройте ключи AWS на вашем инструменте CI / CD.

В выбранном вами инструменте CI / CD добавьте переменные среды AWS_ACCESS_KEY_ID и AWS_SECRET_KEY вместе с ранее созданными значениями.

Шаг 4. Создайте сценарий развертывания

Мы покажем пример сценария развертывания для Gitlab, но способ создания сценариев отличается от одного инструмента CI / CD к другому.

Для GitLab нам нужно создать gitlab-ci.yaml файл. Вы можете найти такой образец сценария, который мы используем ниже, и настроить его под свои нужды. Обратите внимание: этот скрипт использует флаг --delete при загрузке S3, что означает, что все файлы, которые не существуют в сборке, будут удалены, чтобы избежать хранения старых файлов, которые нам больше не нужны.

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

Резюме

После настройки вашего статического веб-сайта с помощью инструмента CI / CD вместе с S3 и CloudFront вы получите очень надежную настройку с отличной производительностью, независимо от того, где находится пользователь. Эта установка также требует минимального обслуживания. Настройка инструмента CI / CD великолепна, так как вам не нужно будет ничего обновлять вручную в AWS, инструмент CI / CD выполнит все действия вручную автоматически и сэкономит ваше время, чем больше вы его используете.

Следуйте за мной, чтобы увидеть больше статей и пошаговых руководств по AWS.