Desenvolvendo Calculadora em Vue.Js — Hospedando o Projeto na Nuvem

No último post concluímos o nosso projeto e agora é aquele momento que queremos e desejamos hospedar ele na nuvem, onde todos possam ver o que você de fato desenvolveu.

Durante esse artigo, vamos realizar o deploy da nossa aplicação usando o Azure Web App Service usando o Azure!

Vamos nessa?!

O que é Azure App Service?

O Azure App Service é um serviço que te permite implementar e hospedar de maneira muito rápida aplicativos Web em diferentes linguagens: .NET, .NET Core, Node.js, Java, PHP, Ruby ou Python.

Independente do Sistema Operacional que você esteja usando, seja ela: Windows ou Linux. Você pode também automatizar o seu código com o GitHub, Azure DevOps ou qualquer outro repositório Git.

Caso desejam saber como implementar/hospedar uma aplicação Web no Azure App Service em: Node.js e Site HTML estático, segue os links abaixo para leitura:

• Criar aplicativo Node.js no Azure App Service

• Criar um aplicativo Web HTML estático no Azure App Service

E também, você poderá implementar o Azure App Service usando o Visual Studio Code. Para entender mais, segue os links abaixo:

• Deploy to Azure using App Service

• Deploy a static website to Azure

Mas, fiquem calmos que estaremos ensinando aqui o passo a passo como podemos realizar essa implementação/hospedagem da nossa aplicação! 😉

Criando Conta no Azure

Para realizar a implementação da nossa aplicação na nuvem, vamos precisar criar uma conta no Azure. Há dois tipos de contas:

• Conta Azure: que é a conta comum para quem não é estudante.

• Azure for Students: que é uma conta do Azure dedicada para Universitários e que permite usar o valor de USD 100,00 de maneira gratuita e sem necessidade em obter um cartão de crédito.

Como o enfoque nessa parte do post é realizar a implementação da nossa aplicação na nuvem, há um curso inteiramente grátis que ensina como você pode criar uma conta no Azure de maneira simples e prático:

• Criando uma conta do Azure

Depois de realizar o curso, automaticamente você já criará uma conta no Azure. Ao terminar, podemos seguir com o nosso post!

Hospedando a aplicação no Azure App Service

Executando o comando 'Build'

A primeira coisa que precisamos fazer, antes de realizar a implementação e hospedagem da nossa aplicação é executar o comando build na nossa aplicação.

Antes de executar o comando npm run build, será necessário realizar algumas alterações significativas no arquivo package.json.

Abre o arquivo package.json e altere a versão do pacote abaixo:

"optimize-css-assets-webpack-plugin": "^3.2.0",

Depois, execute o comando no prompt de comando:

rm -rf node_modules

Esse comando fará que desinstale a nossa pasta node_modules. Após isso, agora execute o comando:

npm install

Depois de realizar os passos acima, podemos executa o seguinte comando:

> npm run build

Ao executar esse comando, ele criará uma pasta dist no projeto. E é justamente os arquivos contidos nessa pasta que precisaremos enviar para implementar na nuvem.

Agora sim, podemos hospedar a nossa aplicação.

Criando um Resource Group no Portal Azure

Entre agora no Portal Azure e siga conforme os passos abaixo:

1 - Clique em Resource Groups

2 - Clique no botão Add New Resource Group

3 - Escolha a Subscription que aparecerá para você e depois crie um nome para o campo Resource Group. No meu caso será: CalcVueResourceGroup. E por fim, escolha a Region, no meu caso escolherei: (US) Central US

4 - Depois clique no botão: Review and Create e depois Create

Feito isso, você já terá criado um Resource Group para a sua aplicação. Vamos dar continuidade!

Criando um Resource: Web App

Siga os seguintes passos abaixo:

1 - Clique no botão: Create a Resource onde há um sinal de +

2 - Na caixa de pesquisa, digite: Web App e depois clique no botão: Create

3 - Aparecerá uma outra janela, onde você deverá preencher da seguinte maneira:

• Subscription: (o mesmo Subscription do passo anterior)

• Resource Group: escolher o Resource Group que você criou no passo anterior. No meu caso: CalcVueResourceGroup

• Web App Name: aqui colocaremos o nome do link da nossa aplicação. Deverá ser um nome único. No meu caso, colocarei: glau-calc-vue

• Publish: escolher a opção Code

• Runtime Stack: aqui devemos escolher o runtime. Como estamos trabalhando com o JavaScript, vamos escolher a versão: Node 10.0

• Operating System: escolher a versão Windows

• Region: a mesma região que escolhemos no passo anterior. No meu caso: Central US

Deverá ficar da seguinte maneira:

Na parte de App Service Plan, vamos criar um novo. Para isso, clique no botão: Create New -> criar um novo nome: CalcVueServicePlan -> OK

Agora a cereja do bolo! Vamos alterar o plano para hospedagem grátis. Para isso, faça o seguinte:

1 - Em Sku and size clique em Change size. Depois disso abrirá a seguinte janela:

2 - Clique na caixa: Dev/Test e depois escolha a opção F1 -> e depois clique no botão Apply

3 - Na tag Monitoring, desativar o Application Insigths com a opção No

4 - E por último, clicar no botão: Review and Create -> Create

Feito isso, criará um Web App para nós!

5 - Agora, cliquem em Go to resource

6 - Show! Aparecerá uma outra tela para vocês. Essa tela mostra toda a configuração da nossa aplicação. Nessa tela cliquem na url da aplicação: https://glau-calc-vue.azurewebsites.net

Abrirá a seguinte página:

7 - Vamos entrar no Kudu's da nossa aplicação. Para isso, façam o seguinte, precisaremos colocar scm na url da aplicação, digite da seguinte maneira: https://glau-calc-vue.scm.azurewebsites.net/

8 - Abrirá a seguinte página:

9 - Depois clique em CMD

10 - Depois clique em: Site -> wwwroot

11 - Chegando até esse ponto, vamos agora transferir todos os arquivos da pasta dist do nosso projeto para dentro dessa página conforme o gif abaixo:

12 - Feito isso, digite a url da aplicação: https://glau-calc-vue.azurewebsites.net/ e vejam que a aplicação estará online e funcionando e hospedado na nuvem de maneira gratuita!

Há uma outra maneira que podemos realizar a hospedagem da nossa aplicação de maneira gratuita e melhor: usando o Visual Studio Code! Vamos aprender também agora?!

O que é Azure Storage Account?

Diferente do passo acima, dessa vez iremos hospedar a nossa aplicação no Azure Storage Account

Mas, o que seria o Azure Storage Account?! É um serviço gerenciado pela Microsoft que fornece armazenamento na nuvem altamente disponível, seguro, durável, escalonável e redudante. Esse armazenamento inclui:

• Azure Blobs (objetos)
• Azure Data Lake Storage Gen2
• Azure Files
• Azure Queues
• Azure Tables

No nosso caso, como a nossa aplicação é uma aplicação estática, iremos hospedar num storage container. Através dele, podemos fornecer o conteúdo estático: HTML, CSS e JavaScript - incluso arquivos de imagem.

E para facilitar a hospedagem da nossa aplicação na nuvem, iremos usar:

• Visual Studio Code
• Extensão - Azure Storage
• Extensão - Azure Tools

Essas duas extensões nos ajudarão a entrar no Portal Azure de uma maneira muito mais dinâmica e simples, sem precisar abrir o portal e fazer toda a hospedagem direto no Visual Studio Code!

Hospedando a aplicação no Azure Storage Account no Visual Studio Code

Agora que vocês já baixaram as extensões Azure Tools e Azure Storage Account, vamos hospedar a nossa aplicação na nuvem para que todas as pessoas possam visualizar o que desenvolvemos! Lembrando que você precisará de uma conta Azure para seguir nessa parte do workshop!

1. Abram o seu Visual Studio Code e abram o projeto. Faça o login na conta no Azure, assim como no gif abaixo:

1. Abre o prompt de comando e execute o comando abaixo:

> npm run build

Depois de executar o comando acima, ele criará uma pasta dist no projeto. Ele será muito importante, pois justo os arquivos contidos nessa pasta é que enviaremos para o Azure Storage.

1. Agora vamos configurar uma conta no Azure Storage Accout e um Blob Contêiner. Para isso, clique na extensão do Azure Tools onde está o Azure Storage e depois clique com o botão direito na sua subscription e clique em Create Storage Account.

1. Agora aparecerá uma caixa. Nessa caixa devemos criar um nome único para o nosso Storage Account. Depois pressionar o botão Enter.

2. Depois disso, devemos criar um novo Resource Group

3. E enfim, devemos escolher uma região onde ficará hospedado a nossa aplicação. O ideal é escolher uma região mais próxima no nosso país.

Para entender melhor os passos 4-6, observem o gif abaixo:

1. Ao realizar os passos acima, ele criará um Storage Account para nós. Agora, clique com o botão direito no Storage Account criado e depois clique em Configure Static Website.

2. Crie um documento: index.html e depois clique em Enter.

3. E novamente crie um documento chamado: index.html e depois clique em Enter.

Vejam os passos: 7-9 no gif abaixo:

Ao finalizar os passos: 1 ao 9 estaremos pronto para enviar os arquivos da pasta dist e enfim colocar a nossa aplicação na nuvem! Vamos dar continuidade!

Realizando Deploy da aplicação no Azure Storage Account no Visual Studio Code

Agora que já criamos um conta no Azure Storage usando o Visual Studio Code, o que nos falta agora é justamente realizar o deploy da nossa aplicação para o Azure Storage para que enfim a nossa aplicação fique disponível na nuvem. Vamos seguir com os passos abaixo:

1. Abre a aplicação no Visual Studio Code e clique com o botão direito na pasta dist e escolha a opção: Deploy to Static Website

2. Depois, escolha a Subscription e o Azure Storage Account, criando na agenda 19. Feito isso, podemos clicar na url e vai aparecer a nossa aplicação disponível na nuvem! Vejam os passos no gif abaixo:

E vòilá! E está disponível a nossa aplicação na nuvem!

Legal não é mesmo?!

Palavras Finais

Nessa série vocês puderam aprender e ver que é muito fácil criar um projeto no Vue.js e como é mais fácil ainda hospedar um projeto estático no Azure. E melhor: de maneira totalmente gratuita!

Caso desejam ver todo o projeto pronto, bastam acessar AQUI

Nesse repositório também consta os vídeos ensinando o passo a passo em como desenvolver esse projeto. #ficaadica

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Nos vemos! Até a próxima série pessoal! 😍