Projetos na AWS

Crie um aplicativo web moderno

Implante um aplicativo web, estabeleça uma conexão a um banco de dados e analise o comportamento dos usuários

Módulo 1: Criar um site estático

Neste módulo, você hospedará seu site estático no Amazon S3 e configurará seu IDE na nuvem, o AWS Cloud9.  

Visão geral

Neste módulo, hospedaremos o conteúdo estático (html, js, css, media content etc.) do seu site Mythical Mysfit no Amazon S3 (Simple Storage Service). O S3 é um serviço de armazenamento de objetos resiliente, altamente disponível e barato que pode veicular objetos armazenados diretamente via HTTP. Isso o torna extremamente útil para veicular conteúdo web estático a navegadores da web para sites da Internet.

Antes de começarmos a armazenar nossos mysfits no S3, configuraremos o AWS Cloud9 para você. O Cloud9 é um ambiente de desenvolvimento integrado (IDE) que permite escrever, executar e depurar códigos usando apenas um navegador.  

Diagrama de arquitetura

criar um site estático

 Tempo para a conclusão

20 minutos

Instruções de implementação

  • A: Faça login no Console AWS

    Para começar, faça login no Console AWS na conta da AWS que você estará usando neste workshop.

    B: Selecione uma região

    Este aplicativo web pode ser implantado em qualquer região da AWS que seja compatível com todos os serviços usados neste aplicativo. Consulte a tabela de regiões para ver quais regiões têm os serviços compatíveis. As regiões compatíveis incluem:

    • leste dos eua-1 (Norte da Virgínia)
    • leste dos eua-2 (Ohio)
    • oeste dos eua-2 (Oregon)
    • oeste da europa-1 (Irlanda)

    Selecione uma região no menu suspenso no canto superior direito do Console de gerenciamento da AWS.

  • A: Crie um novo ambiente do AWS Cloud9

    Na página inicial do Console AWS, digite Cloud9 na barra de pesquisa de serviço e selecione:

    criar um bot no lex

    (clique para ampliar)

    Clique em Criar ambiente na página inicial do Cloud9:

    criar um bot no lex

    (clique para ampliar)

    criar um bot no lex

    Dê um nome ao seu ambiente MythicalMysfitsIDE com qualquer descrição que você desejar e clique em Próxima etapa:

    criar um bot no lex

    (clique para ampliar)

    criar um bot no lex

    Deixe as configurações de Ambiente nas definições padrão e clique em Próxima etapa:

    criar um bot no lex

    (clique para ampliar)

    criar um bot no lex

    Clique em Criar ambiente:

    criar um bot no lex

    (clique para ampliar)

    criar um bot no lex

    Quando a criação do IDE estiver finalizada, você será presenteado com uma tela de boas-vindas com a seguinte aparência:

    criar um bot no lex

    (clique para ampliar)

    criar um bot no lex
    B: Clone o Repositório do workshop do Mythical Mysfits

    No painel inferior, você verá uma linha de comando de terminal aberta e pronta para ser usada. Execute o seguinte comando git no terminal para clonar o código necessário para a conclusão deste tutorial:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Depois de clonar o repositório, você observará que o explorador do projeto agora inclui os arquivos clonados:

    arquivos clonados

    (clique para ampliar)

    arquivos clonados

    No terminal, mude para o diretório do repositório recém-clonado:

    cd aws-modern-application-workshop
  • A: Crie um bucket do S3 e configure-o para hospedagem de site

    Em seguida, criaremos os componentes de infraestrutura necessários para hospedar um site estático no Amazon S3 por meio da ILC da AWS.

    Primeiramente, você criará um bucket do S3 e substituirá o nome a seguir (mythical-mysfits-bucket-name) pelo nome do seu bucket exclusivo. Observação: consulte os requisitos para nomes de bucket. Copie o nome que escolher e guarde-o para mais tarde, pois ele será usado em vários outros lugares durante este workshop:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Agora que criamos um bucket, precisaremos definir algumas opções de configuração que permitam que o bucket seja usado para a hospedagem de sites estáticos. Essa configuração permite que os objetos do bucket sejam solicitados usando um nome de DNS público registrado para o bucket, além de solicitações diretas do local ao caminho básico do nome de DNS para a página inicial de um site selecionado (index.html, na maioria dos casos):

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Atualize a Política de bucket S3

    Todos os buckets criados no Amazon S3 são totalmente privados por padrão. Para ser usado como site público, é necessário criar uma Política de bucket S3 que indique que objetos armazenados nesse novo bucket podem ser publicamente acessados por qualquer pessoa. As políticas de bucket são representadas como documentos JSON que definem as ações do S3 (chamadas de APIs do S3) que são permitidas (ou não permitidas) a serem executadas por diferentes principais (no nosso caso, o público ou qualquer pessoa).

    O documento JSON para a política de buckey necessária está localizado em: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Esse arquivo contém uma cadeia de caracteres que precisa ser substituída pelo nome do bucket que você escolheu (indicado por REPLACE_ME_BUCKET_NAME).

    Observação: durante este workshop, você abrirá, de maneira semelhante, arquivos cujos conteúdos precisarão ser substituídos (todos terão o prefixo REPLACE_ME_, para facilitar sua detecção usando CTRL-F no Windows ou ⌘-F no Mac.) 

    Para abrir um arquivo no Cloud9, use o Explorador de arquivos no painel esquerdo e dê um clique duplo em website-bucket-policy.json:

    abrir arquivo no Cloud9

    (clique para ampliar)

    abrir um arquivo no Cloud9

    Essa ação abrirá bucket-policy.json no painel do Editor de arquivos. Substitua a cadeia de caracteres mostrada pelo nome escolhido do bucket usado nos comandos anteriores:

    substituir nome do bucket

    (clique para ampliar)

    substituir nome do bucket

    Execute o seguinte comando da ILC para adicionar uma política de bucket pública ao seu site:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Publique o conteúdo do site no S3

    Agora que o novo bucket do site está configurado adequadamente, adicionaremos a primeira iteração da página inicial do Mythical Mysfits ao bucket. Use o seguinte comando da ILC do S3 que imita o comando linux para copiar arquivos (cp) para copiar a página index.html fornecida localmente do seu IDE para o novo bucket do S3 (substituindo adequadamente o nome do bucket).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Agora, abra seu navegador da web e digite um dos URLs a seguir na barra de endereços. Um dos URLs a seguir contém um “.” antes do nome da região, e o outro, um “-”. Qual deles será usado dependerá da região que você estiver usando.

    A cadeia de caracteres que deverá substituir REPLACE_ME_YOUR_REGION deve corresponder à região em que você tiver criado o bucket do S3 (p. ex., leste dos eua-1):

    Para leste dos eua-1 (Norte da Virgínia), oeste dos eua-2 (Oregon), oeste da europa-1 (Irlanda), use:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Para leste dos eua-2 (Ohio), use:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Parabéns, você criou o site estático básico Mythical Mysfits!

    Isso conclui o Módulo 1.

A seguir, hospede seu aplicativo em um servidor web.