Implemente continuamente um aplicativo web moderno do AWS Amplify a partir de um repositório da AWS CodeCommit

Criado por Deekshitulu Pentakota (AWS) e Sai Katakam (AWS)

Ambiente: PoC ou piloto

Tecnologias: aplicativos web e móveis; DevOps; Modernização

Serviços da AWS: AWS Amplify; AWS CodeCommit

Resumo

Os aplicativos web modernos são criados como um aplicativo de única página (SPA), que empacota todos os componentes do aplicativo em arquivos estáticos. Ao usar o AWS Amplify Hosting, você pode criar um pipeline de integração contínua e implantação contínua (CI/CD) que cria, implanta e hospeda um aplicativo web moderno que é gerenciado em um repositório baseado em Git. Quando você conecta o Amplify Hosting ao repositório de código, cada confirmação inicia um único fluxo de trabalho para implantar o frontend e o backend do aplicativo. O benefício dessa abordagem é que o aplicativo web é atualizado somente depois que a implantação tenha sido concluída com êxito, o que evita inconsistências entre o frontend e o backend.

Nesse padrão, você usa um CodeCommit repositório da AWS para gerenciar seu aplicativo web moderno. O exemplo de aplicativo web nessas instruções usa a estrutura React SPA. No entanto, o Amplify Hosting oferece suporte a muitas outras estruturas de SPA, como Angular, Vue, Next.js, e também oferece suporte a geradores de site único, como Gatsby, Hugo e Jekyll.

Esse padrão é destinado aos builders AWS que têm experiência com os seguintes serviços e conceitos:

• AWS CodeCommit

• AWS Amplify Hosting

• React

• JavaScript

• Node.js

• npm

• Git

Pré-requisitos e limitações

Pré-requisitos

• Uma conta AWS ativa

• Permissões para criar recursos no Amplify e. CodeCommit Para obter mais informações, consulte Identity and Access Management for Amplify e Identity and Access Management for AWS. CodeCommit

• AWS Command Line Interface (AWS CLI), instalada e configurada.

• Um Editor de texto ou Editor de código.

• CodeCommit, configurado para usuários HTTPS usando credenciais do Git.

• Um perfil de serviço do IAM para o Amplify.

• npm e Node.js, instalados (documentação do npm).

Limitações

• Esse padrão não discute o desenvolvimento e a integração de um backend para o aplicativo Amplify, como uma API, autenticação ou banco de dados. Para obter mais informações sobre backends, consulte Criar um backend na documentação do Amplify.

Versões do produto

• AWS CLI versão 2.0

• Node.js versão 16.x ou superior

Arquitetura

Pilha de tecnologias de destino

• CodeCommitRepositório AWS contendo um React SPA

• AWS Amplify Hosting

Arquitetura de destino

Ferramentas

Serviços da AWS

• O AWS Amplify Hosting fornece um fluxo de trabalho baseado em git para hospedar aplicativos web de pilha completa com tecnologia sem servidor com implantação contínua.

• CodeCommitA AWS é um serviço de controle de versão que ajuda você a armazenar e gerenciar repositórios Git de forma privada, sem precisar gerenciar seu próprio sistema de controle de origem.

• O AWS Identity and Access Management (IAM) ajuda você a gerenciar com segurança o acesso aos seus recursos da AWS, controlando quem está autenticado e autorizado a usá-los.

Outras ferramentas

• O Node.js é um ambiente de tempo de JavaScript execução orientado a eventos projetado para criar aplicativos de rede escaláveis.

• O npm é um registro de software executado em um ambiente Node.js e usado para compartilhar ou emprestar pacotes e gerenciar a implantação de pacotes privados.

Épicos

Crie um CodeCommit repositório

Tarefa	Descrição	Habilidades necessárias
Criar um repositório.	Para obter instruções, consulte Criar um CodeCommit repositório da AWS na CodeCommit documentação.	AWS DevOps
Clonar o repositório.	Para obter instruções, consulte Conectar-se ao CodeCommit repositório clonando o repositório na documentação. CodeCommit Caso seja solicitado, forneça suas credenciais do Git.	Desenvolvedor de aplicativos

Criar um aplicativo React

Tarefa	Descrição	Habilidades necessárias
Criar um novo aplicativo React.	Insira comando a seguir para navegar para o repositório clonado. <repo name>Substitua pelo nome do seu CodeCommit repositório. $ cd <repo name> Insira comando a seguir para criar um novo aplicativo React no repositório clonado. $ npx create-react-app . Codifique o aplicativo e insira o comando a seguir para iniciá-lo. $ npm start Para obter mais informações sobre a criação de um aplicativo React personalizado, consulte as instruções Criar um aplicativo React na documentação Criar aplicativo React. Você também pode implantar um aplicativo React de amostra em sua conta do Amplify seguindo as instruções em Implantar um frontend na documentação do Amplify.	Desenvolvedor de aplicativos
Criar uma ramificação e enviar o código.	Digite o comando a seguir para criar uma nova ramificação localmente, onde <branch> é o nome que você deseja atribuir à nova ramificação. $ git checkout -b <branch> Digite o comando a seguir para enviar a ramificação para o CodeCommit repositório, onde <branch> está o nome que você atribuiu na etapa anterior. Para obter mais informações, consulte Trabalhar com confirmações. $ git push --set-upstream origin <branch>	Desenvolvedor de aplicativos

Implantar o aplicativo no AWS Amplify Hosting

Tarefa	Descrição	Habilidades necessárias
Conectar o Amplify ao repositório.	Para obter instruções, consulte Conectar um repositório na documentação do Amplify Hosting. Selecione AWS CodeCommit e o repositório e a filial que você criou anteriormente.	Desenvolvedor de aplicativos
Definir as configurações de criação do frontend.	Para obter instruções, consulte Confirmar as configurações de criação para o frontend na documentação do Amplify Hosting. Aceite os padrões ou insira o seguinte. Build settings: version: 0.1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: build files: - '**/*' cache: paths: - node_modules/**/*	Desenvolvedor de aplicativos
Analisar e implantar.	Para obter instruções, consulte Salvar e implantar na documentação do Amplify Hosting. Espere até que o processo de implantação seja concluído.	Desenvolvedor de aplicativos

Validar a implantação contínua

Tarefa	Descrição	Habilidades necessárias
Verificar a implantação inicial.	Quando o processo de implantação estiver concluído, em Domínio, escolha o link. Verifique se o aplicativo está operando conforme o esperado.	Desenvolvedor de aplicativos
Enviar as alterações para o repositório de código.	Edite o código na sua estação de trabalho local e envie as alterações para o CodeCommit repositório. O Amplify Hosting detecta a alteração no repositório e inicia automaticamente o processo de criação e implantação. Confirmar se as atualizações do aplicativo estão visíveis no domínio.	Desenvolvedor de aplicativos

Recursos relacionados

CodeCommit Documentação da AWS

• Configuração para a AWS CodeCommit

  • Configuração para usuários de HTTPS usando credenciais do Git

  • Etapas de configuração para conexões HTTPS com CodeCommit repositórios da AWS em Linux, macOS ou Unix com o auxiliar de credenciais da AWS CLI

• Comece a usar a AWS CodeCommit

Documentação do AWS Amplify Hosting

• Conceitos básicos do código existente

• Configurar domínios personalizados

Atributos do React

• Criar um site do aplicativo React

• Criar a documentação do aplicativo React

• Criar repositório do React App () GitHub