Como hospedar um site do S3

Provavelmente, você provavelmente não precisa de um servidor Web completo, como o NGINX, executando o EC2 para colocar seu site em funcionamento. Se você deseja apenas hospedar um site estático, pode armazenar todo o conteúdo no S3 e hospedá-lo a partir daí.

Espere, não preciso de um servidor?

Se o seu site não usa nenhum processamento no servidor (como PHP), basta armazenar os arquivos no S3, configurar o bucket para hospedar o site e apontar seu DNS para o bucket substituirá o uso de NGINX ou Apache.

“ Processamento no lado do servidor ” é muito menos amplo do que parece. Só porque o seu site é "estático" ” não significa que parece uma página GeoCities dos anos 90, sem JavaScript. Tudo o que é "estático" ” significa que todos os seus recursos (páginas HTML, código JS, folhas de estilo CSS) não são alterados em resposta a solicitações. Com linguagens como PHP, todo o processamento é feito no lado do servidor; se dois usuários solicitarem sua página de perfil, o servidor enviará páginas diferentes. Isso não pode ser feito no S3, portanto, se você estiver usando PHP, terá que configurar um servidor web real. Isso se aplica principalmente ao WordPress, que usa PHP para veicular conteúdo.

No entanto, está se tornando cada vez mais comum os sites serem grandes aplicativos JavaScript. Com uma estrutura como React, tudo o que precisa ser entregue é um arquivo bundle. js. É tarefa do cliente, não do servidor, executar esse arquivo e iniciar o aplicativo. Aplicativos como esse podem ser hospedados no S3 sem problemas. Isso não se livra do seu back-end, mas você ainda pode fazer com que seu aplicativo se comunique com um servidor API e fale com um banco de dados; você precisará autenticar solicitações vindas do cliente. Combinado com o API Gateway e o Lambda da AWS, talvez você não precise executar um único servidor EC2.

Não se deixe enganar pela configuração simples - em sites pequenos, o S3 pode reduzir seus custos em centavos por dólar, e, como não há servidores com os quais se preocupar, ele se adapta perfeitamente até o fim. para milhões de usuários. Você simplesmente paga uma taxa fixa pela entrada e saída de largura de banda, além de quaisquer custos associados ao Lambda, RDS ou quaisquer outros serviços que você usa com seu aplicativo. Mesmo para grandes empresas que implantam aplicativos de produção, a hospedagem do S3 é uma opção muito viável e econômica, se o seu aplicativo puder oferecer suporte.

O S3 não oferece suporte a HTTPS para sites estáticos, o que seria um problema, mas você pode colocá-lo atrás do CloudFront (CDN da AWS) que, além de cache e desempenho aprimorados, pode usar um recurso personalizado. domínio com HTTPS. Ele ainda possui um nível gratuito mais generoso para transferência de dados de 50 GB em vez de 1 GB de S3.

Configurando isso

Neste tutorial, em vez de implantar uma simples página HTML, vamos implantar o projeto inicial a partir do create-react-app, pois ele mostra melhor o verdadeiro potencial do S3.

Depois de executar a compilação do fio, ficamos com os seguintes ativos na pasta / build:

Esta pasta inteira será copiada para o S3. Vá para o S3 Management Console e clique em "Criar bloco".

Dê um nome a ele (ele deve ser exclusivo entre todas as contas da AWS) e clique em "Próximo". ” Você pode ativar o controle de versão nas opções aqui, mas não há muito mais a considerar. Clique em “ Next ” novamente.

Na tela seguinte, você deseja desmarcar "Bloquear todo acesso público". Por padrão, está ativado para impedir que os objetos nos buckets sejam visíveis na Internet aberta, o que tornaria seu bucket inacessível. A AWS exibirá um aviso que diz para ativá-lo novamente, a menos que você esteja usando casos de uso específicos e verificados, ” como hospedagem estática de sites. Como isso é exatamente o que estamos fazendo, você pode ignorar isso.

Clique em “ Criar ” no balde e abra-o.

Você pode arrastar manualmente o conteúdo da sua pasta HTML para o bucket, mas um método melhor é usar a CLI da AWS para sincronizar a pasta inteira até o seu bucket. O comando é bem simples:

 aws sincronização s3. s3: // nome do bloco 

Agora, você deve ver o conteúdo da sua pasta no balde:

Depois que tudo estiver sincronizado, você poderá configurar o bucket para permitir a hospedagem do site. Na guia Propriedades, ative o “ Static Website Hosting ” opção e selecione seu arquivo de índice. Você também pode selecionar um arquivo de erro para mostrar aos usuários um 404 mais personalizado.

Ativa a hospedagem estática de sites, mas não concede explicitamente acesso de leitura. Para fazer isso, você precisará adicionar a seguinte política de bucket em Permissões > Política de bucket:

 {"Versão": "17/10/2012", "Instrução": [{"Sid": "PublicReadGetObject", "Efeito": "Permitir", "Principal": "*", " Ação ": [" s3: GetObject "]," Recurso ": [" arn: aws: s3 ::: example-bucket / * "]}]} 

Isso exibirá outro aviso informando que o acesso público está ativado. Você pode novamente ignorar isso.

Agora, seu bucket estará visível no seguinte ponto de extremidade:

 http://BUCKET-NAME.s3-website. REGION. amazonaws. com/ 

Ótimo! Tudo funciona corretamente. O cliente solicita o bucket, que serve o arquivo index. html, que baixa todos os recursos JS e CSS necessários e renderiza o logotipo do React giratório.

No entanto, esse ponto de extremidade obviamente não é fácil de usar, então você provavelmente desejará configurar um domínio personalizado para o seu site S3. O método mais fácil é usar o CloudFront para atender solicitações, que é a única maneira de oferecer suporte a HTTPS de qualquer maneira. Se você não quiser usar o CloudFront, poderá configurar um domínio personalizado usando o Route 53 para usar o alias do terminal padrão do seu bucket.

Vá para o console do CloudFront. Selecione "Criar distribuição", ” e escolha "Web" ” como o tipo Na próxima tela, em "Nome de Domínio de Origem", ” selecione seu bucket S3 no menu suspenso. Verifique também a opção "Redirecionar HTTP para HTTPS".

Mais abaixo, você desejará configurar seu domínio. Digite seu nome de domínio alternativo e selecione "SSL personalizado". ” Solicite um do ACM; pode demorar até meia hora para verificar, dependendo do seu provedor de DNS, mas se você estiver usando o Route 53, poderá criar e verificar o registro automaticamente em alguns minutos.

Depois disso, clique em 'Criar distribuição' ” na parte inferior, e aguarde cerca de 15 minutos para que o CloudFront resolva tudo. Quando terminar, você poderá visitar seu nome de domínio personalizado e ver seu aplicativo veiculado diretamente no S3.

Se você deseja facilitar o gerenciamento de versões, pode configurar um pipeline de implantação automatizado com o AWS CodePipeline. Basta escolher a implantação no S3, e a AWS implantará atualizações de código-fonte automaticamente, incluindo artefatos de construção.

Via: How to Geek