Criar um pipeline do Heroku e executar aplicativos de revisão

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Criar um pipeline do Heroku e adicionar seus aplicativos.
  • Executar aplicativos de revisão.

Agora que você conhece os recursos do Heroku Flow e os conceitos por trás dele, vamos usar esses conhecimentos e criar uma instância de pipelines do Heroku, executar aplicativos de revisão e conferir como tudo funciona de fato.

Para criar um pipeline do Heroku, é necessário ter uma conta do Heroku. Inscreva-se para ter acesso a uma conta gratuita, se já não tiver uma, em https://www.heroku.com/. Você também precisará ter uma conta do GitHub para este módulo. Crie uma gratuitamente em https://github.com/.  

Crie um pipeline:

Agora você está pronto para criar seu primeiro pipeline.

  1. Faça login na sua conta do GitHub e crie sua própria cópia deste repositório clicando em Bifurcar no canto superior direito. Fork flow-demo Repo
  2. Volte para o Heroku e clique em Login. Depois de fazer login, clique em Novo e em Criar novo pipeline. New Pipeline Create
  3. Nomeie seu novo pipeline (por exemplo, flow-demo-pipeline), coloque seu nome no campo de proprietário do pipeline, conecte-o ao repositório bifurcado na etapa 1 e clique em Criar pipeline. Name your pipeline

Executar aplicativos de revisão:

Agora que você tem um pipeline, vamos criar aplicativos para que você possa gerar um aplicativo de revisão (os aplicativos de revisão só funcionam quando existe pelo menos um aplicativo no pipeline):

  1. Para criar um novo aplicativo, em Preparação, clique em Adicionar aplicativo e em Criar novo aplicativo. Nomeie seu aplicativo (por exemplo, flow-staging-demoapp) e selecione Criar aplicativo. Create new app
  2. Em seguida, crie um aplicativo de produção seguindo as mesmas etapas. Em Produção, clique em Criar novo aplicativo e dê um nome a ele (por exemplo, flow-production-demoapp).
  3. Quando um aplicativo de preparação for criado, a opção Ativar aplicativos de revisão ficará disponível. Na coluna Aplicativos de revisão, clique em Ativar aplicativos de revisão e selecione Criar novos aplicativos de revisão para novas solicitações pull automaticamente. Isso cria um aplicativo de revisão para cada solicitação pull feita no repositório do GitHub conectado. Se você está planejando usar esse pipeline somente para este módulo e para fins de teste, selecione Destruir aplicativos de revisão de estado automaticamente e clique em Ativar.
    Enable review apps
  4. Clique nas pequenas setas ao lado do aplicativo de preparação e clique em Configurar implantações automáticas. Mantenha-se na ramificação mestre e clique em Ativar implantações automáticas.
    Configurar implantações automáticas
  5. Agora vamos fazer algumas alterações no seu repositório do GitHub para ver como elas se refletem no seu pipeline do Heroku.
  6. No GitHub, acesse o repositório flow-demo bifurcado anteriormente. Clique na pasta Public para abri-la e clique no arquivo index.html.
  7. Clique no pequeno ícone de lápis no canto superior direito para editar index.html.
  8. Agora vamos fazer algumas alterações no texto e na cor da fonte. As mudanças serão simples, já que você ainda está aprendendo sobre o Heroku Flow: mude a cor h2 de azul para verde e o texto de classe p de Em execução no Heroku Flow para Criar com Heroku.
    Change the code in GitHub
  9. Role para baixo e digite um título e uma descrição de confirmação. Em seguida, selecione Criar nova ramificação para essa confirmação e inicie uma solicitação pull, deixe o nome da ramificação como padrão e clique em Propor alteração de arquivo. Create a branch and commit
  10. Na próxima página, você pode revisar as alterações feitas. Clique em Criar solicitação pull.
  11. Volte para seu painel da Heroku e veja um novo aplicativo de revisão na coluna de aplicativos de revisão. Para ver como as alterações feitas ficam em uma janela de navegador, clique nas setas pequenas ao lado do aplicativo de revisão e em Abrir aplicativo no navegador. Open review app in browser

Implantar na produção:

Você pode ver que o aplicativo de revisão reflete as alterações feitas no código no GitHub. Parabéns! Você criou seu primeiro pipeline do Heroku e aplicativo de revisão. Agora podemos prosseguir mesclando as alterações na ramificação mestre.

  1. Acesse o GitHub e selecione a guia Solicitações pull. Sua solicitação pull Atualizar index.html deve aparecer como uma Solicitação pull aberta. Check PR in GitHub
  2. Clique para ver os detalhes da SP (solicitação pull), selecione Mesclar solicitação pull e Confirmar mesclagem.
  3. Acesse seu painel da Heroku e veja seu aplicativo sendo criado em Preparação. Essa implantação ocorrerá automaticamente na mesclagem de alterações na ramificação mestre, já que você ativou as implantações automáticas anteriormente. Staging app is built
  4. Se você selecionar Abrir aplicativo no navegador ao lado de flow-staging-demoapp, verá a cor verde e o texto alterado para Criar com Heroku. Os ambientes de preparação são clones dos ambientes de produção para testar todas as alterações de código antes de enviá-las por push para a produção e incorporá-las ao produto final. Já que o aplicativo de preparação parece igual ao aplicativo de revisão e não há problemas, podemos enviar por push para a fase final de produção.
  5. Selecione Promover para produção a fim de enviar as alterações de código por push para a produção. Confira novamente o nome do aplicativo de produção e selecione Promover. Promote to production
  6. Observe que o aplicativo começa a ser implantado para a produção. Production app is built
  7. Selecione Abrir aplicativo no navegador ao lado de flow-production-demoapp e você verá que as alterações feitas no código chegaram ao aplicativo final na produção.