Como hospedar um web page sem servidor com AWS CloudFront e S3

Se você deseja executar um web page na AWS, talvez nem exact de um servidor! O CloudFront CDN da AWS pode fornecer conteúdo da Internet estático diretamente de um bucket do S3, deixando você pagando 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, geralmente com uma solução de plataforma como serviço, como o App Runner da AWS ou o Lambda Purposes. Embora você possa executar um aplicativo standard como o NGINX em uma máquina digital EC2, geralmente pode servir o mesmo tipo de aplicativo sem executar servidores.

Essa solução sem servidor específica united states o Easy Garage Provider (S3) da AWS para hospedar o conteúdo estático de um web page, em vez de precisar servi-lo de um servidor NGINX por conta própria. “Estático” significa apenas que você está servindo arquivos e não gerando páginas, o que inclui tanto websites HTML + CSS simples, quanto aplicativos Internet 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 websites terão apenas conteúdo estático.

O benefício dessa solução é a dependência 0 de seus próprios servidores — o S3 sempre responderá às solicitações, para que você possa ter quantas pessoas quiser acessando seu web page. Na frente do S3, você pode usar o CloudFront, a solução Content material Supply Community (CDN) da AWS. O CloudFront executa centenas de caches de borda, que fazem todas as solicitações de cache ao S3 para você, aumentando a latência e a taxa de transferência e reduzindo os custos.

Nesta configuração de rede, tudo que lida com solicitações de usuários é totalmente 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 da Internet, provavelmente poderá usar outras ferramentas sem servidor, como o Lambda Purposes, para conseguir isso. Essa configuração é ainda melhor, porque as solicitações ao S3 e à API serão dimensionadas separadamente.

Se quiser saber mais sobre como usar o API Gateway como front-end para Lambda Purposes, leia nosso guia sobre como configurá-lo.

Apesar de ser simples, essa é realmente uma boa configuração de nível empresarial para hospedar conteúdo estático na AWS. Ele será confiável, dimensionará perfeitamente e poderá até ser usado com uma implantação automática do CodePipeline para atualizar seu web page a partir de seus arquivos de origem.

RELACIONADO: Como usar o API Gateway da AWS como front-end para funções do Lambda

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

Quanto custa isso?

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

No entanto, há uma boa possibilidade de que isso seja apenas gratuitamente. O “nível sempre gratuito” da AWS inclui 100 GB de largura de banda e um terabyte inteiro de largura de banda do CloudFront. Para comparação, a maioria dos outros níveis gratuitos de serviços de hospedagem de websites estáticos (como Github Pages e Firebase) fornecerão cerca de 10 GB.

1 TB de largura de banda de graça é certamente muito bom, pois significa que a maioria dos websites que não estão servindo toneladas de conteúdo terão um grande buffer antes de serem cobrados valores significativos.

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

Configurando um web page estático de bucket do S3

Para começar, vá para o S3 Control Console e crie um novo bucket. Você deve 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 websites estáticos. Porque é exatamente isso que estamos fazendo, você pode ignorar isso, mas você definitivamente não vai querer carregar segredos para o bucket — tudo será legível.

Isso apenas take away o bloco; você também terá que permitir explicitamente leituras públicas com uma política de bucket, em “Permissões”. Certifique-se de substituir o nome do recurso aqui pelo bucket correto.

  "Model":"2012-10-17",
  "Remark":[
    
    	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
    	"Principal": "*",
        "Action":["s3:GetObject"],
        "Useful 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 native. Você também pode configurar esse bucket como a saída para uma implantaçã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 add de um create-react-app modelo. Uma vez sincronizado, você verá o index.html no balde S3.

aws s3 sync . s3://bucket-name

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

Depois de concluído, você verá o endpoint do web page nas propriedades.

Conectando uma CDN do CloudFront
O CloudFront tem muitas opções, mas as configurações padrão funcionarão bem para um web page S3 simples, portanto, a configuração é bastante fácil.  Vá até 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 que é gerenciado por meio do AWS Certificates Supervisor (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 Path 53 da AWS.

É claro que 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.  Depois de concluído, você poderá visitar o endpoint do CloudFront ou seu domínio personalizado e ver seu web page veiculado a partir do bucket do S3.