Как дешево разместить статический веб-сайт или веб-сайт SPA на AWS

Это старая история из 2017 года. Если бы я занимался этим сейчас, я бы использовал Gatsby.js вместо Hexo. Но это можно сделать с помощью любого сайта, использующего только интерфейсный код.

Вот мой последний проект выходного дня: как я могу дешево разместить веб-сайт без необходимости в сервере, со 100% временем безотказной работы и обучаясь в процессе?

Ответ включает в себя JS и несколько сервисов AWS.

Это длинное руководство, и вам, возможно, не захочется делать все, что сделал я, поэтому я разделил это руководство на независимые разделы.

Гексо

Мой блог ведется на Hexo. Причина этого в том, что это очень простая платформа для ведения блогов, которая преобразует все в статические файлы для развертывания. Это важно, потому что S3 не отображает серверный код, такой как PHP или Node.

Установить Hexo очень просто. Все, что вам нужно, это установить npm.

npm install -g hexo-cli
hexo init myCoolNewBlog
cd myCoolNewBlog
npm install
hexo server

Итак, вы выполнили эти команды, но вы, вероятно, понятия не имеете, что вы только что сделали. Если вы перейдете по URL-адресу, который последняя команда напечатала на вашем терминале, он должен показать вам ваш новый блог.
Первое, что я сделал, это скачал новую тему. Здесь большой выбор. Я использую Аполлон. Как только вы загрузите тему, просто вставьте ее в каталог тем.

Теперь вам нужно взглянуть на два файла. Первый — это _config.yml в корневом каталоге. Здесь вы меняете тему и персонализируете свой сайт. Большинство этих настроек просты. Если вам нужен более подробный список, вот документация. Второй — файл _config.yml вашей темы. Он содержит настройки для конкретной темы и должен быть очень простым.

Написать сообщение в блоге очень просто, чтобы создать сообщение, запустите hexo new <title>. Это создаст файл уценки в исходной папке. Если вы раньше не использовали уценку, есть отличное руководство здесь. Когда вы будете довольны своим сообщением в блоге, вы можете преобразовать его в статический HTML с помощью hexo generate.

Развертывание с помощью Hexo также очень просто. Команда — hexo deploy, но вам нужно будет указать, куда вы хотите выполнить развертывание, в файле _config.yml. Для S3 формат следующий:

deploy:
  type: s3
  bucket: myCoolBlog.com
  aws_key: XXXXXXXXXXXXXXXXXX
  aws_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

S3

Чтобы развернуть свой hexo-блог (или любые статические файлы) на веб-сайте, размещенном на S3, первое, что вам нужно, — это ведро. У меня есть 2 ведра, одно с именем www.keithcaulkins.com, а другое keithcaulkins.com. Это делается для того, чтобы я мог обслуживать оба домена (обратите внимание, что корзина www.keithcaulkins.com пуста, я просто использую перенаправление. Для этого вам нужно настроить статический хостинг веб-сайтов как Перенаправление запросов).

Убедитесь, что ваши ведра доступны для всех. Я использую эту политику:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.MyCoolBlog.com/*"
        }
    ]
}

В главном сегменте перейдите в свойства и нажмите «Статический хостинг веб-сайтов». Выберите «Использовать это ведро для размещения веб-сайта» и поместите индексный документ как index.html. Нажмите «Сохранить», и на данный момент все готово!

Затем вам нужно создать размещенную зону в Route 53. Создайте ее для своего домена (например, keithcaulkins.com), и она уже должна иметь записи NS и SOA по умолчанию. Нажмите «создать набор записей» и выберите запись типа А. Нажмите «да» рядом с полем «Псевдоним» и в качестве цели введите имя своего сегмента. Если вы решите использовать CloudFront, это будет ваш дистрибутив CloudFront (например, xxxxxxxx.cloudfront.net).

Если вы хотите, чтобы www. перенаправлял на корневой домен, как я, настройте запись CNAME со значением вашего базового URL-адреса (например, keithcaulkins.com).

CloudFront

CloudFront кэширует мусор из статических файлов и ресурсов. Это может быстро дорого обойтись, но стоит знать, как его использовать!

Все, что вам нужно сделать, это создать новый веб-дистрибутив. Большинство настроек можно оставить по умолчанию, но важным является правильная установка CNAMES (например, www.keithcaulkins.com и keithcaulkins.com) и путь к источнику {bucket_name}.s3-website-{region}.amazonaws.com. Вот и все!

Бонус

SSL! AWS предлагает 100 % бесплатных сертификатов для доменов под Route 53. Эта служба называется «Менеджер сертификатов», и это одна из самых простых в использовании служб AWS. Все, что вам нужно сделать, это нажать кнопку «Запросить сертификат», ввести ваши доменные имена и трижды нажать синюю кнопку «Продолжить».

Как только они одобрят ваш запрос, вернитесь в CloudFront, нажмите на свой дистрибутив, нажмите кнопку редактирования, выберите переключатель «Пользовательский SSL-сертификат», а затем используйте раскрывающийся список, чтобы выбрать созданный вами сертификат. Вы также можете настроить его так, чтобы вы обслуживали только HTTPS-трафик, перейдя к поведению и выбрав «Перенаправить HTTP на HTTPS».