--- name: azion-desenvolva-com-gatsby description: >- Crie um site Gatsby a partir de um template da Azion ou com a Azion CLI e faça o deploy dele em um domínio da Azion. --- # Desenvolva com Gatsby Você pode fazer o deploy de um site Gatsby na Azion a partir de um template no Azion Console ou de um projeto que você cria com a [Azion CLI](/pt-br/documentacao/devtools/cli/). As duas rotas terminam com o site servido pela Azion em um domínio da Azion. Um site Gatsby roda na Azion como uma aplicação estática. O build do Gatsby grava as páginas em `./public`, e o deploy envia essa pasta para um bucket de storage que uma [aplicação](/pt-br/documentacao/plataforma/applications/) serve. Para verificar em quais outros frameworks a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha uma rota. Os pré-requisitos e o procedimento de deploy abaixo mudam conforme a sua 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, que o formulário do template conecta quando pede uma. **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 superior, com npm. - Um terminal e um editor de código. --- ## Templates do Gatsby Um template do Gatsby é um projeto Gatsby completo, e a Azion faz o deploy dele por você. A rota do Console faz o deploy de um destes templates: | Template | Uso | | ---------------------------------------------------------------------------------------------------------------------- | ------------------------- | | [Gatsby Blog Starter Kit](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/gatsby-blog-starter-kit/) | Blog | | [Gatsby Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/gatsby-boilerplate/) | Aplicação de página única | | [Gatsby Ecommerce Theme](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/gatsby-ecommerce-theme/) | E-commerce | | Gatsby with ButterCMS Starter Project | Integração com CMS | Três dos templates têm um guia próprio, com link na tabela. Para mais informações sobre o quarto, consulte [Azion Marketplace](/pt-br/documentacao/plataforma/marketplace/). Na rota da CLI, o seletor de templates do `azion init` oferece os mesmos quatro templates do Gatsby. --- ## Fazer o deploy do site Toda rota faz o build do projeto Gatsby e cria os recursos da Azion que o servem. Use o painel da rota que você escolheu: **Console** Para fazer o deploy de um template do Gatsby pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Pesquise por Gatsby** Em **Search by name, framework, or keyword**, digite `Gatsby`. 3. **Selecione um template do Gatsby** 4. **Conecte sua conta do GitHub** Quando 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 onde o repositório do template vai ficar. 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. Após um deploy bem-sucedido, a página mostra **Successfully created!**, a URL do domínio e um botão **Manage** que abre a aplicação. **CLI** Para criar um projeto Gatsby, execute `azion init` com um nome de projeto. Selecione *Gatsby* no seletor de presets e, em seguida, selecione um template: ```bash azion init --name my-site --auto -y ``` Com `-y`, o comando instala as dependências do projeto. Com `--auto`, ele não pergunta se deve iniciar um servidor de desenvolvimento local nem se deve fazer o deploy. Sem as duas opções, o comando faz as perguntas listadas em [Azion CLI init](/pt-br/documentacao/devtools/cli/init/). Com o template *Gatsby Blog Starter Kit*, a saída é: ```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: Gatsby ? Choose a template: [Use arrows to move, type to filter] > Gatsby Blog Starter Kit Gatsby Boilerplate Gatsby Ecommerce Theme Gatsby with ButterCMS Starter Project ? Choose a template: Gatsby Blog Starter Kit Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … ... (41 more lines) … [Azion] [Build] › ℹ info Using preset: gatsby [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 ``` A instalação npm do template exibe linhas `npm warn` sobre peer dependencies, e o projeto é inicializado mesmo assim. O projeto fica em uma pasta `my-site`. O arquivo `azion.config.cjs` dele define o preset `gatsby` e envia `./public` para um bucket de storage com acesso somente de leitura para os workloads. Para cada configuração desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do site, vá para a pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O Azion Bundler executa o build do Gatsby com o preset `gatsby` e grava o site em `public`. A saída é: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset gatsby … [Azion] [Build] › ℹ info Using preset: gatsby [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Gatsby] › ℹ info > gatsby-starter-blog@0.1.0 build > gatsby build [Gatsby] › ℹ info success compile gatsby files - 1.000s [Gatsby] › ℹ info success load gatsby config - 0.017s [Gatsby] › ℹ info [Gatsby] › ℹ info success load plugins - 0.967s ... (112 more lines) └ /using-typescript/ ╭────────────────────────────────────────────────────────────────╮ │ │ │ (SSG) Generated at build time │ │ D (DSG) Deferred static generation - page generated at runtime │ │ ∞ (SSR) Server-side renders at runtime (uses getServerData) │ │ λ (Function) Gatsby function │ │ │ ╰────────────────────────────────────────────────────────────────╯ [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "gatsby" 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 deploy envia o projeto e abre a página do Console que acompanha o deploy. Ele também exibe a URL dessa página, caso o navegador não abra. Ao final, o comando exibe a URL do domínio do site. Para a saída completa e as flags que mudam um deploy, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para testar o site na sua máquina antes do deploy, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para um projeto Gatsby que já existe, execute `azion link` na pasta do projeto e selecione o preset do Gatsby, como descrito em [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar o site Cada rota fornece a URL do domínio da Azion do site, no formato `https://xxxxxxxxxx.map.azionedge.net`. No Azion Console, a URL fica na página de deploy. Na CLI, `azion deploy` a exibe ao final. Abra a URL em um navegador para carregar o site Gatsby. O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não tem o site retorna uma página `404` com o texto `There's nothing here yet`. Se você receber essa página, aguarde e carregue a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja os outros frameworks e presets em que a Azion faz o build. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída completa do deploy e as flags que mudam um deploy. - [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando.md): Execute o site Gatsby na sua máquina antes de fazer o deploy. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset do Gatsby gera.