Desenvolva com Vue
Faça o deploy de uma single-page application Vue na Azion a partir de um template no Azion Console, de um repositório do GitHub ou da Azion CLI.
Você pode colocar um app Vue na Azion a partir de um template no Azion Console, de um repositório do GitHub que você tem ou com a Azion CLI. Os três caminhos terminam com o app no ar em um domínio da Azion.
A Azion executa um app Vue como uma aplicação estática. O deploy envia os arquivos do build para um bucket de armazenamento, e uma aplicação os serve a partir dele. Para ver de quais outros frameworks a Azion faz o build, consulte Compatibilidade com web frameworks.
Escolha um caminho abaixo. Os pré-requisitos e o procedimento de deploy mudam com a sua escolha.
Pré-requisitos
- Uma conta na Azion. Para abrir uma, consulte Criar uma conta.
- Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
- Uma conta no GitHub, que o formulário do template conecta quando a solicita.
Templates Vue
Um template Vue é um projeto inicial completo de que a Azion faz o build e o deploy para você. O seletor de templates do preset Vue no azion init inclui estes três:
| Template | Uso |
|---|---|
| Vue.js with ButterCMS Starter Project | Integração com CMS |
| Vue3/Vite Boilerplate | Single-page application com Vite |
| Vue Boilerplate | Single-page application |
Cada template tem link para o seu guia. O starter ButterCMS compartilha o guia com os templates ButterCMS de outros frameworks. Para mais informações sobre templates, consulte Marketplace da Azion.
Faça o deploy do app
Todo caminho faz o build do projeto Vue e cria os recursos que o servem na Azion. Use o painel do caminho que você escolheu:
Para criar o projeto, execute azion init com um nome de projeto. No seletor de presets, selecione Vue e, no seletor de templates, selecione um template:
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 Vue Boilerplate, a saída é:
O projeto é criado em uma pasta my-app. O azion.config.cjs dele define o preset vue e envia ./.edge/assets para um bucket de armazenamento que os workloads só podem ler. O arquivo também gera duas regras de requisição para a aplicação:
Deliver Static Assets and Set Cache Policyserve a partir do bucket os arquivos com extensão estática, como.jsou.css. A política de cache dela definemaxAgeSecondscomo7200para o navegador e para o cache.Redirect to index.htmlreescreve as requisições de rotas para/index.html, para que o roteador do Vue resolva cada rota no navegador.
Para todas as configurações desse arquivo, consulte azion.config.js.
Para fazer o build do app, entre na pasta do projeto e execute azion build:
O Azion Bundler executa vite build com o preset vue. O Vite grava o app em dist, e os arquivos que o deploy envia ficam em .edge/assets:
Para fazer o deploy do app, execute azion deploy na pasta do projeto:
O deploy envia o projeto e abre a página do Azion Console que o acompanha. Se o navegador não abrir, use a URL dessa página, que o comando imprime. No final, o comando imprime a URL do domínio do app. Para a saída completa e as flags que alteram um deploy, consulte Azion CLI deploy.
Para executar o app na sua máquina antes, consulte Azion CLI dev. Para um projeto Vue que você já tem, execute azion link na pasta dele e selecione o preset Vue, como descreve Azion CLI link.
Verifique o app
Cada caminho retorna a URL do domínio da Azion do app, no formato https://xxxxxxxxxx.map.azionedge.net. A página do deploy no Console mostra a URL, e o azion deploy a imprime ao terminar. Abra a URL em um navegador para carregar o app Vue.
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 recebeu o app responde com uma página 404 que diz There's nothing here yet. Se você receber essa página, aguarde e solicite a URL novamente.