Exercício – Criar e executar um fluxo de trabalho básico

Concluído

Importante

É preciso ter uma assinatura do Azure para fazer esse exercício, e isso pode gerar encargos. Caso ainda não tenha uma assinatura do Azure, crie uma conta gratuita antes de começar.

Você deseja automatizar a implantação de atualizações no site da sua empresa de brinquedos. Primeiro, crie um fluxo de trabalho básico no GitHub Actions.

Neste exercício, você vai:

  • Crie uma conta e um repositório do GitHub.
  • Crie um fluxo de trabalho básico.
  • Execute seu fluxo de trabalho básico.

Criar um repositório em GitHub

  1. Em um navegador, vá para GitHub. Entre usando sua conta do GitHub ou crie uma nova conta se você não tiver uma.

  2. Selecione o ícone de sinal de adição (+) no canto superior direito da janela e selecione Novo repositório.

    Screenshot of the GitHub interface that shows the menu for creating a new repository.

  3. Insira os detalhes do seu novo repositório:

    • Proprietário: selecione o nome de usuário do GitHub no menu suspenso. Na captura de tela, mygithubuser é o nome da conta do GitHub do proprietário do repositório. Você usará o nome da sua conta mais adiante neste módulo.
    • Nome do repositório: insira um nome significativo, mas curto. Para este módulo, use toy-website-workflow.
    • Descrição: inclua uma descrição para ajudar os demais a entenderem a finalidade do repositório.
    • Privado: você pode usar GitHub para criar repositórios públicos e privados. Crie um repositório privado, pois somente as pessoas dentro da sua organização devem acessar os arquivos do seu site de brinquedos. Posteriormente, você pode conceder acesso a outras pessoas.

    Quando terminar, a configuração do repositório deverá ser semelhante à seguinte captura de tela:

    Screenshot of the GitHub interface showing the configuration for the repository to create.

  4. Selecione Criar repositório.

Clonar o repositório

No Visual Studio Code, clone seu repositório.

  1. Na página do repositório, selecione o botão de cópia para copiar a URL para o repositório do Git.

    Screenshot of the GitHub interface showing the new empty repository, with the repository URL copy button highlighted.

  2. Abra o Visual Studio Code.

  3. Abra uma janela do terminal do Visual Studio Code selecionando Terminal>Novo Terminal. Geralmente, a janela é aberta na parte inferior da tela.

  4. Navegue no terminal até o diretório em que você deseja clonar o repositório do GitHub no computador local. Por exemplo, para clonar o repositório para a pasta toy-website-workflow, execute o seguinte comando:

    cd toy-website-workflow
    
  5. Digite git clone e, em seguida, copie a URL que você copiou anteriormente, que tem esta aparência:

    git clone https://github.com/mygithubuser/toy-website-workflow
    

    Você receberá um aviso de que clonou um repositório vazio. Você pode ignorar a mensagem.

  6. Essa é a primeira vez que você usou esse repositório, logo pode ser solicitado que faça logon.

    No Windows, digite 1 para autenticar usando um navegador da Web e selecione Enter.

    No macOS, selecione Autorizar.

  7. Uma janela do navegador é exibida. Talvez seja necessário entrar no GitHub novamente. Selecione Autorizar.

  8. Reabra o Visual Studio Code na pasta do repositório executando o seguinte comando:

    code -r toy-website-workflow
    

Dica

Você também pode editar suas definições de fluxo de trabalho do GitHub Actions usando a interface do usuário da web do GitHub. Quando você abre uma definição de fluxo de trabalho, o GitHub ajuda com a sintaxe e o recuo do arquivo YAML e fornece trechos de código de exemplo para as ações que você talvez queira usar. Nesse módulo, você trabalhará com o arquivo de definição no Visual Studio Code, mas você pode explorar o editor do GitHub para ver como ele funciona.

Criar uma nova Definição de fluxo de trabalho do YAML

Agora que você criou e clonou o seu repositório, está pronto para criar uma definição básica de fluxo de trabalho.

  1. No Visual Studio Code, abra o Explorer.

  2. Na raiz da sua estrutura de pastas toy-website-workflow, crie uma pasta chamada .github.

    Observação

    Inclua o ponto no início do nome da pasta. Isso indica que essa é uma pasta oculta, e o GitHub requer o ponto para que o GitHub Actions detecte a definição do fluxo de trabalho.

  3. Na pasta .github, crie outra pasta chamada workflows.

  4. Na pasta workflows, crie um novo arquivo chamado workflow.yml.

    Screenshot of the Visual Studio Code Explorer, with the .github/workflows folder and the workflow.yml file shown.

  5. Copie a seguinte definição de fluxo de trabalho no arquivo:

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    jobs:
      say-hello:
        runs-on: ubuntu-latest
        steps:
          - name: 'placeholder step'
            run: echo "Hello world!"
    
  6. Salve o arquivo.

  7. Confirme e efetue push do arquivo para o repositório do GitHub usando os seguintes comandos:

    git add .
    git commit -m "Add initial workflow definition"
    git push
    

Dica

O Visual Studio Code ajuda você com o recuo do arquivo YAML. Procure linhas que indicam erros de sintaxe ou selecione Exibir>Problemas para exibir uma lista de problemas no seu arquivo.

Executar o fluxo de trabalho

Você criou uma definição de fluxo de trabalho. O GitHub Actions detecta automaticamente o seu arquivo do fluxo de trabalho porque ele está localizado no diretório .github/workflows.

  1. No navegador, navegue até o repositório. Talvez seja necessário atualizar a página para ver suas alterações.

  2. Selecione a guia Ações.

    Screenshot of the GitHub interface showing the repository page, and the Actions tab highlighted.

  3. Selecione o fluxo de trabalho deploy-toy-website.

    Screenshot of the GitHub interface showing the Actions tab, with the deploy-toy-website workflow selected.

  4. Selecione o menu suspenso Executar fluxo de trabalho e escolha o botão Executar fluxo de trabalho.

    Screenshot of the GitHub interface showing the Actions tab, with the Run workflow dropdown and button selected.

  5. O fluxo de trabalho começará a ser executado. Pode levar alguns instantes e você pode atualizar a página, mas a página será atualizada automaticamente e mostrará uma execução do fluxo de trabalho em fila, em execução ou até mesmo já concluída.

    Screenshot of the GitHub interface showing the Actions tab, with one workflow running.

    Observe que o status de execução inicialmente é exibido como Na fila. O fluxo de trabalho pode levar algum tempo para iniciar. Seu trabalho é adicionado a uma fila para um executor e, quando um executor estiver disponível, o GitHub Actions atribuirá o executor e iniciará o trabalho. O status do trabalho se torna Em execução.

    Cada execução de fluxo de trabalho inclui um identificador. Você pode usar este identificador quando precisar se referir à execução do fluxo de trabalho e para encontrar uma operação específica do fluxo de trabalho.

Verifique a execução do fluxo de trabalho

  1. Depois que a execução do fluxo de trabalho iniciar, selecione deploy-toy-website para exibir os detalhes dela. Atualize a página até que o status do trabalho seja exibido como Êxito.

    Screenshot of the GitHub interface showing the details of the workflow run, with the status and commit identifier highlighted.

    Além disso, observe que a página inclui um identificador para a confirmação do Git usado pela execução. O identificador de confirmação indica a versão do conteúdo do repositório que o fluxo de trabalho usou.

  2. Na lista de trabalhos, selecione say-hello.

    Screenshot of the GitHub interface showing the run details menu, with the say-hello job highlighted.

  3. A página de informações do trabalho é exibida e mostra o log das etapas que o fluxo de trabalho executou para você. Observe que a Etapa de espaço reservado está incluída.

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step highlighted.

    Observe que a lista inclui etapas que você não especificou. Essas etapas são criadas automaticamente pelo GitHub Actions.

  4. Selecione Etapa de espaço reservado.

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step log shown.

    Os logs dessa etapa incluem o conteúdo do comando conforme ele foi especificado no arquivo YAML do fluxo de trabalho e o texto Olá, mundo! que o script emitiu.

É bom saber como fazer referência cruzada a uma execução de fluxo de trabalho para a confirmação que a execução continha. Vincular a execução do fluxo de trabalho a uma confirmação pode ajudar você a rastrear o histórico de suas implantações e diagnosticar problemas.

  1. Selecione Resumo para retornar ao resumo da execução.

  2. Selecione o identificador de confirmação. O GitHub exibe os detalhes da confirmação que disparou a execução do fluxo de trabalho.