Pular para o conteúdo

Faça o deploy do seu site Astro na Vercel

Você pode usar a Vercel para fazer o deploy de um site Astro em sua rede edge global com zero configuração.

Este guia inclui instruções para fazer o deploy na Vercel através da interface do site ou da CLI da Vercel.

Você pode fazer o deploy do seu projeto Astro na Vercel como um site estático ou como site renderizado no servidor (SSR).

Seu projeto Astro é um site estático por padrão. Você não precisa de nenhuma configuração adicional para fazer o deploy de um site Astro estático na Vercel.

Para habilitar o SSR em seu projeto Astro e fazer o deploy na Vercel:

Adicione o adaptador para Vercel para habilitar o SSR em seu projeto Astro com o comando astro add a seguir. Isso irá instalar o adaptador e fazer as alterações apropriadas em seu arquivo astro.config.mjs em apenas um passo.

Terminal window
npx astro add vercel

Se preferir instalar o adaptador manualmente, conclua os dois passos a seguir:

  1. Instale o adaptador @astrojs/vercel nas dependências do seu projeto usando seu gerenciador de pacotes preferido. Se você está utilizando o npm ou não tem certeza, execute em seu terminal:

    Terminal window
    npm install @astrojs/vercel
  2. Adicione duas novas linhas ao seu arquivo de configuração do projeto astro.config.mjs.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';
    export default defineConfig({
    output: 'server',
    adapter: vercel(),
    });

Você pode fazer o deploy na Vercel através da interface do site ou da CLI (interface de linha de comando) da Vercel. O processo é o mesmo para sites Astro estáticos e SSR.

  1. Faça o push do seu código para o seu repositório Git online (GitHub, GitLab, BitBucket).
  2. Importe o seu projeto na Vercel.
  3. A Vercel vai detectar automaticamente o seu site Astro e irá definir as configurações corretas.
  4. O deploy de sua aplicação está feito! (ex. astro.vercel.app)

Depois que seu projeto foi importado e o deploy foi feito, todos os pushs subsequentes para branches vão gerar Deploys de Visualização e todas as alterações feitas na branch de produção (geralmente “main”) resultarão em um Deploy de Produção.

📚 Saiba mais sobre a Integração da Vercel com o Git.

  1. Instale a CLI da Vercel e execute vercel para fazer o deploy.

    Terminal window
    npm i -g vercel
    vercel
  2. A Vercel vai detectar automaticamente o seu site Astro e irá definir as configurações corretas.

  3. Quando perguntado Want to override the settings? [y/N], escolha N.

  4. O deploy de sua aplicação está feito! (ex. astro.vercel.app)

Configuração de projeto com vercel.json

Seção intitulada Configuração de projeto com vercel.json

Você pode utilizar vercel.json para sobrescrever o comportamento padrão da Vercel e configurar opções adicionais. Por exemplo, você pode desejar anexar headers a respostas HTTP a partir de seus Deployments.

📚 Aprenda mais sobre configuração de projetos da Vercel.

Astro v2.0 remove suporte para Node 14, então certifique-se de que seu projeto está utilizando Node 18.14.1 ou maior. Você pode definir a versão do Node.js usada durante a Etapa de Build e Funções Serverless pela página “General” em “Project Settings”.

Mais Guias de Deploy