Como importar um projeto existente do GitHub e implantá-lo

Esta documentação ajuda você a importar seu próprio repositório do GitHub para construir e implantar uma aplicação no edge da Azion.

Pré-requisitos

Antes de começar, você deve ter:

Uma conta na Azion.
- Consulte o guia Como criar uma conta na Azion para mais informações.
Uma conta no GitHub para importar seus repositórios.
- Cada push será implantado automaticamente nesses repositórios para manter seus projetos atualizados.

Frameworks suportados

A Plataforma de Edge da Azion oferece suporte para diferentes frameworks Jamstack, incluindo:

Next.js
Angular
Astro
Hexo
React
Vue

Confira alguns exemplos de código para fazer fork e usar como boilerplate, se desejar. Saiba mais sobre Compatibilidade com web frameworks na documentação.

Importe um projeto e configure a edge application

Para começar a criar, siga os passos:

Acesse o Azion Console.
Na página inicial, clique no botão + Create.

Isso abrirá um modal com opções para criar novas aplicações e recursos.

Selecione a opção Import from GitHub e clique no card.

Essa ação abrirá a página de configurações.

Conecte sua conta da Azion com o GitHub.

Um pop-up será aberto para confirmar a instalação da Azion GitHub App, uma ferramenta que conecta sua conta do GitHub com a plataforma da Azion.
Defina suas permissões e acesso ao repositório conforme desejado.

Selecione o GitHub Scope com o qual deseja trabalhar.
Na seção General, preencha os seguintes campos. Campos com um asterisco são obrigatórios.

Edge Application Name *: use um nome único e fácil de lembrar. Se o nome já estiver em uso, a plataforma retornará uma mensagem de erro.
- O bucket para armazenamento e a edge function utilizarão o mesmo nome.
Preset *: defina as configurações iniciais para a aplicação.
Mode *: defina o modo operacional da aplicação dentro do framework. Atualmente, existem dois modos disponíveis: Deliver para conteúdo estático e Compute para processamento no edge (SSR ou Back-End. Apenas suportado para projetos Next.js)
Root Directory *: refere-se ao diretório onde seu código está localizado. Seu código não deve estar em um subdiretório, mas sim no diretório raiz. Um símbolo ./ aparece neste campo, indicando que é um diretório raiz.
Install Command *: o comando que compila suas configurações para construir para produção. Os comandos de construção são executados por meio de scripts. Por exemplo: npm run build ou npm install para o pacote npm.

Na seção Variables, você pode adicionar variáveis de projeto conforme necessário.

As variáveis são compostas por dois valores-chave, no formato VARIAVEL=VALOR. Por exemplo: API_URL=www.apiurl.com/abc.
O campo Key aceita letras maiúsculas, números e underline.
Você pode usá-las como variáveis globais e editá-las ou transformá-las em segredos na página de Variables. Leia a documentação sobre Variables para mais detalhes.

Clique no botão Deploy para iniciar a implantação.

Você pode acompanhar o processo de implantação por meio de uma janela que exibe os logs. Quando estiver completo, uma notificação aparecerá, confirmando que a edge application foi criada com sucesso.

A página também exibirá informações sobre a aplicação e algumas opções para continuar sua jornada, incluindo o domínio para acessá-la e o botão de gerenciamento.

Gerencie sua edge application

Todas as configurações da aplicação podem ser personalizadas sempre que necessário por meio do Azion Console. Para fazer isso, clique no botão Manage que aparece durante a implantação ou vá para a página do Edge Application e selecione a aplicação que deseja atualizar.

Como sua conta da Azion está conectada ao repositório do GitHub, todas as alterações serão replicadas em ambos, mantendo seu projeto atualizado em um fluxo de trabalho de implantação contínua.

Adicione um domínio personalizado

A edge application criada tem um domínio Azion atribuído para torná-la acessível através do navegador. O domínio tem o seguinte formato: xxxxxxxxxx.map.azionedge.net. No entanto, você pode adicionar um domínio personalizado para que os usuários acessem sua aplicação por meio dele.

Saiba mais sobre domínios