--- name: azion-desenvolva-com-astro description: >- Crie um site Astro a partir de um template da Azion, de um repositório do GitHub ou da Azion CLI, e faça o deploy dele em um domínio da Azion. --- # Desenvolva com Astro Você pode fazer o deploy de um site Astro na Azion a partir de um template no Azion Console, do seu repositório do GitHub ou com a [Azion CLI](/pt-br/documentacao/devtools/cli/). Todas as rotas terminam com o site em execução na Azion, respondendo em um domínio da Azion. A Azion executa um site Astro como uma aplicação estática. O build grava o site em `./dist`, e o deploy envia essa pasta para um bucket de storage que uma [application](/pt-br/documentacao/plataforma/applications/) serve. Para os outros frameworks dos quais a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Selecione a rota que você vai usar. Os pré-requisitos e as etapas de deploy abaixo seguem essa escolha. ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. O deploy de um template conecta essa conta quando o formulário pede. **GitHub** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. - Um repositório do GitHub que contém um projeto Astro. **CLI** - A Azion CLI instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior e npm. - Um terminal e um editor de código. --- ## Templates do Astro Um template é um projeto Astro pronto do qual a Azion faz o deploy para você. A rota do Console começa a partir de um destes templates: | Template | Uso | | -------------------------------------------------------------------------------------------------------------------- | -------------------------- | | Astro Audiophile | E-commerce | | [Astro Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/astro-boilerplate/) | Projeto inicial | | [Astro Blog Starter Kit](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/astro-blog-starter-kit/) | Criação de blog | | Astro Ecommerce | Plataforma de e-commerce | | Astro with Multiple Frameworks | Projeto inicial | | Astro with Framework Preact | Projeto inicial | | Astro Minimal | Projeto inicial | | Astro with Non-HTML Pages | Conteúdo não HTML | | Astro Portfolio | Site de portfólio | | Astro Quickstore | E-commerce | | Astro Starlog | Notas de versão de projeto | | Astro with Markdoc | Projeto inicial | | Astro Markdown with Plugins | Projeto inicial | | Astro Markdown with Shiki | Demonstração de código | | Astro with MDX | Projeto inicial | | Astro with Nano Stores | E-commerce | | Astro with Tailwind CSS | Integração com Tailwind | | Astro with Vitest | Projeto inicial | | Cosmic - Simple Astro Blog | Blog | | Devscard | Portfólio de desenvolvedor | | Clean Astro App with Sanity | Integração com CMS | | Webpage to PDF Resume | Gerador de currículo | Dois templates têm um guia próprio, com link na tabela. Para mais informações sobre os outros, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). Na rota da CLI, o `azion init` lista os templates do preset Astro no seu próprio seletor. --- ## Fazer o deploy do site Cada rota faz o build do projeto Astro e cria os recursos que o servem na Azion. Siga o painel da rota que você selecionou: **Console** Para fazer o deploy de um template Astro pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Encontre os templates Astro** Em **Search by name, framework, or keyword**, digite `Astro`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo do template. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** A página de deploy abre e mostra o **Deploy Log** durante o build do projeto. Quando o deploy termina com sucesso, aparece **Successfully created!**, e a página mostra a URL do domínio e um botão **Manage** que abre a application. **GitHub** Para fazer o deploy de um projeto Astro a partir do seu repositório do GitHub: 1. **Abra o Import from GitHub** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Selecione o card de importação** Selecione o card na aba **Import from GitHub**. A página **Import from GitHub** abre. 3. **Conecte sua conta do GitHub** Se nenhuma conta do GitHub estiver conectada, em **GitHub Connection**, selecione **Connect with GitHub**. 4. **Selecione o repositório** Selecione um **Git Scope** e depois o **Repository** que contém o projeto Astro. 5. **Dê um nome à application** Em **General**, digite um **Application Name**. O campo começa com o nome do repositório, e o bucket de storage e a [function](/pt-br/documentacao/plataforma/functions/) recebem o mesmo nome. 6. **Selecione o preset Astro** Defina **Preset** como *Astro*. 7. **Defina o diretório raiz** Em **Root Directory**, mantenha `/` quando o projeto Astro estiver na raiz do repositório. 8. **Digite o comando de instalação** Em **Install Command**, digite `npm install`. 9. **Selecione Deploy** A página de deploy abre com o título `Deploy:` seguido do nome da application e mostra o **Deploy Log** durante o build do projeto. Quando o deploy termina com sucesso, aparece **Successfully created!** com a URL do domínio. Para a seção **Variables** e todos os campos do formulário, consulte [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github/). **CLI** Para criar o projeto, execute `azion init` com um nome. Nos dois seletores, selecione *Astro* e depois um template: ```bash azion init --name my-site --auto -y ``` A opção `-y` instala as dependências, e `--auto` pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Sem elas, o comando faz as perguntas que [Azion CLI init](/pt-br/documentacao/devtools/cli/init/) lista. Com o template *Astro Audiophile*, o comando imprime: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Astro ? Choose a template: [Use arrows to move, type to filter] > Astro Audiophile Astro Basics Astro Blog Starter Kit Astro Boilerplate Astro Ecommerce Astro with Multiple Frameworks Astro Init Astro Minimal Astro with Non-HTML Pages Astro Odyssey Astro Portfolio Astro Quickstore Astro Starlog Astro with Markdoc Astro Markdown with Plugins Astro Markdown with Shiki Astro with MDX Astro with Nano Stores Astro with Tailwind CSS Astro with Vitest Cosmic - Simple Astro Blog Devscard Clean Astro App with Sanity Webpage to PDF Resume ? Choose a template: Astro Audiophile Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies added 209 packages, and audited 210 packages in 19s 75 packages are looking for funding run `npm fund` for details 2 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: astro [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` O comando cria o projeto em uma pasta `my-site`. O `azion.config.mjs` do projeto define o preset `astro` e envia `./dist` para um bucket de storage que os workloads só podem ler. Para todas as configurações desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do site, mude para a pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O comando executa o build do Astro pelo Azion Bundler com o preset `astro` e grava o site em `dist`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset astro … [Azion] [Build] › ℹ info Using preset: astro [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Astro] › ℹ info > astro-commerce@0.0.1 build > astro build [Astro] › ℹ info 11:50:50 [types] Generated 157ms [Astro] › ℹ info 11:50:50 [build] output: "static" 11:50:50 [build] mode: "static" 11:50:50 [build] directory: /my-site/dist/ 11:50:50 [build] Collecting build info... 11:50:50 [build] ✓ Completed in 212ms. ... (61 more lines) [Astro] › ℹ info 11:50:51 [build] 11 page(s) built in 1.56s [Astro] › ℹ info 11:50:51 [build] Complete! [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "astro" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` Para fazer o deploy do site, execute `azion deploy` na pasta do projeto: ```bash azion deploy ``` O comando envia o projeto e abre a página do Console que acompanha o deploy. Ele também imprime a URL dessa página caso o navegador não abra. Quando o deploy termina, o comando imprime a URL do domínio do site. Para a saída completa e todas as flags, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para executar o site na sua máquina antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para fazer o deploy de um projeto Astro que já existe, execute `azion link` na pasta dele e selecione o preset Astro, como descreve [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar o site O deploy retorna a URL do domínio da Azion do site, no formato `https://xxxxxxxxxx.map.azionedge.net`. O Azion Console mostra essa URL na página de deploy, e o `azion deploy` a imprime ao terminar. Abra a URL em um navegador para ver o site Astro. O primeiro deploy pode levar vários minutos para responder a partir de todas as localidades; os deploys seguintes levam cerca de dois minutos. Até que uma localidade receba o site, o domínio responde com uma página `404` que diz `There's nothing here yet`. Diante dessa resposta, aguarde e solicite a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja de quais frameworks e presets a Azion faz o build. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que mudam um deploy. - [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github.md): Configure todos os campos da importação do GitHub, incluindo as variáveis. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset Astro gera.