Compartilhar via


Criar e implantar um aplicativo Node.js

Este artigo mostra como usar o Azure Pipelines para criar um pipeline que compila e implanta um aplicativo Node.js no Serviço de Aplicativo do Azure com CI (integração contínua) e CD (implantação contínua). CI/CD reduz o tempo de inatividade e o risco de erro criando e implantando automaticamente seu aplicativo sempre que houver uma confirmação no repositório de código do aplicativo.

Pré-requisitos

Produto Requisitos
Azure DevOps - Um projeto do Azure DevOps.
– Capacidade de executar pipelines em agentes hospedados pela Microsoft. Você pode comprar um trabalho paralelo ou solicitar uma camada gratuita.
– Conhecimento básico do YAML e do Azure Pipelines. Para obter mais informações, consulte Criar seu primeiro pipeline.
- Permissões:
     - Para criar um pipeline: você deve estar no grupo Colaboradores e o grupo precisa ter a permissão Criar pipeline de build definida como Permitir. Os membros do grupo Administradores do Projeto podem gerenciar pipelines.
    – Para criar conexões de serviço: você deve ter a função Administrador ou Criador para conexões de serviço.
GitHub - Uma conta do GitHub .
– Uma conexão de serviço do GitHub para autorizar o Azure Pipelines.
Azul Uma assinatura do Azure.
Produto Requisitos
Azure DevOps - Um projeto do Azure DevOps.
- Um agente auto-hospedado. Para criar um, consulte Agentes auto-hospedados.
– Conhecimento básico do YAML e do Azure Pipelines. Para obter mais informações, consulte Criar seu primeiro pipeline.
- Permissões:
    - Para criar um pipeline: você deve estar no grupo Colaboradores e o grupo precisa ter a permissão Criar pipeline de build definida como Permitir. Os membros do grupo Administradores do Projeto podem gerenciar pipelines.
    – Para criar conexões de serviço: você deve ter a função Administrador ou Criador para conexões de serviço.
GitHub - Uma conta do GitHub .
– Uma conexão de serviço do GitHub para autorizar o Azure Pipelines.
Azul Uma assinatura do Azure.

Observação

Os procedimentos que usam o GitHub podem exigir autenticação, autorização ou entrada em organizações do GitHub ou repositórios específicos. Siga as instruções para concluir os processos necessários. Para obter mais informações, confira Acesso ao repositórios do GitHub.

Fazer um fork do aplicativo de exemplo

  1. No GitHub, vá para o repositório Node.js Hello World e selecione Fork no menu superior.

    Captura de tela do GitHub para selecionar o projeto Node.js para fazer fork.

  2. Selecione sua organização do GitHub como proprietário da bifurcação se ainda não estiver selecionado e, em seguida, selecione Criar bifurcação.

    Captura de tela da criação de fork no GitHub.

O navegador vai para sua nova bifurcação na URL https://github.com/<owner>/nodejs-docs-hello-world.

Criar e implantar o aplicativo Web do Serviço de Aplicativo

Crie seu aplicativo Web do Serviço de Aplicativo do Azure usando o Cloud Shell no portal do Azure. Para usar o Cloud Shell, entre no portal do Azure e selecione o botão Cloud Shell na barra de ferramentas superior.

Captura de tela do botão do Azure Cloud Shell na barra de ferramentas do portal do Azure.

O Cloud Shell será exibido na parte inferior do navegador. Verifique se o Bash está selecionado como o ambiente no menu suspenso.

Captura de tela do Azure Cloud Shell.

Dica

Para colar no Cloud Shell, use Ctrl+Shift+V ou clique com o botão direito do mouse e selecione Colar no menu de contexto.

Criar e implantar o aplicativo Web

  1. No Cloud Shell, clone seu repositório bifurcado no Azure com o comando a seguir, substituindo <your-forked-repository-url> pela URL do repositório bifurcado.

    git clone <your-forked-repository-url>
    
  2. Altere o diretório para a pasta do repositório clonado.

    cd nodejs-docs-hello-world
    
  3. Execute o comando az webapp up para provisionar um aplicativo Web do Serviço de Aplicativo e fazer a primeira implantação. O --sku F1 argumento cria o aplicativo web na camada de preço Gratuito, que não acarreta custo.

    A execução az webapp up sem parâmetros name atribui automaticamente um nome de aplicativo Web gerado aleatoriamente que é exclusivo no Azure. Você também pode usar o --name <web-app-name> parâmetro para atribuir qualquer nome exclusivo no Azure, como um nome pessoal ou de empresa com um identificador de aplicativo, como --name <your-name>-nodeapp.

    az webapp up --sku F1 --name <app-name>
    

O az webapp up comando reconhece o aplicativo como um aplicativo Node.js e executa as seguintes ações:

  1. Cria um grupo de recursos padrão.
  2. Cria um plano padrão do Serviço de Aplicativo.
  3. Cria um aplicativo Web com o nome atribuído e a URL <your-web-app-name>.azurewebsites.net.
  4. O ZIP implanta todos os arquivos do diretório de trabalho atual, com a automação de build habilitada.
  5. Armazena em cache os parâmetros localmente no arquivo .azure/config para que você não precise especificá-los novamente ao implantar da pasta do projeto com ou outros az webapp upaz webapp comandos.

Você pode substituir as ações padrão com seus próprios valores usando os parâmetros de comando. Para obter mais informações, consulte az webapp up.

O comando produz mensagens de status à medida que é executado. Depois que o site for iniciado com êxito, você poderá selecionar o link You can launch the app at https://<your-web-app-name>.azurewebsites.net para acessar o aplicativo Web Hello World .

O az webapp up comando produz a seguinte saída JSON para o aplicativo Web de exemplo:

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

Criar o pipeline a partir de um modelo

  1. Em seu projeto do Azure DevOps, selecione Pipelines no menu de navegação à esquerda e selecione Novo pipeline ou Criar pipeline se esse pipeline for o primeiro no projeto.

  2. Na tela Onde está o código , selecione GitHub.

  3. Na tela Selecionar um repositório, selecione o repositório nodejs-docs-hello-world bifurcado.

  4. O Azure Pipelines reconhece o código como um aplicativo Node.js e sugere vários modelos de pipeline na página Configurar seu pipeline . Selecione Node.js Aplicativo Web Expresso para Linux no Azure.

  5. Na próxima tela, selecione sua assinatura do Azure e selecione Continuar. Essa ação cria uma conexão de serviço com seus recursos do Azure.

  6. Na próxima tela, selecione seu aplicativo Web do Azure e selecione Validar e configurar. O Azure Pipelines cria um arquivo azure-pipelines.yml e o exibe no editor de pipeline do YAML.

  7. Na tela Verificar o YAML do seu pipeline, verifique o código do seu pipeline.

    O pipeline executa as seguintes ações:

    • Define um gatilho a ser executado em cada confirmação para o branch de código principal.
    • Estabelece e usa variáveis para a conexão de serviço, o aplicativo Web, a imagem do computador e o ambiente.
    • Instala Node.js no agente de build e usa o npm para executar e testar o build do aplicativo.
    • Empacota o aplicativo compilado em um arquivo ZIP e carrega o ZIP em um local de descarte.
    • Implanta o pacote ZIP no aplicativo do Serviço de Aplicativo e inicia o aplicativo.

Salvar e executar o pipeline

  1. Depois de examinar o código, selecione Salvar e executar e Salvar e executar novamente para salvar e executar seu pipeline. O arquivo azure-pipelines.yml é salvo em seu repositório derivado e o código é implantado no Serviço de Aplicativo do Azure.

    Observação

    Na primeira vez que o pipeline é executado, ele solicita permissão para acessar o ambiente que ele cria. Selecione Permitir para conceder permissão ao pipeline para acessar o ambiente.

  2. Na página Resumo de Execução, selecione o job para assistir à execução do pipeline e rastrear o build.

  3. Quando a execução for bem-sucedida, selecione a tarefa Implantar Aplicativo Web do Azure e selecione a URL do Aplicativo do Serviço de Aplicativo para exibir o site implantado.

    Captura de tela da localização da URL do site no Azure Pipelines.

  4. Verifique se o site está em execução no App Service na URL do site implantado.

    Captura de tela do aplicativo Node.js em execução em um navegador da Web.

Executar uma compilação e implantação de CI

A trigger: main keyword configura o pipeline para que seja executado sempre que houver uma confirmação de alteração no branch main do repositório de código ramificado. Para executar um build de CI:

  1. Vá para o repositório GitHub bifurcado e faça uma pequena alteração no arquivo README.md .
  2. Selecione Confirmar alterações e Confirmar alterações novamente.
  3. No Azure Pipelines, verifique que o pipeline nodejs-docs-hello-world seja executado novamente com uma descrição de Individual CI.

Limpar os recursos

Você pode excluir os recursos criados para este artigo se não precisar mais deles.

  • Para remover os recursos do Serviço de Aplicativo do Azure, execute os comandos a seguir em ordem no Cloud Shell. Você deve excluir o aplicativo web antes de excluir o plano de serviço de aplicativo e deve excluir o plano de serviço de aplicativo antes de excluir o grupo de recursos.

    az webapp delete --name <web-app-name> --resource-group <resource-group-name>
    az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
    az group delete --name <resource-group-name>
    
  • Para remover o pipeline no Azure Pipelines, selecione o pipeline, selecione o ícone Mais ações no canto superior direito da página do pipeline e selecione Excluir. Para remover seu projeto do Azure DevOps, consulte Excluir um projeto.

  • Para excluir o repositório GitHub forked nodejs-docs-hello-world , vá para o repositório e selecione Configurações na barra de menus superior. Role até a parte inferior da página e selecione Excluir este repositório.