Como hospedar um site sem servidor com AWS CloudFront e S3

0
18


Se você deseja executar um site na AWS, talvez nem precise de um servidor! A CDN do AWS CloudFront pode fornecer conteúdo da Web estático diretamente de um bucket do S3, permitindo que você pague apenas por solicitações e dados transferidos (que podem até ser gratuitos).

Como funciona a hospedagem sem servidor?

“Sem servidor” é o conceito de executar aplicativos sem gerenciar servidores Linux dedicados, normalmente com uma solução de plataforma como serviço, como o App Runner da AWS ou o Lambda Functions. Embora você possa executar um aplicativo normal como o NGINX em uma máquina virtual EC2, geralmente pode servir o mesmo tipo de aplicativo sem executar servidores.

Essa solução sem servidor específica usa o AWS Simple Storage Service (S3) para hospedar o conteúdo estático de um site, em vez de ter que servi-lo você mesmo a partir de um servidor NGINX. “Estático” significa apenas que você está servindo arquivos e não renderizando páginas, o que inclui sites HTML + CSS simples, bem como aplicativos Web JavaScript completos do lado do cliente. Notavelmente, isso exclui estruturas de hospedagem do lado do servidor como WordPress (PHP), Ruby on Rails e ASP.NET, mas muitos sites serão apenas conteúdo estático.

O benefício desta solução é que você não depende de seus próprios servidores: o S3 sempre responderá às solicitações, então você pode ter quantas pessoas quiser acessando seu site. Em vez do S3, você pode usar o CloudFront, a solução de rede de entrega de conteúdo (CDN) da AWS. O CloudFront executa centenas de caches de borda, que solicitam todos os caches do S3 para você, aumentando a latência e o desempenho e reduzindo os custos.

Nesta configuração de rede, tudo o que lida com as solicitações do usuário é completamente sem servidor. Os servidores CloudFront são executados pela AWS e armazenam automaticamente o conteúdo em cache e roteiam os usuários para o endpoint, que é simplesmente um bucket do S3.

Se você precisar executar algum tipo de back-end ou API para conectar seu aplicativo Web, provavelmente poderá usar outras ferramentas sem servidor, como o Lambda Functions, para fazer isso. Essa configuração é ainda melhor, pois as solicitações ao S3 e à API serão dimensionadas separadamente.

Se você quiser saber mais sobre como usar o API Gateway como uma interface para suas funções do Lambda, leia nosso guia sobre como configurá-lo.

Por mais simples que seja, na verdade é uma boa configuração de nível empresarial para hospedar conteúdo estático na AWS. Ele será confiável, dimensionará perfeitamente e pode até ser usado com uma implementação automatizada do CodePipeline para atualizar seu site a partir de seus arquivos de origem.

RELACIONADO: Como usar o AWS API Gateway como uma interface para funções do Lambda

RELACIONADO: Como configurar um pipeline de implantação automatizada para um site S3

Quanto custa este?

Como a hospedagem sem servidor é dimensionada exatamente com o uso, você paga apenas pelo que usa. Isso pode economizar muito dinheiro em servidores ociosos. Geralmente, você paga um pouco mais por hora de CPU em comparação a fazer você mesmo, mas isso geralmente é compensado pelo fato de que você é cobrado de forma justa pelo uso exato.

No entanto, há uma boa chance de que isso seja apenas gratuitamente. O “Always Free Tier” da AWS inclui 100 GB de largura de banda e um terabyte completo de largura de banda do CloudFront. Para comparação, a maioria dos outros níveis gratuitos de serviços de hospedagem de sites estáticos (como Github Pages e Firebase) oferece cerca de 10 GB.

1 TB de largura de banda gratuita é certamente uma coisa boa, pois significa que a maioria dos sites que não veiculam toneladas de conteúdo terão um buffer enorme antes de serem cobrados valores significativos.

No entanto, você ainda será cobrado pelas solicitações do S3, que serão somadas e, se seu site armazenar centenas de GB de conteúdo, você também poderá ver cobranças altas por isso. No entanto, fazer uso efetivo do cache do CloudFront quando possível pode reduzir o número de solicitações necessárias para a origem (S3), e a maioria dos sites será bem pequena.

Configurando um site de bucket estático do S3

Para começar, acesse o S3 Management Console e crie um novo bucket. Você precisa desabilitar “Bloquear acesso público” para que fique visível. A AWS avisa que isso é uma má ideia, exceto para casos de uso como hospedagem de sites estáticos. Como é exatamente isso que estamos fazendo, você pode ignorar isso, mas definitivamente não deseja carregar segredos no bucket; tudo será legível.

Isso simplesmente remove o bloqueio; você também precisará permitir explicitamente leituras públicas com uma política de repositório, em “Permissões”. Certifique-se de substituir o nome do recurso aqui pelo bucket correto.

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

Em seguida, você precisará enviar seu conteúdo. Você pode arrastar e soltar, mas se quiser transferir uma pasta inteira manualmente, poderá usar a AWS CLI para sincronizar um bucket do S3 com um diretório local. Você também pode configurar esse repositório como uma saída para uma implementação do CodePipeline, que pode criar seus artefatos a partir do repositório de origem.

RELACIONADO: Como instalar e configurar a AWS CLI

Usaremos a API do S3 e faremos o upload de uma básica create-react-app modelo. Uma vez sincronizado, você verá o index.html no repositório S3.

aws s3 sync . s3://bucket-name

Antes de estar pronto, você precisará acessar as propriedades do bucket, rolar até o final para encontrar “Static Web Hosting” e ativá-lo. Você precisará configurar o índice e o documento de erro e também poderá escrever regras de redirecionamento aqui.

Uma vez feito, você verá o endpoint do site nas propriedades.

Conectando-se a uma CDN do CloudFront

O CloudFront tem muitas opções, mas as configurações padrão funcionarão bem para um site S3 simples, portanto, configurá-lo é muito fácil. Acesse o console do CloudFront e crie uma nova distribuição.

Você pode definir as configurações do cache, mas o comportamento padrão deve funcionar bem para a maioria das pessoas.

Você precisará conectar seu domínio personalizado, e isso envolve a criação de um certificado SSL gerenciado por meio do AWS Certificate Manager (ACM). Você pode clicar nesse botão para solicitar um certificado, o que pode demorar um pouco para verificar o DNS se você não estiver usando o DNS do AWS Route 53.

Obviamente, você também precisará configurar seu DNS com um registro CNAME apontando para o endpoint do CloudFront.

Depois que seu certificado e DNS estiverem configurados, crie a distribuição e aguarde cerca de 15 minutos para que o CloudFront a implante. Feito isso, você poderá visitar o endpoint do CloudFront ou seu domínio personalizado e ver seu site veiculado a partir do bucket do S3.

teste do site s3