Implementação

• Selecionar uma região

  Esta aplicação Web pode ser implantada em qualquer região da AWS que ofereça suporte a todos os serviços usados nesta aplicação, o que inclui o AWS Amplify, o AWS CodeCommit, o Amazon Cognito, o AWS Lambda, o Amazon API Gateway e o Amazon DynamoDB.

  Você pode consultar a Lista de serviços regionais da AWS para ver em quais regiões há suporte para os serviços. Entre as regiões compatíveis que você pode escolher estão:

  • Leste dos EUA (Norte da Virgínia)
  • Leste dos EUA (Ohio)
  • Oeste dos EUA (Oregon)
  • UE (Frankfurt)
  • UE (Irlanda)
  • UE (Londres)
  • Ásia-Pacífico (Tóquio)
  • Ásia-Pacífico (Seul)
  • Ásia-Pacífico (Sydney)
  • Ásia-Pacífico (Mumbai)

  Selecione a região no menu vertical no canto superior direito do Console de Gerenciamento da AWS.
  

  

• Criar um repositório git

  Você tem duas opções para gerenciar o código-fonte deste módulo: o AWS CodeCommit (incluído no nível gratuito da AWS) ou o GitHub. Neste tutorial, usaremos o CodeCommit para armazenar o código da nossa aplicação, mas você pode fazer o mesmo criando um repositório no GitHub.

  1. Se você nunca configurou a AWS CLI em sua máquina local, abra uma janela de terminal para instalar a AWS CLI. As instruções de instalação variam de acordo com o sistema operacional que você está usando. Se você já tiver a AWS CLI instalada e configurada, vá para a Etapa 2.
  2. Abra o console do AWS CodeCommit.
  3. Escolha Criar repositório.
  4. Digite wildrydes-site como nome do repositório.
  5. Escolha Criar.
  6. Depois que o repositório for criado, configure um usuário do IAM com credenciais do Git no console do IAM. Siga as instruções da Etapa 1 à Etapa 3 na página Setup for HTTPS users using Git credentials do Guia do usuário do AWS CodeCommit. 
     Observação importante: ao configurar seu usuário no console do IAM, você precisará configurar e salvar dois conjuntos de credenciais para consultar novamente.
     1. Você deve criar Chaves de acesso na guia IAM > Credenciais de segurança. Baixe os IDs da Chave de acesso e da Chave de acesso secreta ou copie e salve-as em um local seguro.
     2. Você também deve gerar credenciais HTTPS Git para o AWS CodeCommit. Baixe ou salve também essas credenciais geradas.
  7. Na janela do terminal que você usou para instalar a AWS CLI, digite o comando: aws configure
  8. Insira o ID da chave de acesso da AWS e a Chave de acesso secreta que você criou na etapa 6. 
  9. Em Nome da região padrão, insira a região que você selecionou inicialmente para criar seu repositório do CodeCommit.
  10. Deixe Formato de saída padrão em branco e pressione Enter. 

  O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal.

  % aws configure
  AWS Access Key ID [****************]: #####################
  AWS Secret Access Key [****************]: ###################
  Default region name [us-east-1]: us-east-1
  Default output format [None]: 

  Code snippet copied

  Copiar

      11. Configure o assistente de credenciais git config na janela do terminal.

  • Se você tiver uma máquina Linux, macOS ou UNIX, consulte as instruções da Etapa 3: Configurar o assistente de credenciais para Linux, macOS ou UNIX.
  • Se você tiver uma máquina Windows, consulte as instruções da Etapa 3: Configurar o assistente de credenciais para Windows.

  git config --global credential.helper '!aws codecommit credential-helper $@'
  git config --global credential.UseHttpPath true

  Code snippet copied

  Copiar

      12. Volte para o console do AWS CodeCommit e selecione o repositório wildrydes-site.

      13. Selecione Clonar HTTPS na lista suspensa URL do clone para copiar o URL HTTPS. 

  

      14. Na janela do seu terminal, execute git clone e cole o URL HTTPS do repositório. 

  O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal:
  
  

  $ git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
  Cloning into ‘wildrydes-site’...
  Username for ‘https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit username you generated in Step 6
  Password for ‘https://[email protected]/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit password you generated in Step 6
  warning: You appear to have cloned an empty repository.

  Code snippet copied

  Copiar

  Haverá um aviso de que você parece ter clonado um repositório vazio, isso é esperado. 

  Para obter correções comuns para erros gerados ao clonar o repositório, consulte Troubleshooting the credential helper and HTTPS connections to AWS CodeCommit. 

• Preencha o repositório Git

  Depois de usar o AWS CodeCommit ou o GitHub.com para criar seu repositório git e cloná-lo localmente, você precisará copiar o conteúdo do site de um bucket do S3 existente e acessível publicamente associado a este tutorial e incluir o conteúdo em seu repositório.
  

  1. Mude o diretório para o seu repositório e copie os arquivos estáticos do S3 usando os seguintes comandos (certifique-se de alterar a região no comando a seguir para copiar os arquivos do bucket do S3 para a região selecionada no início deste tutorial):
     cd wildrydes-site
     aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
  2. Adicione, confirme e envie os arquivos git. 

  O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal:

  $ git add .
  $ git commit -m "new files"
  $ git push
  
  Counting objects: 95, done.
  Compressing objects: 100% (94/94), done.
  Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
  Total 95 (delta 2), reused 0 (delta 0)
  To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
  * [new branch] master -> master

  Code snippet copied

  Copiar
• Habilite a hospedagem Web com o console do AWS Amplify

  A seguir você usará o console do AWS Amplify para implantar o site que você acabou de confirmar no git. O console do Amplify cuida do trabalho de configurar um lugar para armazenar o código estático de sua aplicação Web e fornece vários recursos úteis para simplificar o ciclo de vida dessa aplicação e também habilitar as melhores práticas.

  1. Abra o console do AWS Amplify. 
  2. Escolha Comece a usar. 
  3. No cabeçalho Amplify Hosting hospeda sua aplicação Web, escolha Comece a usar. 
  4. Na página Comece a usar o Amplify Hosting, selecione AWS CodeCommit e escolha Continuar.
  5. Na etapa Adicionar ramificação do repositório, selecione wildrydes-site no menu suspenso Selecionar um repositório.
  6. Se você usou o GitHub, precisará autorizar o AWS Amplify em sua conta do GitHub.
  7. No menu suspenso Ramificação, selecione master e escolha Avançar. 

  

      8. Na página Configurações de compilação, deixe todos os padrões, selecione Permitir que o AWS Amplify implante automaticamente todos os arquivos hospedados no diretório raiz do seu projeto e escolha Avançar.

      9. Na página Revisar, selecione Salvar e implementar.

      10. O console do Amplify leva alguns minutos para criar os recursos necessários e implantar seu código.
  

  Depois de concluído, selecione a imagem do site ou o link abaixo da miniatura para iniciar seu site Wild Rydes. Se você selecionar o link para master, verá os detalhes de construção e implantação relacionados à sua ramificação. 
  

  

  

• Modifique seu site

  O console do AWS Amplify recompilará e reimplantará a aplicação quando detectar alterações no repositório conectado. Faça uma alteração na página principal para testar esse processo.

  1. Em sua máquina local, navegue até a pasta wildrydes-site e abra o arquivo index.html em um editor de texto de sua escolha. 
  2. Modifique a linha de título com o seguinte texto: <title>Wild Rydes - Rydes of the Future!</title>
  3. Salve o arquivo. 
  4. Na janela do terminal, adicione, confirme sua alteração e envie a alteração para o repositório git novamente. O console do Amplify começará a criar o site novamente assim que detectar a atualização no repositório. Isso acontecerá muito rápido! Volte para o console do AWS Amplify para observar o processo.

  O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal: 

  $ git add index.html 
  $ git commit -m "updated title"
  [master dfec2e5] updated title
   1 file changed, 1 insertion(+), 1 deletion(-)
  
  $ git push
  Counting objects: 3, done.
  Compressing objects: 100% (3/3), done.
  Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
  Total 3 (delta 2), reused 0 (delta 0)
  remote: processing 
  To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
     2e9f540..dfec2e5  master -> master

  Code snippet copied

  Copiar

      5. Depois que o Amplify concluir a reimplantação, reabra o site Wild Rydes e observe a mudança no título da guia.

   

  

• Recapitulação

  Neste módulo, você criou um site estático que será a base de sua empresa Wild Rydes. O console do AWS Amplify pode implantar sites estáticos seguindo um modelo de integração e entrega contínuas. Ele tem meios para compilar aplicações mais complexas baseadas na estrutura de trabalho do Javascript e recursos como implantações de ramificações de atributos, fácil configuração de domínio personalizado, implantações instantâneas e proteção por senha.