Deploy na Vercel do cliente

Por Mateus Biancardi

Atualizado em: 15/02/2024

✏️ Introdução

Se você está fazendo um projeto para um cliente utilizando NextJS, Create React App ou qualquer outro framework, você deve se perguntar como que você consegue colocar esse site no ar. Uma das alternativas que utilizamos é através da Vercel, que é uma plataforma que gerencia o framework NextJS e que fornece uma hospedagem gratuita (mas limitada) dos códigos que programamos. Para aplicações mais simples, a hospedagem na Vercel é excelente, e ela possui uma integração com o Github, o que significa que todo o código que é commitado é automaticamente dado o upload (em production ou preview, a depender de como configuramos).

💡 O que precisamos para subir o site do cliente na conta dele?

• O código no Github que você quer subir
• O email da conta na Vercel do cliente (não é necessário senha)
• Instalar a Vercel CLI no código

⚙️ Passo a passo

Configurações no código

Primeiramente, vá na pasta raiz do projeto e crie as seguintes pastas/arquivos:

.github/workflows/preview.yaml .github/workflows/production.yaml

A seguir, cole o seguinte código no arquivo preview.yaml:

name: Vercel Preview Deployment
env:
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
    push:
        branches-ignore:
            - main
jobs:
    Deploy-Preview:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - name: Install Vercel CLI
            run: npm install --global vercel@latest
            - name: Pull Vercel Environment Information
            run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
            - name: Build Project Artifacts
            run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
            - name: Deploy Project Artifacts to Vercel
            run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

Esse arquivo irá configurar todas as branchs que terão o deploy de preview na Vercel, que no caso será todas as branchs menos a main. Entretanto, você deve alterar as branchs que deverão dar deploy de preview, já que não é recomendado que o cliente possua acesso a esses deploys. Na verdade, se a conta da Vercel que você está configurando for a do cliente, recomendo que não coloque nenhuma branch de preview. Para isso, basta apagar o arquivo preview.yaml. Agora, caso queira alterar as branchs, basta ir no código e adicionar quais branchs você tem interesse que seja feito o deploy. Por exemplo:

branches:
    - dev
    - feat/forms

Nesse caso, eu defini que as branchs que deverão ser subidas serão a dev e a feat/forms.

Agora, podemos fazer a mesma coisa no arquivo production.yaml:

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

A branch que terá deploy em production vai ser a main.

Obtendo a Vercel Access Token

Para obter o Token, você precisa de acesso a conta do cliente. Para logar, a única coisa que você precisa é do email do cliente, uma vez que o login na Vercel não tem senha. Ao tentar fazer login, o cliente terá que ir no email e confirmar o login, e agora você possui acesso a conta dele. Agora, precisamos obter o token de acesso:

1. Vá em Settings e ache a página de Access Tokens
2. Coloque um nome
3. Escolha o escopo de acesso (Full account) e Expiration (No Expiration) e clique em Create
4. Copie e cole em algum lugar seguro o token gerado (esse token não irá aparecer novamente)

Instalando e Configurando a Vercel CLI

Vá no terminal, execute yarn global add vercel e depois vercel login. Você precisará novamente do email do cliente e que ele confirme o login no email. Depois do login, digite vercel link. Quando a Vercel estiver configurada, uma pasta na raiz do projeto chamada .vercel aparecerá. Entre no arquivo project.json e copie o projectId e orgId. Agora, vá no repositório do projeto no Github em Settings > Secrets and Variables e coloque os tokens obtidos como secrets:

VERCEL_TOKEN (token de acesso)
VERCEL_ORG_ID (ID de org obtido no project.json)
VERCEL_PROJECT_ID (ID de projeto)

Pronto! Já está tudo configurado! Toda vez que uma branch de production ou preview que estiver configurada tiver código commitado a Vercel irá automaticamente atualizar o site!