Desenvolva com Angular
Crie um app Angular 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.
Você pode colocar um app Angular na Azion de três formas: fazer o deploy de um template pelo Azion Console, importar o seu repositório do GitHub ou usar a Azion CLI. Cada rota termina com o app no ar em um domínio da Azion.
A Azion serve um app Angular como uma aplicação estática. A etapa ng build grava o app compilado em ./dist, o deploy copia essa pasta para um bucket de storage, e uma application entrega o app. Para ver de quais outros frameworks a Azion faz o build, consulte Compatibilidade com web frameworks.
Escolha a sua rota primeiro. Os pré-requisitos e o procedimento de deploy a seguir mudam com essa escolha.
Pré-requisitos
- Uma conta da Azion. Para criar uma, consulte Criar uma conta.
- Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
- Uma conta do GitHub, que o formulário do template conecta quando pede uma.
Templates do Angular
Um template Angular é um projeto inicial completo do qual a Azion faz o build e o deploy para você. Na rota do Console, você escolhe um destes:
| Template | Uso |
|---|---|
| Angular Boilerplate | Projeto inicial |
| Angular with ButterCMS Starter Project | Projeto inicial |
O Angular Boilerplate tem um guia próprio, com link na tabela. Para mais informações sobre o outro template, consulte Marketplace da Azion. Na rota da CLI, o seletor de templates do azion init mostra todos os templates do preset Angular.
Fazer o deploy do app
Todas as rotas fazem o build do projeto Angular e criam os recursos da Azion que o servem. Use o painel que corresponde à rota que você escolheu:
Para criar o projeto, execute azion init com um nome de projeto e depois selecione Angular no seletor de presets e um template no seletor de templates:
Com -y, o comando instala as dependências. Com --auto, ele não pergunta se deve iniciar um servidor de desenvolvimento local nem se deve fazer o deploy. Para as perguntas que ele faz sem essas opções, consulte Azion CLI init. Com o template Angular Boilerplate, a saída é:
O projeto fica em uma pasta my-site. O azion.config.cjs do projeto define o preset angular e envia ./dist para um bucket de storage que os workloads só podem ler. O mesmo arquivo adiciona uma regra chamada Redirect to index.html, que reescreve as rotas para /index.html para que o Angular trate o roteamento no navegador. Para todas as configurações do arquivo, consulte azion.config.js.
Para fazer o build do app, vá para a pasta do projeto e execute azion build:
O Azion Bundler executa ng build com o preset angular e grava o app compilado em dist:
Para fazer o deploy do app, execute azion deploy a partir da pasta do projeto:
O azion deploy envia o projeto e abre a página do Console que acompanha o deploy, e imprime a URL dessa página para o caso de nenhum navegador abrir. No final, ele imprime a URL do domínio do app. Para a saída completa e as flags que mudam um deploy, consulte Azion CLI deploy.
Para testar o app na sua máquina primeiro, consulte Azion CLI dev. Para um projeto Angular que você já tem, execute azion link na pasta dele e selecione o preset Angular. Para mais informações, consulte Azion CLI link.
Verificar o site
Cada rota termina com a URL do domínio da Azion do app, no formato https://xxxxxxxxxx.map.azionedge.net. A página de deploy do Console mostra a URL, e o azion deploy a imprime como última etapa. Abra a URL em um navegador para carregar o app Angular.
O primeiro deploy pode levar vários minutos para responder a partir de todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não recebeu o app retorna uma página 404 com o texto There's nothing here yet. Quando receber essa página, aguarde e solicite a URL novamente.