Compilar e implantar nos Aplicativos Web Estáticos do Azure
Até o momento, nós nos concentramos em criar o aplicativo Gatsby usando React, GraphQL e plug-ins. Após a conclusão da criação, a próxima etapa será a compilação do aplicativo. Depois disso, você poderá implantá-lo em qualquer servidor Web ou serviço de hospedagem que possa fornecer arquivos estáticos.
Compilar o aplicativo
A ferramenta de linha de comando do Gatsby fornece um comando para compilar o projeto e criar algo que você possa implantar em qualquer lugar que desejar. O build consiste em HTML, JavaScript, CSS e outros ativos que você tenha incluído.
Criar o build
O Gatsby executa o compilador do React de modo subjacente. Portanto, quando ele produz o build, ele executa várias ações. Ele compila o código do React ao converter o JSX para JavaScript e HTML. Ele também extrai todo o código JavaScript e o coloca em um conjunto de pacotes. Em seguida, cada pacote é otimizado, o que significa que ele os espaços em branco são removidos, as variáveis são renomeadas e as expressões são otimizadas para obter maior velocidade. Os estilos passam por um processo semelhante. Se você tiver escolhido uma biblioteca como LESS, SCSS ou Stylus para o CSS, haverá uma etapa preliminar na qual o CSS é compilado de uma linguagem de alto nível para o CSS. Não há mais nenhuma ação necessária para implantar os arquivos neste momento. É apenas um conjunto de arquivos estáticos que podem ser hospedados em qualquer servidor da Web que possa disponibilizar arquivos.
Implantar o build
Existem muitas tecnologias e serviços capazes de hospedar aplicativos estáticos. Afinal, isso é só HTML, CSS e JavaScript, os quais podem ser hospedados pela maioria dos serviços Web existentes. Para este tutorial, implantaremos nos Aplicativos Web Estáticos, um serviço do Azure especializado em hospedagem de aplicativos estáticos, como aqueles compilados com o Gatsby.
Aplicativos Web Estáticos do Azure
Os Aplicativos Web Estáticos são um serviço do Azure que permite que você pegue alguns arquivos estáticos e os disponibilize usando a nuvem. O que você implanta não é um pacote de implantação, mas um conjunto de arquivos estáticos. Essa é uma boa opção para o Gatsby, pois o que o Gatsby acaba produzindo por meio de um build são arquivos estáticos.
Falando em build, o serviço realmente executa a etapa de build para você. Portanto não há necessidade de compilar nada com antecedência. Ele faz isso localizando o comando build no package.json do projeto Gatsby. Tudo o que você precisa fazer é colocar o projeto em um repositório do GitHub.
Atualmente, o código fica em um diretório no computador. Portanto, você precisará executar algumas ações para implantá-lo no Azure:
Criar um repositório do GitHub e enviar por push para ele: O Gatsby cria um repositório Git para você, que precisará ser enviado por push para o GitHub.
Criar uma instância dos Aplicativos Web Estáticos do Azure: ao usar o portal do Azure para criar uma instância dos Aplicativos Web Estáticos do Azure, você fornecerá a URL para o repositório do GitHub e o nome do subdiretório em que os arquivos estáticos estão localizados no projeto. No caso do Gatsby, esse diretório é chamado de
public/.