Рубрики
Uncategorized

Как построить бесплатное статическое резюме с AWS S3, CloudFront и маршрутом 53

Forrest Beaveal, AWS Serverless Hero, который я следую в Twitter, недавно Tweeted о #cloudresum … Помечено с AWS, DEVOPS, GIT, S3.

Форрест Бейаль , AWS Serverless Hero, который я следую в Twitter, недавно написал в Tweeted о #CloudresumeChallenge, чтобы построить сайт резюме, используя AWS. В ответ FORREST будет использовать свою сеть, чтобы помочь всем, кто завершил вызов, приземляется на работу. Удивительная сделка! У меня уже есть это опыт (который дисквалифицирует меня) Но я подумал, что это будет весело построить сайт в любом случае и написать сообщение о том, как я это сделал.

Он ввигал об этом здесь

Задача установила некоторые правила для сайта:

  • Резюме должно быть написано в HTML и в стиле с CSS
  • Развернут как статический сайт Amazon S3
  • Должно быть доступным через HTTPS
  • Иметь пользовательское доменное имя
  • Включите счетчик посетителей JavaScript
  • Количество посетителей, хранящееся на Dynamodb
  • Сайт должен взаимодействовать с DynamOdb через Lambda и API Gateway
  • Ломбда и шлюз API должны быть развернуты с AWS Sam Cli
  • Сайт автоматически обновляется на push to github

Настройка содержимого сайта

Хорошо, давайте начнем с контента. Поскольку я не в этом за сеть, я не думал, что это значило значительно развивать еще один личный сайт для этой проблемы. Я сделал это на Алан Turing вместо. Почему? Потому что он круто, и никто из нас не сможет смотреть на это без него.

Во всяком случае, создайте пустое REPO GIT.

git clone git@github.com:seanziegler/AlanTuringResume.git

Я ненавижу HTML и CSS, поэтому я украл хороший маленький шаблон резюме из этого CSS-Tricks Статья Отказ

Первоначально он был основан на CTHULU, которая …. было немного странно, но хорошо. После некоторых исследований Wikipedia и небольшой передний спотк, у меня было чистую одностраничное возобновление сайта о разработанном алантере.

Ну, это делает мое резюме выглядеть слабым.

Создайте статический сайт S3

Хорошо, на более интересной части, задний конец. Первое требование сайта — это статический сайт, размещенный AWS S3.

Первое, что нам нужно, это ведро S3. Вам нужно будет настроить AWS CLI, если вы еще этого не сделали.

aws s3 mb s3://turingresume

Скопируйте все файлы для своего сайта в ведро. Координационная страница вашего сайта (часто index.html) должна быть на корневом уровне ведра S3.

aws s3 cp  s3://turingresume --recursive

Последний Сделайте S3, что это должно быть статический веб-сайт, а не нормальное ведро.

aws s3 website s3://turingresume --index index.html

Убедитесь, что ваш сайт доступен. Вы можете получить доступ к нему в http://"Bucketname" .s3-сайт - "Bucketregion" .Amazonaws.com/

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

Купить домен

Мы в пути 53, где вы можете приобрести домен изнутри консоли AWS. К сожалению, Alantughing.com не был доступен, поэтому я пошел с гораздо дружелюбным heyitsalan.com. Позже я понял, что он очень похож на «Эй, его сатана», который несчастный, но я уже заплатил за домен, и я не сделаю из денег.

Хорошо, это не лучший домен, но это работает.

Хорошо, это все, что мы можем сделать в маршруте 53 на данный момент.

Создайте сертификат SSL в ACM

Поскольку мы будем обслуживать сайт через HTTPS, нам понадобится сертификат SSL. К счастью, диспетчер сертификата AWS делает его простым для создания сертификата.

Убедитесь, что вы запросите сертификат для * .yourdomain.com Таким образом, оно охватывает все подгруппы (особенно варианты www и non www вашего URL).

Вам необходимо добавить запись TXT в записи DNS вашего домена, чтобы доказать, что у вас есть.

Валидация DNS доказывает, что вы владеете доменом, охваченным сертификатом SSL.

Если вы купили свой домен на Trance53, как я, вы можете просто щелкнуть кнопку «Добавить DNS-записи на кнопку Trowber53». Если вы на другом хосте, вам придется посмотреть на их документацию.

Как только AWS сертификат Manager видит DNS-запись и знает, что у вас есть домен, он выдаст ваш сертификат SSL.

Создать распределение CloudFront

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

Вам также необходимо добавить свой домен в качестве альтернативного CNAME в распределении CloudFront и импортируйте сертификат SSL, который вы генерируете ранее.

Не забудьте добавить * перед вашим доменом, так что все подделки перенаправляются здесь.

Выпустите Route53 и отправляйтесь в записи DNS для домена, который вы зарегистрированы. Мы добавим запись CNAME Alias, которые указывают на доменное имя для распределения CloudFront, созданного ранее.

Теперь вы можете проверить свой домен и посмотреть, работает ли он (хотя вам может потребоваться подождать несколько минут для сайта, чтобы пропагандировать через метки CloudFront).

Другое требование вниз.

Разверните таблицу dynamodb с облачными

Поскольку наша задача проблем вызывает таблицу Dynamodb, чтобы удерживать счетчик посетителей, я буду использовать облачность. Облачная информация — это отличный продукт для развертывания ресурсов AWS и делает жизнь намного проще, когда вам нужно обновить или управлять своими ресурсами позже.

Это супер простая таблица dynamodb. Честно говоря, я не уверен, что это хорошее использование DynamOdb, но проблему заявления призывает к нему, поэтому кто я собираюсь спорить?

AWSTemplateFormatVersion: "2010-09-09"
Resources: 
  TuringResumeCounterDynamodb: 
    Type: AWS::DynamoDB::Table
    Properties: 
      AttributeDefinitions: 
        - 
          AttributeName: "Site"
          AttributeType: "N"
      KeySchema: 
        - 
          AttributeName: "Site"
          KeyType: "HASH"
      ProvisionedThroughput: 
        ReadCapacityUnits: "1"
        WriteCapacityUnits: "1"
      TableName: "turingresumecounter"

Развертывание это одна команда CLI AWS (я люблю облачность!).

aws cloudformation deploy --template-file dynamodb.yml --stack-name turingresumecounter

Я создам один атрибут для удержания подсчета посетителей.

aws dynamodb put-item --table-name turingresumecounter --item '{"Site":{"N":"0"}, "Visits": {"N": "0"}}'

Отлично, теперь я могу прочитать и писать из этого атрибута, чтобы отслеживать количество посетителей. Я не думаю, что это хорошее решение, если вы работаете в настройке производства, поэтому я мог бы восстановить это позже.

Разверните API без сервера с помощью шлюза лямбда и API

Сайт все еще нужен некоторый интерфейс для связи с Dynamodb. Я собираюсь реализовать это с Lambda и Gateway API, поскольку они являются фактическими стандартами для APIS без прослушивания на AWS. Я большой поклонник шлюза API, потому что он делает его ветером для установки пределов скорости, дросселирования и другие метрики плана использования для вашего API.

Облачная информация велика, но это может быть медведь, чтобы использовать при развертывании серверусных ресурсов. AWS делает компаньонный продукт под названием Сэм Кли Отказ SAM CLI предназначен для облегчения развертывания ресурсов без сервеса и идеально подходит для использования нашего использования.

Первый шаг — создать другой файл YAML, который описывает развертывание.

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Resources:
  Counter:
    Type: AWS::Serverless::Function
    Properties:
      Handler: function.handler
      Runtime: python3.8
      Policies: AmazonDynamoDBFullAccess
      Events:
        HttpGet:
          Type: Api
          Properties:
            Path: '/counter'
            Method: get

Обработчик: Функция. Хандлер Линия выше говорит Сэма, что мы предоставим функцию лямбда в файле с именем function.py С функцией имени обработчик .

обработчик Функция использует SDK AWS для Python под названием BOTO3 Отказ

Обновление: после разговора с Форрестом мы решили, что было бы лучше, если бы будущие участники должны были разработать эти части самостоятельно. Удачи:)

Отлично, теперь, когда мы отправляем запрос на Get API URL-адрес шлюза API, мы увидим счетчик посетителей. Теперь давайте поработаем это на сам сайт.

Вау, кто-то позвонит Google, этот API горячий!

Добавьте счетчик посетителей на сайт

Сайт нужен элемент для отображения счетчика посетителей. Я собираюсь создать HTML, чтобы отобразить количество посетителей и добавить его в нижнюю часть страницы.

Visits: 0

Да, я знаю, что встроенные CSS плохой. Подать в суд на меня. Давайте добавим магию JavaScript к нижнему нижню. Эта функция отправляет запрос GET на конечную точку шлюза API каждый раз, когда страница обновляется. Технически это счетчик просмотров страниц, а не посетителей, но я отвлечет.

Обновление: после разговора с Форрестом мы решили, что было бы лучше, если бы будущие участники должны были разработать эти части самостоятельно. Удачи:)

Cool, давайте проверим страницу.

Хорошо смотритесь.

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

Мы приближаемся к финишной линии! Все, что осталось, — это создание трубопровода в кодепейн, чтобы развернуть наш код в ведро S3, когда мы нажимаем в Git. Я уже писал о Как развернуть из GitHub в EC2 , но поскольку мы собираемся на S3 на этот раз, давайте сделаем быстрый обзор.

Настройка трубопровода.

Я обычно разрешаю AWS создать сервисную роль — намного проще.

Сделайте Git Reppo вашего источника.

Настройка этапа развертывания, которая нажимает файлы на ваше ведро S3.

Наконец, сделали.

Это все, что есть делать! У вас есть полнофункциональный статический S3, который обновляется на Git Push и подается через HTTPS, все для по существу бесплатно.

Окончательный продукт не выглядит слишком плохо для заднего инженера!

Если вам понравился этот контент, следуйте за мной в Twitter, чтобы увидеть больше всего вещей!

Оригинал: «https://dev.to/sean_ziegler/how-to-build-a-free-static-resume-site-with-aws-s3-cloudfront-and-route-53-2hpn»