Hospede um site estático

hospede seu site de marketing ou aplicação Web simples na AWS

Introdução

Os sites estáticos fornecem HTML, JavaScript, imagens, vídeo e outros arquivos aos visitantes do site. Os sites estáticos são muito econômicos, oferecem altos níveis de confiabilidade, não exigem praticamente nenhuma administração de TI e sua escala pode ser alterada para processar tráfego de nível corporativo sem trabalho adicional.

Confira as perguntas frequentes para obter mais informações >>

O que você aprenderá

  • Hospedar um site estático usando o AWS Amplify no Console AWS. O AWS Amplify oferece hospedagem totalmente gerenciada para sites estáticos e aplicativos Web. A solução de hospedagem do Amplify usa o Amazon CloudFront e o Amazon S3 para enviar os ativos do seu site pela rede de entrega de conteúdo (CDN) da AWS.
  • Configurar a implantação contínua: o Amplify oferece um fluxo de trabalho baseado no Git com implantação contínua, possibilitando que você implante automaticamente atualizações no seu site cada vez que você confirmar as alterações.

 Experiência com a AWS

Iniciante

 Tempo para a conclusão

10 minutos

 Custo para a conclusão

O custo total da hospedagem do seu site estático na AWS depende do seu uso.

Para obter um detalhamento dos serviços usados e dos custos associados, consulte os preços do AWS Amplify e do Amazon Route 53

 Pré-requisitos do tutorial

 
[*] Talvez as contas criadas nas últimas 24 horas ainda não tenham acesso aos serviços necessários para este tutorial.

Implementação

  • Crie e conecte o repositório

    Para começar esse tutorial, você precisará criar e inicializar um repositório. A maneira mais fácil de fazer isso é usando o comando create-react-app. Instale este pacote usando o comando a seguir no prompt de comando ou terminal.

    Já tem um repositório para conectar? Pule para a etapa C abaixo.
    Quer implantar sem se conectar a um provedor Git? Comece clicando aqui.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    Nesta etapa, você criará um repositório do GitHub e confirmará o seu código no repositório. Você precisará de uma conta no GitHub para concluir esta etapa. Se você não tiver uma conta, inscreva-se aqui.

    a. Crie um novo repositório GitHub para o seu aplicativo (link)

    Front End GitHub Repository Module 1

    b. Inicialize o git e envie a aplicação ao novo repositório do GitHub executando os seguintes comandos na interface da linha de comandos:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. Para conectar seu repositório, faça login no Console do Amplify e escolha a opção Get Started (Comece a usar) em Deploy (Implantar).

    1-gettingstarted

    Conecte seus repositórios GitHub, Bitbucket, GitLab ou AWS CodeCommit. Você também pode fazer upload manual de seus artefatos de compilação sem conectar um repositório Git (consulte Implantações manuais). Depois de autorizar o Console do Amplify, o Amplify busca um token de acesso do provedor de repositório, mas não o armazena nos servidores da AWS. O Amplify acessa seu repositório usando as chaves de implantação instaladas apenas em um repositório específico.

    2-connectrepository

    Depois de você se conectar ao provedor de serviços de repositório, escolha um repositório e selecione uma ramificação correspondente para compilar e implantar.

    3-repositorybranch
  • Confirme as configurações de compilação

    Para a ramificação selecionada, o Amplify inspeciona seu repositório para detectar automaticamente a sequência de comandos de compilação a ser executada. Confirme suas configurações de compilação e clique em Next (Avançar).

    next-host
  • Salve e implante

    Confira todas as configurações para garantir que tudo está definido corretamente. Escolha Save and deploy (Salvar e implantar) para implantar seu aplicativo Web para uma rede de entrega de conteúdo (CDN) global. Sua compilação de front-end normalmente leva de 1 a 2 minutos, mas pode variar com base no tamanho do aplicativo.

    8-saveanddeploy

Este tutorial foi útil para você?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Hospedar um site estático com o Amazon S3

Você também pode usar o Amazon S3 para hospedar seu site estático. Hospedar um site estático no Amazon S3 proporciona um site altamente escalável e de alto desempenho por uma fração do custo de um servidor Web tradicional.

Para hospedar um site estático no Amazon S3, configure um bucket do Amazon S3 para hospedagem e faça upload do conteúdo do seu site. Usando o Console de Gerenciamento da AWS, você pode configurar seu bucket do Amazon S3 como um site estático sem programar qualquer código. Dependendo dos requisitos do seu site, você também pode usar algumas configurações opcionais, incluindo redirecionamentos, registro em log de tráfego da Web e documentos de erros personalizados.

Para obter mais informações sobre como hospedar um site estático no Amazon S3, incluindo instruções e demonstrações passo a passo, consulte o guia de implementação.

Parabéns!

Você criou uma aplicação Web estática na AWS com êxito! Como um próximo passo importante, aprofunde-se no AWS Amplify e confira o conjunto completo de ferramentas e serviços para desenvolvimento de aplicativos móveis e Web na AWS.