Tutorial: Criando um projeto com o blueprint de aplicativo web moderno de três camadas

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

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

Escolha Criar projeto.

Escolha Começar com um blueprint.

Na barra de pesquisa, insira modern.

Selecione o blueprint de aplicativo web moderno de três camadas e escolha Avançar.

Em Nomear seu projeto, insira o nome do projeto. Por exemplo: .

MyExampleProject.

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

Em Deployment Role, escolha a função que você adicionou durante a inscrição. Para este exemplo, selecione CodeCatalystWorkflowDevelopmentRole-spaceName.

Se não houver funções listadas, adicione uma. Para adicionar uma função, escolha Adicionar função do IAM e adicione a função à sua Conta da AWS. Para ter mais informações, consulte Permitindo acesso a AWS recursos com conexão Contas da AWS.

Na plataforma de computação, escolha Lambda.

Na Opção de hospedagem de front-end, escolha Amplify Hosting. Para obter informações sobre AWS Amplify, consulte O que é AWS Amplify hospedagem? no Guia do AWS Amplify usuário.

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

Em Nome do aplicativo, deixe o padrão demysfitsstring.

(Opcional) Em Gerar visualização prévia do projeto, escolha Exibir código para visualizar os arquivos de origem que o blueprint instalará. Escolha Exibir fluxo de trabalho para visualizar os arquivos de definição do fluxo de trabalho de CI/CD que o blueprint 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, escolha Convidar.

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

Escolha a função do usuário.

Ao terminar de adicionar usuários, escolha Convidar.

No painel de navegação, escolha Problemas.

Escolha Criar problema.

Em Título da edição, forneça um nome para a edição. Opcionalmente, 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 Destinatário, escolha +Adicionar para atribuir o problema a você mesmo.

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

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

• Na página de resumo do seu projeto, escolha o repositório que você deseja na lista e, em seguida, escolha Exibir repositório.

• No painel de navegação, selecione Código e, em seguida, selecione Repositórios de origem. Em Repositórios de origem, escolha 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 pull requests e fluxos de trabalho. Por padrão, o conteúdo da ramificação padrão é exibido. Você pode alterar a exibição escolhendo uma ramificação diferente na lista suspensa.

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

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

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

Na página inicial do repositório, escolha Create Dev Environment.

Escolha 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 seu projeto. Em AWS Cloud9, expanda o menu de navegação lateral para navegar pelos arquivos. mysfitsExpanda e abrasrc/mysfit_data.json. src

No arquivo, altere o valor do "Age": campo de 6 para 12. Sua linha deve ter a seguinte aparência:

    {
        "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 cd /projects/mysfits comando.

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

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

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

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

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

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

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 verticalmente, com as ações na parte superior sendo executadas antes das 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 DeployFrontendação.

Aguarde até que a ação termine. Observe o ícone “em andamento” ( ) mudar para um ícone de “sucesso” ( ).

Escolha a ação build_backend.

Escolha a guia Registros e expanda algumas seções para ver as mensagens de registro dessas etapas. Você pode ver mensagens relacionadas à configuração do back-end.

Escolha a guia Relatórios e, em seguida, escolha o backend-coverage.xml relatório. 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 obter mais informações sobre relatórios de teste, consulteTestando com fluxos de trabalho.

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

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

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

Procure o pégaso Mysfit chamado Twilight Glitter. Anote o valor da idade. Isso é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, escolha Pull requests e, em seguida, escolha Create pull request.

• Na página inicial do repositório, escolha Mais e, em seguida, escolha Criar pull request.

• Na página do projeto, escolha Criar pull request.

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 pull request na página principal do repositório.

Em Agência de destino, escolha a ramificação na qual mesclar o código depois que ele for revisado.

Na ramificação de origem, escolha a ramificação que contém o código confirmado.

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

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

(Opcional) Em Problemas, escolha Vincular problemas e, em seguida, escolha um problema na lista ou insira sua ID. Para desvincular um problema, escolha o ícone de desvinculação.

(Opcional) Em Revisores obrigatórios, escolha Adicionar revisores obrigatórios. Escolha na lista de membros do projeto para adicioná-los. Os revisores obrigatórios devem aprovar as alterações antes que o pull request possa ser incorporado à ramificação de destino.

(Opcional) Em Revisores opcionais, escolha Adicionar revisores opcionais. Escolha na lista de membros do projeto para adicioná-los. Os revisores opcionais não precisam aprovar as alterações como um requisito para que a pull request possa ser incorporada à ramificação de destino.

Analise as diferenças entre as filiais. A diferença exibida em uma pull request 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 pull request 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 você estiver convencido de que a pull request contém o código e as alterações que você deseja revisar, escolha Criar.

Navegue até seu projeto de aplicativo moderno.

Na página do projeto, em Abrir pull requests, escolha a pull request que você deseja mesclar. Se você não vê a pull request, escolha Exibir tudo e, em seguida, escolha-a na lista. Escolha Merge (Mesclar).

Escolha entre as estratégias de mesclagem disponíveis para o pull request. Opcionalmente, selecione ou desmarque a opção de excluir a ramificação de origem após mesclar a pull request e, em seguida, escolha Mesclar.

No painel de navegação, escolha CI/CD e, em seguida, escolha 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. Opcionalmente, 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 pégaso para verificar se a idade mudou.

Navegue até o projeto.

No painel de navegação, escolha Problemas.

Coloque rag-and-drop o problema na coluna Concluído.

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

Escolha a guia Geral.

Abaixo do nome do projeto, escolha Excluir projeto.

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

Vá para o AWS CloudFormationserviço.

Exclua a pilha de strings mysfits.

Exclua a pilha de strings development-mysfits.

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

(Opcional) Exclua a pilha CDKToolkit.