serverless static site

Hospedar site estático com AWS e Serverless Framework

Este aplicativo cria vários recursos da AWS para hospedar um aplicativo de página única. O aplicativo também possui um Formulário de Contato para salvar os dados de contato em banco de dados e também enviar e-mail ao autor do aplicativo.

Serviços AWS usados ​​nesta aplicação.

• S3 - Para Hospedagem
• CloudFront – Para CDN
• Route53 - Para DNS
• Gerenciador de certificados – para certificado HTTPS
• Gateway de API - Para API
• Lambda - para salvar dados de formulário de contato
• DynamoDB – para banco de dados
• SNS - Para enviar email ao autor quando alguém envia mensagem de contato

Configuração de nome de domínio Route53

Para esta demonstração, estou usando meu nome de domínio Namecheap roteado para Amazon Route53 para que possa usar a certificação HTTPS sem complicações extras. Você pode seguir este link para configurar o redirecionamento Namecheap para Route53 e ACM para o certificado SSL.

Para usar um certificado ACM com o Amazon CloudFront, você deve solicitar ou importar o certificado na região Leste dos EUA (Norte da Virgínia).

Observação: certifique-se de que o nome do seu bucket S3 corresponda ao seu nome de domínio. Por exemplo, meu nome de domínio é newarc.io , então configurei o nome do meu bucket como newarc.io .

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

Implantação

Antes de implementar, crie o config.dev.json a partir do arquivo sample.config.json e configure os valores.

 {
    "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" 
}

Execute o comando sls deploy para implantar as alterações na AWS.

Publicação de conteúdo do site

Para enviar alterações específicas do site (Html, CSS, JS etc.)

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

Invalidação de cache do CloudFront

Depois de implantar o serviço, se você estiver apenas enviando a alteração para o seu site. A distribuição do CloudFront levará algum tempo para atualizar o conteúdo em cache. Para atualizar imediatamente o CloudFront, você precisará invalidate o cache.

Acesse o console do CloudFront, copie o ID de distribuição criado por meio deste serviço e execute o comando a seguir. Observe que o comando a seguir limpará todo o cache. Você também pode limpar os arquivos seletivos usando --paths .

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

Para mais detalhes, verifique a documentação aqui - https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Assinatura de e-mail SNS

Quando alguém preenche o formulário de contato na IU. A API salvará os dados no DynamoDB e também publicará uma mensagem no SNS Topic configurado. O Tópico SNS também possui uma assinatura de Email, onde você pode colocar o email onde deseja receber o detalhe da mensagem.

Depois de implantar o serviço, você receberá o e-mail de confirmação da AWS para ativar sua assinatura. Por favor, siga as instruções no e-mail.

Para mais detalhes consulte a documentação aqui - https://docs.aws.amazon.com/sns/latest/dg/sns-email-notifications.html

Limpar

Limpe primeiro o conteúdo do bucket do site.

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

Remova a pilha de aplicativos

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

Licença

Licença MIT

Direitos autorais (c) 2021 Dhaval Nagar