Neste módulo você vai configurar o AWS Amplify para hospedar os recursos estáticos de sua aplicação Web com implantação contínua integrada. O console do Amplify fornece um fluxo de trabalho baseado em git para implantação e hospedagem contínuas de aplicativos Web completos. Nos módulos subsequentes, você adicionará uma funcionalidade dinâmica a essas páginas usando o JavaScript para chamar APIs RESTful remotas criadas com o AWS Lambda e o Amazon API Gateway.
A arquitetura deste módulo é bastante simples. Todo o conteúdo Web estático, incluindo HTML, CSS, JavaScript, imagens e outros arquivos, será gerenciado pelo console do AWS Amplify. Assim, os usuários finais acessarão o site usando um URL do site público exposto pelo console do AWS Amplify. Você não precisa executar nenhum servidor Web ou usar outros serviços para disponibilizar seu site.
Para a maioria dos aplicativos reais, é usado um domínio personalizado para hospedar seu site. Se você estiver interessado em usar seu próprio domínio, siga as instruções para configurar um domínio personalizado no Amplify.
Tempo de conclusão do módulo: 15 minutos
Serviços utilizados: AWS Amplify
Siga as instruções passo a passo abaixo para hospedar um site estático. Clique no número de cada etapa para expandir a seção.
-
Etapa 1. Selecione 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 tabela de regiões para ver quais regiões têm os serviços compatíveis. Entre as regiões compatíveis que você pode escolher estão:
- Leste dos EUA (Virgínia do Norte)
- 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.
(Clique para aumentar)
-
Etapa 2: Crie 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.
a. Abra o console do AWS CodeCommit
b. Selecione Criar repositório
c. Defina o campo Nome do repositório* como “wildrydes-site”
d. Selecione Criar
e. Agora que o repositório foi criado, configure um usuário do IAM com as credenciais do Git no console do IAM seguindo estas instruções.
f. Novamente no console do CodeCommit, no menu suspenso Clonar URL, selecione Clonar HTTPS
g. Em uma janela de terminal, execute o clone do git e o URL HTTPS do repositório:
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Clonando para 'wildrydes-site'...
Nome de usuário para 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
Senha para 'USERID': XXXXXXXXXXXX
Aviso: parece que você clonou um repositório vazio.
-
Etapa 3: 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 workshop e incluir o conteúdo em seu repositório.
a. Altere o diretório em sue repositório e copie os arquivos estáticos do S3:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Confirme os arquivos em seu serviço Git
$ git add .
$ git pushCounting 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
-
Etapa 4: 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.
a. Abra a página do console do Amplify
b. Clique em Comece a usar em Implantar com o console do Amplify
c. Selecione o provedor do serviço de repositório usado hoje e selecione Próximo
d. Se você usou o GitHub, precisará autorizar o AWS Amplify em sua conta do GitHub
e. No menu suspenso, selecione o Repositório e ramificação recém-criados
e. Na página “Definir configurações de compilação”, deixe todos os valores como padrão e selecione Próximo.
f. Na página “Revisar”, selecione Salvar e implementar
g. O console do Amplify leva alguns minutos para criar os recursos necessários e implantar seu código.
Com o processo concluído, clique na imagem do site para iniciar seu site Wild Rydes.
Se você clicar no link Mestre, verá os detalhes da compilação e da implantação relacionados à sua ramificação e as capturas de tela do aplicativo em vários dispositivos:
-
Etapa 5: Modifique seu site
O console do AWS Amplify recompilará e reimplantará o aplicativo quando detectar alterações no repositório conectado. Faça uma alteração na página principal para testar esse processo.
a. Abra a página “index.html” e modifique a linha de título para: <title>Wild Rydes - Rydes of the Future!</title>
b. Salve o arquivo e confirme-o em seu 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 a página do console do Amplify para observar o processo.
$ 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
c. Com o processo concluído, reabra o site Wild Rydes e observe a mudança no título.
-
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 facilita muito a implantação de 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 recursos, fácil configuração de domínio personalizado, implantações instantâneas e proteção por senha.
