Pular para o conteúdo

Faça o deploy do seu site Astro na Netlify

Netlify oferece hospedagem e serviços de backend serverless para aplicações web e sites estáticos. Qualquer site Astro pode ser hospedado na Netlify!

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

Você pode fazer o deploy do seu projeto Astro na Netlify de três maneiras diferentes: como um site estático, como um site renderizado no servidor ou como um site renderizado na Edge.

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 Netlify.

Para habilitar o SSR em seu projeto Astro e fazer o deploy na Netlify, incluindo uso de funções na Edge pela Netlify:

Adicione o adaptador para Netlify 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 netlify

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

  1. Instale o adaptador @astrojs/netlify 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/netlify
  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 netlify from '@astrojs/netlify/functions';
    export default defineConfig({
    output: 'server',
    adapter: netlify(),
    });

Você também pode fazer o deploy do seu projeto utilizando Edge Functions da Netlify adicinando edgeMiddleware: true na configuração do adaptador Netlify.

astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';
export default defineConfig({
output: 'server',
adapter: netlify({
edgeMiddleware: true
}),
});

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

Se o seu projeto está armazenado no GitHub, GitLab, BitBucket ou Azure DevOps, você poderá utilizar a interface do site da Netlify para fazer o deploy do seu site Astro.

  1. Clique em Add a new site em seu painel de controle da Netlify

  2. Escolha Import an existing project

    Quando você importa seu repositório Astro do seu provedor Git, a Netlify deve detectar e pré-preencher automaticamente as configurações corretas para você.

  3. Certifique-se de que as seguintes configurações foram inseridas, e então clique no botão Deploy:

    • Build Command: astro build ou npm run build
    • Publish directory: dist

Depois de fazer o deploy você será redirecionado para a página de visão geral do site. Lá você pode editar os detalhes de seu site.

Quaisquer alterações futuras no seu repositório de origem acionarão deploys de visualização e produção baseados em sua configuração de deploy.

Opcionalmente, você pode criar um arquivo netlify.toml na raiz do repositório do seu projeto para configurar o seu comando de build e o diretório de publicação, bem como outras configurações de projeto, incluindo variáveis de ambiente e redirecionamentos. A Netlify lerá este arquivo e configurará automaticamente o seu deploy.

Para definir as configurações padrão, crie um arquivo netlify.toml com o seguinte conteúdo:

[build]
command = "npx pnpm install --store=node_modules/.pnpm-store && npm run build"
publish = "dist"

📚 Mais informações em “Deploying an existing Astro Git repository” no blog da Netlify

Você também pode criar um site na Netlify e vincular o seu repositório Git instalando e usando a CLI da Netlify.

  1. Instale a CLI da Netlify globalmente

    Terminal window
    npm install --global netlify-cli
  2. Execute netlify login e siga as instruções para fazer login e autorizar a Netlify

  3. Execute netlify init e siga as instruções

  4. Confirme o seu comando de build (astro build)

    A CLI detectará automaticamente as configurações de build (astro build) e o diretório de deploy (dist) e oferecerá a geração automática do arquivo netlify.toml com estas configurações.

  5. Faça o build e o deploy fazendo push para o Git

    A CLI adicionará um chave de deploy ao repositório, o que significa que o seu site será reconstruído automaticamente na Netlify toda vez que você executar git push.

📚 Mais detalhes da Netlify em Deploy an Astro site using the Netlify CLI

Se você está usando uma imagem de build legada (Xenial) na Netlify, certifique-se de que a versão do Node.js está definida. Astro requer v18.14.1 ou superior.

Você pode especificar a versão do Node.js na Netlify usando:

  • um arquivo .nvmrc em seu diretório base.
  • a variável de ambiente NODE_VERSION na configuração do seu site usando o painel geral da Netlify.

Nenhuma configuração especial é necessária para usar as funções da Netlify com Astro. Adicione o diretório netlify/functions na raiz de seu projeto e siga a documentação das Netlify Functions para começar!

Mais Guias de Deploy

Contribua

O que passa em sua cabeça?

Comunidade