0Pricing
React Academy · Aula

CI/CD do GitHub Actions para React

Automatize as etapas de análise estática, testes, compilação e implantação em um fluxo de trabalho do GitHub Actions a cada envio.

CI/CD do GitHub Actions para React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que são GitHub Actions?

GitHub Actions é uma plataforma de CI/CD integrada ao GitHub. Defina fluxos de trabalho em arquivos YAML dentro de .github/workflows/ para serem executados em eventos de envio, solicitação de pull ou agendamento.

Fluxo de trabalho básico de CI

Um fluxo de trabalho mínimo que instala dependências, executa a verificação de estilo e executa testes a cada envio e solicitação de pull.

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage

Armazenamento em cache de node_modules

Armazene ~/.npm em cache (o cache do npm, não node_modules) para acelerar a instalação de dependências. actions/setup-node gerencia isso com a opção cache.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Etapa de compilação

Adicione uma etapa de compilação após os testes para verificar se o projeto é compilado sem erros.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Implantação no Vercel após a mesclagem

Implante no Vercel após envios para main usando a CLI do Vercel no fluxo de trabalho.

- name: Deploy to Vercel
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
  run: |
    npm install -g vercel
    vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    vercel build --prod --token=$VERCEL_TOKEN
    vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

Implantação no S3 após a mesclagem

Sincronize a saída da compilação com o S3 e invalide o CloudFront após uma compilação bem-sucedida em main.

- name: Deploy to S3
  if: github.ref == 'refs/heads/main'
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 sync dist/ s3://my-bucket/ --delete
    aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Playwright E2E na CI

Execute testes E2E do Playwright na CI após a compilação. Instale os binários dos navegadores com uma etapa dedicada.

- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

- name: Run E2E Tests
  run: npx playwright test

- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

Tarefas paralelas em matriz

Use uma estratégia de matriz para executar testes em paralelo em várias versões do Node.js ou ambientes.

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20, 22]
    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

Gerenciamento de segredos

Armazene valores confidenciais (chaves de API, tokens de implantação) como Segredos do GitHub (repositório → Configurações → Segredos). Acesse-os nos fluxos de trabalho como ${{ secrets.MY_SECRET }}.

Etapas condicionais

Use condições if: para executar etapas apenas em branches específicos, eventos de PR ou após o sucesso das etapas anteriores.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Selos de status

Adicione um selo de status da compilação ao seu README para mostrar o status da CI rapidamente.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Verificação rápida

Qual recurso do GitHub Actions executa simultaneamente o mesmo trabalho em várias configurações (por exemplo, versões diferentes do Node.js)?

Recapitulação

Defina fluxos de trabalho de CI em YAML dentro de .github/workflows/. Use actions/setup-node com cache: 'npm' para instalações rápidas. Adicione etapas de verificação de estilo, de tipos, testes e compilação. Implante condicionalmente após envios para a branch main. Armazene os segredos nos Segredos do GitHub e use compilações em matriz para testar várias versões.

Perguntas Frequentes

A aula “CI/CD do GitHub Actions para React” é grátis?

Sim — o texto completo de “CI/CD do GitHub Actions para React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “CI/CD do GitHub Actions para React”?

Automatize as etapas de análise estática, testes, compilação e implantação em um fluxo de trabalho do GitHub Actions a cada envio. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “CI/CD do GitHub Actions para React”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Implantando na Vercel: configuração zero e URLs de pré-visualização
  2. Hospedando uma SPA React no AWS S3 e CloudFront
  3. Colocando um aplicativo React/Next.js em contêineres
  4. CI/CD do GitHub Actions para React
← Voltar para React Academy