Tutorial: Criar um projeto com o esquema de aplicação web moderna de três níveis

Abra o console do CodeCatalyst em https://codecatalyst.aws/.

No console do CodeCatalyst, navegue até o espaço onde você deseja criar um projeto.

Escolha Criar projeto.

Selecione Começar com um esquema.

Na barra de pesquisa, insira modern.

Selecione o esquema de aplicação web moderna de três níveis e selecione Próximo.

Em Nome do projeto, insira um nome para o projeto. Por exemplo:

MyExampleProject.

Em Conta, escolha a Conta da AWS que você adicionou durante a inscrição. O esquema instalará recursos nessa conta.

Em Perfil de implantação, escolha o perfil que você adicionou durante a inscrição. Para este exemplo, selecione CodeCatalystWorkflowDevelopmentRole-spaceName.

Se não houver perfis listados, adicione um. Para adicionar um perfil, selecione Adicionar perfil do IAM e adicione o perfil à sua Conta da AWS. Para ter mais informações, consulte Permissão do acesso a recursos da AWS com Contas da AWS conectadas.

Em Plataforma de computação, selecione Lambda.

Em Opção de hospedagem de frontend, selecione Ampliar hospedagem. Para ter informações sobre o AWS Amplify, consulte O que é hospedagem do AWS Amplify? no Manual do usuário do AWS Amplify.

Em Região de implantação, insira o código da Região da AWS em que você deseja que o esquema implante a aplicação Mysfits e os recursos de suporte. Para ver uma lista de códigos de região, consulte Endpoints regionais na Referência geral da AWS.

Em Nome da aplicação, deixe o padrão de mysfitsstring.

(Opcional) Em Gerar visualização prévia do projeto, selecione Exibir código para visualizar os arquivos de origem que o esquema instalará. Selecione Exibir fluxo de trabalho para visualizar os arquivos de definição do fluxo de trabalho de CI/CD que o esquema instalará. A visualização é atualizada dinamicamente com base nas suas seleções.

Escolha Criar projeto.

Navegue até o projeto para o qual você deseja convidar usuários.

No painel de navegação, escolha Configurações do projeto.

Na guia Membros, selecione Convidar.

Digite os endereços de e-mail das pessoas que você deseja convidar como usuários para o projeto. Você pode digitar vários endereços de e-mail separados por um espaço ou uma vírgula. Você também pode escolher entre membros do seu espaço que não sejam membros do projeto.

Escolha o perfil do usuário.

Ao concluir a adição de usuários, selecione Convidar.

No painel de navegação, selecione Problemas.

Selecione Criar problema.

Em Título do problema, forneça um nome para o problema. Se desejar, forneça uma descrição do problema. Neste exemplo, use make a change in the src/mysfit_data.json file.

Escolha a prioridade, a estimativa, o status e os rótulos. Em responsável, selecione +Adicionar a mim para atribuir o problema a você mesmo.

Selecione Criar problema. O problema agora está visível no quadro. Escolha o cartão para mover o problema para a coluna Em andamento.

Navegue até o projeto e faça o seguinte:

• Na página de resumo do seu projeto, selecione o repositório que você deseja na lista e, depois, selecione Visualizar repositório.

• No painel de navegação, selecione Código e, depois, selecione Repositórios de origem. Em Repositórios de origem, selecione o nome do repositório na lista. Você pode filtrar a lista de repositórios digitando parte do nome do repositório na barra de filtro.

Na página inicial do repositório, visualize o conteúdo do repositório e as informações sobre os recursos associados, como o número de solicitações pull e fluxos de trabalho. Por padrão, o conteúdo da ramificação padrão é exibido. Você pode alterar a visualização selecionando uma ramificação diferente na lista suspensa.

Abra o console do CodeCatalyst em https://codecatalyst.aws/.

Navegue até o projeto em que deseja criar um Ambiente de Desenvolvimento.

Selecione o nome do repositório na lista de repositórios de origem do projeto. Como alternativa, no painel de navegação, escolha Código, Repositórios de origem e selecione o repositório para o qual você deseja criar um Ambiente de Desenvolvimento.

Na página inicial do repositório, selecione Criar um ambiente de desenvolvimento.

Selecione um IDE compatível no menu suspenso. Consulte Ambientes de desenvolvimento integrados compatíveis para ambientes de desenvolvimento Para mais informações.

Escolha o repositório a ser clonado, selecione Trabalhar em uma nova ramificação, insira um nome de ramificação no campo Nome da ramificação e escolha uma ramificação a partir da qual criar a nova ramificação no menu Criar ramificação.

Opcionalmente, adicione um alias para o Ambiente de Desenvolvimento.

Opcionalmente, escolha o botão de edição da configuração do Ambiente de Desenvolvimento para editar a configuração de computação, armazenamento ou tempo limite do Ambiente de Desenvolvimento.

Escolha Criar. Enquanto seu Ambiente de Desenvolvimento estiver sendo criado, a coluna de status do Ambiente de Desenvolvimento exibirá Iniciando e a coluna de status exibirá Executando após a criação do Ambiente de Desenvolvimento. Uma nova guia será aberta com seu Ambiente de Desenvolvimento no IDE de sua escolha. Você pode editar o código, confirmar e enviar suas alterações.

Navegue até o Ambiente de Desenvolvimento do projeto. Em AWS Cloud9, expanda o menu de navegação lateral para navegar pelos arquivos. Expanda mysfits, src e abra src/mysfit_data.json.

No arquivo, altere o valor do campo "Age": de 6 para 12. A linha deve ser semelhante a esta:

    {
        "Age": 12,
        "Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
        "GoodEvil": "Good",
        "LawChaos": "Lawful",
        "Name": "Twilight Glitter",
        "ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
        "Species": "Pegasus",
        "ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
    },

Salve o arquivo.

Mude para o repositório mysfits com o comando cd /projects/mysfits.

Adicione, confirme e envie as alterações com os comandos git add, git commit e git push.

git add .
git commit -m "make an example change"
git push

No console do CodeCatalyst, no painel de navegação, escolha CI/CD e Fluxos de trabalho.

Uma lista de fluxos de trabalho é exibida. Esses são os fluxos de trabalho que o esquema do CodeCatalyst gerou e iniciou quando você criou o projeto.

Observe a lista de fluxos de trabalho. Você deve ver quatro:

Escolha o fluxo de trabalho ApplicationDeploymentPipeline associado à ramificação main, na parte inferior. Esse fluxo de trabalho foi executado usando o código-fonte na ramificação main.

Um diagrama do fluxo de trabalho é exibido. O diagrama mostra vários blocos, cada um representando uma tarefa ou ação. A maioria das ações é organizada na vertical, com as ações na parte superior sendo executadas antes das ações abaixo. As ações organizadas lado a lado são executadas em paralelo. Todas as ações agrupadas devem ser executadas com êxito antes que a ação abaixo delas possa ser iniciada.

Os blocos principais são:

Escolha a guia Definição (na parte superior). O arquivo de definição do fluxo de trabalho aparece à direita. O arquivo tem as seguintes seções dignas de nota:

Escolha a guia Estado mais recente (na parte superior) e escolha qualquer ação no diagrama do fluxo de trabalho.

À direita, escolha a guia Configuração para ver as configurações usadas pela ação durante a última execução. Cada definição de configuração tem uma propriedade correspondente no arquivo de definição do fluxo de trabalho.

Deixe o console aberto e vá para o próximo procedimento.

Escolha a guia Estado mais recente.

No diagrama do fluxo de trabalho, escolha a ação DeployFrontend.

Aguarde o término da ação. Observe que o ícone “em andamento” ( ) muda para um ícone de “sucesso” ( ).

Escolha a ação build_backend.

Escolha a guia Logs e expanda algumas seções para ver as mensagens de log dessas etapas. Você pode ver mensagens relacionadas à configuração do backend.

Escolha a guia Relatórios e, depois, escolha o relatório backend-coverage.xml. O CodeCatalyst exibe o relatório associado. O relatório mostra os testes de cobertura de código que foram executados e indica a proporção de linhas de código que foram validadas com sucesso por meio de testes, como 80%.

Para ter mais informações sobre os relatórios de teste, consulte Teste com fluxos de trabalho.

Deixe o console do CodeCatalyst aberto e vá para o próximo procedimento.

Retorne ao fluxo de trabalho ApplicationDeploymentPipeline e escolha o link Run-string da última execução.

No diagrama do fluxo de trabalho, encontre a ação DeployFrontend e escolha o link Exibir aplicação. O site da Mysfit é exibido.

Procure o Pegasus Mysfit chamado Twilight Glitter. Anote o valor da idade. É 6. Você fará uma alteração no código para atualizar a idade.

Navegue até o projeto.

Execute um destes procedimentos:

• No painel de navegação, escolha Código, Solicitações pull e, depois, selecione Criar solicitação pull.

• Na página inicial do repositório, escolha Mais e, depois, selecione Criar solicitação pull.

• Na página do projeto, selecione Criar solicitação pull.

No Repositório de origem, certifique-se de que o repositório de origem especificado seja aquele que contém o código confirmado. Essa opção só aparece se você não criou a solicitação pull na página principal do repositório.

Em Ramificação de destino, selecione a ramificação na qual mesclar o código depois que ele for revisado.

Em Ramificação de origem, selecione a ramificação que contém o código confirmado.

Em Título da solicitação pull, insira um título que ajude outros usuários a entender o que precisa ser revisado e por quê.

(Opcional) Na Descrição da solicitação pull, forneça informações, como um link para problemas ou uma descrição das alterações.

(Opcional) Em Problemas, selecione Vincular problemas e, depois, selecione um problema na lista ou insira seu ID. Para desvincular um problema, selecione o ícone de desvinculação.

(Opcional) Em Revisores obrigatórios, selecione Adicionar revisores obrigatórios. Selecione na lista de membros do projeto para adicioná-los. Os revisores obrigatórios devem aprovar as alterações antes que a solicitação pull seja mesclada na ramificação de destino.

(Opcional) Em Revisores opcionais, selecione Adicionar revisores opcionais. Selecione na lista de membros do projeto para adicioná-los. Revisores opcionais não precisam aprovar as alterações como um requisito antes que a solicitação pull seja mesclada na ramificação de destino.

Revise as diferenças entre as ramificações. A diferença exibida em uma solicitação pull são as alterações entre a revisão na ramificação de origem e a base de mesclagem, que é a confirmação principal da ramificação de destino no momento em que a solicitação pull foi criada. Se nenhuma alteração for exibida, as ramificações podem ser idênticas ou você pode ter escolhido a mesma ramificação para a origem e o destino.

Quando a solicitação pull tiver o código e as alterações que você deseja revisar, selecione Criar.

Navegue até o seu projeto de aplicação moderna.

Na página do projeto, em Abrir solicitações pull, escolha a solicitação pull que você deseja mesclar. Se você não vir a solicitação pull, selecione Exibir tudo e, depois, escolha-a na lista. Escolha Merge (Mesclar).

Selecione entre as estratégias de mesclagem disponíveis para a solicitação pull. Também é possível selecionar ou desmarcar a opção de excluir a ramificação de origem depois de mesclar a solicitação pull e, depois, selecionar Mesclar.

No painel de navegação, escolha CI/CD e Fluxos de trabalho.

Em Fluxos de trabalho, em ApplicationDeploymentPipeline, expanda Execuções recentes. Você pode ver a execução do fluxo de trabalho iniciada pela confirmação de mesclagem. Se desejar, escolha-a para observar o progresso da execução.

Quando a execução for concluída, recarregue o URL que você visitou anteriormente. Veja o pegasus para verificar se a idade mudou.

Navegue até o projeto.

No painel de navegação, selecione Problemas.

Arraste e solte o problema na coluna Concluído.

Navegue até seu projeto e selecione Configurações do projeto.

Escolha a guia Geral.

No nome do projeto, selecione Excluir projeto.

Faça login no AWS Management Console com a mesma conta que você adicionou ao seu espaço do CodeCatalyst.

Vá para o serviço AWS CloudFormation.

Exclua a pilha mysfitsstring.

Exclua a pilha development-mysfitsstring.

Escolha (mas não exclua) a pilha CDKToolkit. Escolha a guia Recursos. Escolha o link StagingBucket e exclua o bucket e o conteúdo do bucket no Amazon S3.

(Opcional) Exclua a pilha CDKToolkit.