Deploy - Front-end
Deploy do Front-End na Vercel
Deploy do Front-End na Vercel
Passo 1: Conectar o repositório na Vercel
- Acesse a Vercel.
- Faça login com sua conta GitHub, GitLab ou Bitbucket.
- Após o login, clique em New Project para importar um repositório.
- Selecione o repositório que contém o seu projeto Next.js.
- Clique em Import Project para iniciar o processo.
Passo 2: Definir configurações iniciais
- Após importar o repositório, a Vercel irá sugerir algumas configurações padrão baseadas no framework Next.js.
- Não é necessário alterar as configurações de build, a menos que você tenha customizações específicas no projeto.
- Clique em Deploy para iniciar o processo de deploy.
Passo 3: Configurando as variáveis de ambiente (ENVs) na Vercel
Após o primeiro deploy, será necessário configurar as variáveis de ambiente para o seu projeto.
Como adicionar as variáveis de ambiente:
- Acesse o seu projeto na Vercel.
- Vá para a aba Settings.
- No menu lateral, selecione Environment Variables.
- Aqui, você pode adicionar suas variáveis de ambiente para os ambientes de Development, Preview e Production.
Adicione as seguintes variáveis de ambiente conforme o exemplo abaixo. Lembre-se de adicionar os valores adequados para cada variável:
| Key | Value | Environment |
|---|---|---|
ENVIRONMENT | production | Production |
NEXTAUTH_URL | Adicione a URL de produção (por exemplo: https://seuprojeto.vercel.app) | Production |
NEXTAUTH_SECRET | Adicione o segredo do NextAuth (ex: secret-just-launch) | Production |
NEXT_PUBLIC_DOMAIN | Adicione o domínio de produção (ex: https://seuprojeto.vercel.app) | Production |
NEXT_PUBLIC_RESET_PASSWORD_URL | Adicione a URL de redefinição de senha (ex: https://seuprojeto.vercel.app/reset-password) | Production |
API_USERS_URL | Preencha com a URL da API de usuários | Production |
AWS_KEY_ID | Preencha com o ID da sua chave AWS | Production |
AWS_ACCESS_SECRET_KEY | Preencha com a chave secreta da AWS | Production |
REGION | Preencha com a região da AWS | Production |
NEXT_PUBLIC_SUPABASE_URL | Preencha com a URL do Supabase | Production |
NEXT_PUBLIC_SUPABASE_API_KEY | Preencha com a API Key do Supabase | Production |
NEXT_PUBLIC_CRISP_KEY | Preencha com a chave do Crisp | Production |
NEXT_PUBLIC_FORMSPARK_ID | Preencha com o ID do Formspark | Production |
STRIPE_KEY | Preencha com a chave da Stripe | Production |
RESEND_KEY | Preencha com a chave do Resend | Production |
EMAIL_FROM | 'Just Launch <team@justlaunch.com.br>' | Production |
EMAIL_DOMAIN | justlaunch.com.br | Production |
Como adicionar variáveis de ambiente:
- Clique em Add para adicionar uma nova variável.
- Preencha o Key com o nome da variável (por exemplo,
NEXTAUTH_URL). - No campo Value, adicione o valor correspondente à variável.
- Escolha o Environment (ambiente) correto — geralmente, Production.
- Repita este processo para todas as variáveis listadas acima.
Passo 4: Redeploy após configurar as variáveis de ambiente
Após adicionar todas as variáveis de ambiente, você precisará realizar o redeploy do seu projeto:
- Acesse a aba Deployments do seu projeto na Vercel.
- Clique em Redeploy para aplicar as novas configurações de ambiente.
Conclusão
Agora seu projeto está configurado com as variáveis de ambiente necessárias e está em produção na Vercel. Para atualizar as variáveis no futuro, basta retornar à seção de Environment Variables e fazer as alterações necessárias. Após cada modificação, um novo redeploy será necessário.