Como realizar o deploy de uma aplicação Jamstack com Vue

Aplicação estática

Vue.js é um framework JavaScript amigável, versátil e acessível para a construção de aplicações web e interfaces de usuário. Sua natureza progressiva, sistema de reatividade, arquitetura baseada em componentes e comunidade vibrante o tornam uma escolha popular tanto para iniciantes quanto para desenvolvedores experientes no mundo do desenvolvimento web front-end.

Saiba mais sobre o Vue.


Antes de começar, você deve ter:


  1. No terminal, inicialize o projeto:
Terminal window
azion init
  1. Aceite o nome sugerido para o seu projeto ou digite um de sua escolha:
Terminal window
? (Hit enter to accept the suggested name in parenthesis) Your applications name: (remarkable_microscope)

Saída:

Terminal window
Getting templates available
  1. Escolha o template do Vue:
Terminal window
? Choose a template for your project:
Angular
Astro
Hexo
Next
React
Vue
Vite

Agora, a CLI do Vue seguirá o processo e inicializará o seu projeto.

  1. Você pode optar por iniciar um servidor de desenvolvimento local ou não.
Terminal window
? Do you want to start a local development server? (y/N)

Os próximos passos dependem de sua resposta.

Resposta sim para desenvolvimento local

Seção intitulada Resposta sim para desenvolvimento local
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Terminal window
Do you want to install project dependencies? This may be required to start local development server (y/N)

Aguarde até que a instalação seja concluída.

Saída:

Terminal window
Your edge application was built successfully
[Vulcan] [Server] › ✔ success Function running on port http://localhost:3000
  1. No navegador, vá para http://localhost:3000/ e você verá o seu projeto Vue em execução.

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

  1. Pare a execução no terminal com control + c.
  2. Acesse a pasta do projeto:
Terminal window
cd [nome-do-seu-projeto]
  1. Implante o projeto:
Terminal window
azion deploy
  1. Aguarde enquanto o projeto é construído e implantado na Plataforma de Edge da Azion.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Vue na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Resposta não para desenvolvimento local

Seção intitulada Resposta nao para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

  1. Digite y para a seguinte interação, indicando que deseja implantar o projeto:
Terminal window
Do you want to deploy your project?
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Terminal window
Do you want to install project dependencies? This may be required to start local development server (y/N)
  1. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Vue na Plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.


Contribuidores