Configure este fluxo de trabalho para implantar automaticamente seu aplicativo para produção e agilizar seu processo de lançamento.

Netlify é uma plataforma de hospedagem na web e um conjunto abrangente de ferramentas para implantação e gerenciamento de aplicativos da web na nuvem.

Mas seus recursos vão muito além disso - suas funções sem servidor permitem que você execute código do lado do servidor sem um servidor dedicado.

Explore como configurar um pipeline de CI/CD para implantar uma API REST Node.js no Netlify usando GitHub Actions.

Pipelines de CI/CD com ações do GitHub: uma visão geral

Os pipelines de Integração Contínua e Entrega Contínua (CI/CD) são uma série de processos sequenciais e automatizados pelos quais os aplicativos de software passam antes de serem enviados para produção.

Normalmente, os pipelines de CI/CD consistem em várias fases principais, incluindo as fases de origem, construção, teste e implantação.

Embora seja possível realizar essas fases manualmente, automatizá-las oferece várias vantagens, incluindo:

  • Minimizando o risco de erros humanos.
  • Agilizando o processo de liberação.
  • Garantir um fluxo de trabalho consistente para enviar software de qualidade para produção.

O que são ações do GitHub?

O GitHub Actions é uma ferramenta integrada ao GitHub que fornece uma ampla variedade de ações pré-construídas que você pode usar para definir fluxos de trabalho como código diretamente no repositório do projeto para automatizar o CI/CD oleodutos.

Você também pode criar ações personalizadas para atender às necessidades específicas do seu projeto, permitindo criar e implantar aplicativos para produção sem complicações. Uma das vantagens do GitHub Actions é sua integração perfeita com outros recursos do GitHub, como solicitações pull e rastreamento de problemas.

Isso possibilita acionar fluxos de trabalho com base em eventos específicos, como uma nova confirmação, garantindo que seus pipelines de CI/CD sejam acionados automaticamente quando necessário.

Configurar o projeto Node.js

Para começar, você precisa criar um servidor web expresso. Para fazer isso, crie uma nova pasta localmente e altere o diretório em seu terminal.

mkdir express-netlify
cd express-netlify

A seguir, crie um pacote.json arquivo usando npm, o gerenciador de pacotes de nós.

npm init -y

Por fim, instale as dependências necessárias no projeto.

npm install express netlify-lambda serverless-http

O netlify-lambda O pacote serve como um servidor de desenvolvimento local que facilita o teste de funções sem servidor. serverless-http ajuda na adaptação de aplicativos Express.js para um formato compatível com manipuladores de funções sem servidor.

O Netlify não fornece suporte nativo para hospedagem e execução de aplicativos de back-end completos. Em vez disso, oferece funções sem servidor como uma solução alternativa para lidar com a funcionalidade de back-end.

Essas funções gerenciam a lógica do lado do servidor, lidam com solicitações de API HTTP e fornecem conteúdo dinâmico, fornecendo funcionalidade de back-end dentro do paradigma sem servidor.

Você pode encontrar o código deste projeto em seu Repositório GitHub.

Criar o Express Web Server

Crie três pastas: dist., funções, e origem no diretório raiz da pasta do seu projeto.

Antes de configurar o servidor Express, crie um espaço em branco index.html arquivo no dist. pasta. Este arquivo atua como um espaço reservado que permite ao Netlify implantar com sucesso o aplicativo Express e atender às rotas da API.

Agora, crie um src/app.js arquivo e adicione o seguinte código:

const expresso = exigir("expressar");
const sem servidor = exigir("sem servidor-http");
const aplicativo = expresso();
const roteador = expresso. Roteador();


router.get("/", (req, res) => {
 res.enviar("Olá Mundo!")
});


app.use(`/.netlify/functions/app`, roteador);
módulo.exports = aplicativo;
módulo.exports.handler = sem servidor (aplicativo);

Esse código define um servidor Express com uma única rota para a URL raiz que manipula solicitações GET. O app.use A função registra o middleware da rota com o aplicativo Express, garantindo que qualquer requisição HTTP feita ao caminho /.netlify/functions/app serão tratados adequadamente pelo roteador, mesmo em um ambiente de produção.

Conseqüentemente, se você adicionar um novo endpoint, como /api/auth, estará acessível em /.netlify/functions/app/api/auth. Por fim, o código exporta o aplicativo Express e a função de manipulador sem servidor.

Isso permite o teste local do servidor e garante que você possa implantá-lo como uma função sem servidor no Netlify.

Definir o arquivo Netlify.toml

No diretório raiz, crie um novo Netlify.toml arquivo e adicione o código a seguir.

[construir]
 base = "/"
 command = "npm run build"
 publicar = "/dist/"
 funções = "funções/"
[construir.ambiente]
 NODE_VERSION = "16"
[funções]
 external_node_modules = ["expressar"]
 node_bundler = "esbuild"
[[redireciona]]
 força = verdadeiro
 de = "/api/*"
 estado = 200
 to = "/.netlify/functions/app/:splat"
[[redireciona]]
 de = "/*"
 estado = 200
 para = "/index.html"

O código especifica as definições de configuração de compilação e implantação para o aplicativo Express no Netlify. Ele inclui configurações como diretório base, comando de compilação, diretório de publicação e diretório de funções.

Além disso, define configurações de redirecionamento que devem gerenciar o roteamento de solicitações de API HTTP, garantindo que sejam direcionados adequadamente para as funções sem servidor do Netlify.

Atualize o arquivo Package.json

Abra o pacote.json arquivo e adicione esses comandos ao objeto de scripts.

"scripts": {
"começar": "netlify-lambda serve src",
"construir": "netlify-lambda build src"
 },

Execute os seguintes comandos para criar e iniciar o aplicativo localmente.

npm run build
npm executar início

O servidor iniciará na porta 9000. Você pode ir em frente e testar a API usando o Postman fazendo solicitações para http://localhost: 9000/.netlify/functions/app

Por fim, antes de configurar o fluxo de trabalho do GitHub Actions para automatizar implantações no Netlify, criar um repositório no GitHube envie os arquivos do projeto.

Implante o Express Application no Netlify

Primeiro, implante a API no Netlify antes de configurar o fluxo de trabalho do GitHub Actions. Siga estas etapas para implantar o aplicativo Express no Netlify.

  1. Dirija-se a Netlify e crie uma conta e entre no Visão geral página.
  2. Selecione e clique no Sites aba.
  3. Clique no Importar do Git botão e selecione GitHub como a plataforma do provedor Git. O Netlify solicitará que você se autentique no GitHub para conceder acesso à sua conta e aos repositórios do projeto.
  4. Selecione o repositório do projeto Express na lista de repositórios exibidos.
  5. Depois de selecionar o repositório, você precisa definir as configurações de compilação para o processo de implantação. O Netlify simplifica esse processo ao detectar automaticamente a tecnologia usada para criar o aplicativo e preencher previamente os campos com as configurações de construção necessárias. Nesse caso, o comando build, a publicação e o diretório de funções.
  6. Por último, clique no Implantar site botão para concluir o processo.

Criar um fluxo de trabalho de ações do GitHub

Clique no Ações tab no repositório GitHub do seu projeto. No Integração contínua seção, selecione e clique em Configurar o Node.js fluxo de trabalho.

No editor do GitHub, renomeie o nome do arquivo para Netlify.yml, exclua o código padrão do fluxo de trabalho Node.js e adicione o código abaixo:

nome:ConstruireImplantarparaNetlify
sobre:
empurrar:
pull_request:
empregos:
construir:
corre em:ubuntu-22.04
passos:
-usa:ações/checkout@v3
# (Compile para ./dist ou outro diretório... )
-nome:ImplantarparaNetlify
usa:nwtgck/[email protected]
com:
publicar-dir:'./dist'
ramo de produção:principal
github-token:${{segredos. GITHUB_TOKEN}}
mensagem de implantação:"Implantar a partir de ações do GitHub"
enable-pull-request-comentário:falso
enable-commit-comment:verdadeiro
overwrites-pull-request-comentário:verdadeiro
ambiente:
NETLIFY_AUTH_TOKEN:${{segredos. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID:${{segredos. NETLIFY_SITE_ID}}
minutos-limite:1

Aqui está um detalhamento das propriedades do fluxo de trabalho:

  • sobre: eventos que acionam as ações neste fluxo de trabalho.
  • empregos: Especifica o evento que uma Ação específica deve executar, que são: os eventos de construção e implantação.
  • corre em: o ambiente de produção do host para a ação.
  • passos: especifica uma série de etapas envolvidas para executar um determinado trabalho.
  • com: define os argumentos necessários para que as ações sejam executadas corretamente.
  • ambiente: especifica as variáveis ​​de ambiente necessárias para o fluxo de trabalho.

Finalmente, confirme as atualizações feitas neste arquivo. O GitHub deve acionar automaticamente o fluxo de trabalho.

A compilação inicial, no entanto, acionará um erro, pois você precisa adicionar variáveis ​​secretas exigidas pelo fluxo de trabalho: o ID do site implantado e o token de autenticação do Netlify. Dirija-se ao seu Configurações do site no Netlify e copie o ID do site.

Para obter o token de autenticação, clique no botão perfil de usuário ícone e selecione o Configurações do Usuário opção na janela suspensa. Na página de configurações, selecione Formulários, e clique Novo token de acesso para gerar seu token de autenticação.

Adicione as duas variáveis ​​de ambiente como NETLIFY_SITE_ID e NETLIFY_AUTH_TOKEN às seções de variáveis ​​de ambiente e segredos do repositório em seu repositório GitHub. Depois de fazer essas alterações, execute novamente o fluxo de trabalho. O Netlify implantará automaticamente todas as alterações subsequentes que você enviar usando esse pipeline.

Vá em frente e teste a API usando o Postman fazendo solicitações para esta URL: /.netlify/functions/app.

Configurando pipelines de CI/CD com GitHub Actions e Netlify

Ao utilizar as funções sem servidor do Netlify, você pode implantar aplicativos da Web completos que abrangem a funcionalidade do lado do cliente e do back-end no Netlify.

Além disso, a configuração de pipelines de CI/CD para aplicativos com o GitHub Actions oferece uma abordagem simplificada para automatizar o processo de criação e implantação. Isso permite que você defina fluxos de trabalho que garantem um processo de desenvolvimento contínuo e confiável, desde a concepção até o estágio de lançamento.