serverless static site

Размещение статического сайта с помощью AWS и Serverless Framework

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

Сервисы AWS, используемые в этом приложении.

• S3 - Для хостинга
• CloudFront — для CDN
• Route53 — для DNS
• Диспетчер сертификатов — для сертификата HTTPS
• API-шлюз — для API
• Lambda — для сохранения данных контактной формы
• DynamoDB — для базы данных
• SNS — для отправки электронного письма автору, когда кто-то отправляет контактное сообщение.

Конфигурация доменного имени Route53

Для этой демонстрации я использую свое доменное имя Namecheap, направленное на Amazon Route53, чтобы я мог без лишних хлопот использовать сертификацию HTTPS. Вы можете перейти по этой ссылке, чтобы настроить перенаправление Namecheap на Route53 и ACM для сертификата SSL.

Чтобы использовать сертификат ACM с Amazon CloudFront, необходимо запросить или импортировать сертификат в регионе Восток США (Сев. Вирджиния).

Примечание. Убедитесь, что имя корзины S3 соответствует вашему доменному имени. Например, мое доменное имя — newarc.io , поэтому я настроил имя своего сегмента как newarc.io .

https://benjamincongdon.me/blog/2017/06/13/How-to-Deploy-a-Secure-Static-Site-to-AWS-with-S3-and-CloudFront/

Развертывание

Перед развертыванием создайте файл config.dev.json из файла sample.config.json и задайте значения.

 {
    "BUCKET_NAME": "S3 bucket name. For example, mysite.com",
    "TABLE_NAME": "DynamoDB table name",
    "CONTACT_RECEIVED_TOPIC": "contact-received-email",
    "FORWARD_EMAIL": "Email where you want to receive contact message",
    "ACM_CERT_ARN": "arn:aws:acm:us-east-1:<AWS ACCOUNT>:certificate/<CERTIFICATION ID>",
    "HOSTED_ZONE_ID": "Route53 Hosted Zone ID" 
}

Запустите команду sls deploy , чтобы развернуть изменения в AWS.

Публикация контента сайта

Чтобы внести изменения, специфичные для сайта (Html, CSS, JS и т. д.)

 aws s3 sync app/ s3://<bucket name>

Инвалидация кэша CloudFront

После развертывания службы, если вы просто вносите изменения на свой сайт. Дистрибутиву CloudFront потребуется некоторое время для обновления кэшированного содержимого. Чтобы немедленно обновить CloudFront, вам необходимо invalidate кеш.

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

 aws cloudfront create-invalidation --distribution-id <ID> --paths /*

Для получения более подробной информации ознакомьтесь с документацией здесь — https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html.

Подписка по электронной почте в социальных сетях

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

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

Для более подробной информации ознакомьтесь с документацией здесь — https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html.

Очистить

Сначала очистите содержимое сегмента сайта.

 aws s3 rm s3://<bucket name> --recursive

Удалить стек приложения

 sls remove --profile <your profile> --aws-region <region>

Лицензия

Лицензия MIT

Copyright (c) 2021 Дхавал Нагар