Desenvolvendo Calculadora em Vue.Js — Hospedando o Projeto na Nuvem
Tags: tutorial, vue, javascript, beginners
Published: 2019-09-25 15:56:59

---
title: Desenvolvendo Calculadora em Vue.Js — Hospedando o Projeto na Nuvem
published: true
description: Série de artigos ensinando como desenvolver uma Calculadora em Vue.js com a finalidade de ensinar conceitos básicos do framework.
tags: tutorial, vue, javascript, beginners
series: Desenvolvendo Calculadora em Vue.Js
---

No **[último post](https://dev.to/azure/desenvolvendo-calculadora-em-vue-js-refatorando-o-projeto-53l6-temp-slug-3537923)** 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](https://azure.microsoft.com/services/app-service/?WT.mc_id=devto-blog-gllemos)** é 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](https://docs.microsoft.com/azure/app-service/app-service-web-get-started-nodejs?WT.mc_id=devto-blog-gllemos)**

* **[Criar um aplicativo Web HTML estático no Azure App Service](https://docs.microsoft.com/azure/app-service/app-service-web-get-started-html?WT.mc_id=devto-blog-gllemos)**

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](https://code.visualstudio.com/tutorials/app-service-extension/getting-started?WT.mc_id=devto-blog-gllemos)**

* **[Deploy a static website to Azure](https://code.visualstudio.com/tutorials/static-website/getting-started?WT.mc_id=devto-blog-gllemos)**

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](https://azure.microsoft.com/?WT.mc_id=devto-blog-gllemos)**: que é a conta comum para quem não é estudante. 

* **[Azure for Students](https://azure.microsoft.com/free/students/?WT.mc_id=devto-blog-gllemos)**: 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](https://docs.microsoft.com/learn/modules/create-an-azure-account/?WT.mc_id=devto-blog-gllemos)**

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:

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

Depois, execute o comando no prompt de comando:

```bash
rm -rf node_modules
```

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

```bash
npm install
```

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

```bash
> 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](https://azure.microsoft.com/features/azure-portal/?WT.mc_id=devto-blog-gllemos)** e siga conforme os passos abaixo:

1 - Clique em **Resource Groups**

[![Screen-Shot-07-01-19-at-06-37-PM.png](https://i.postimg.cc/fRDRQnPS/Screen-Shot-07-01-19-at-06-37-PM.png)](https://postimg.cc/nCSJq5pn)

2 - Clique no botão **Add New Resource Group**

[![imagem.png](https://i.postimg.cc/sg2nGmQ3/imagem.png)](https://postimg.cc/mt030Qyn)

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**

[![image-1.png](https://i.postimg.cc/dQg9Bnxx/image-1.png)](https://postimg.cc/XXcFNK3f)

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

[![Screen-Shot-07-01-19-at-06-45-PM.png](https://i.postimg.cc/mDvFQpg3/Screen-Shot-07-01-19-at-06-45-PM.png)](https://postimg.cc/bDRJPTbd)

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 +

[![imagem-2.png](https://i.postimg.cc/vZ1rdNxx/imagem-2.png)](https://postimg.cc/xX2JvgR9)

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

[![Screen-Shot-07-01-19-at-06-50-PM.png](https://i.postimg.cc/YCTk25nx/Screen-Shot-07-01-19-at-06-50-PM.png)](https://postimg.cc/K17CJHyK)

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:

[![image-2.png](https://i.postimg.cc/yx0n9Zsd/image-2.png)](https://postimg.cc/CnLjpdZT)

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

[![Screen-Shot-07-01-19-at-06-59-PM.png](https://i.postimg.cc/j2RngwyC/Screen-Shot-07-01-19-at-06-59-PM.png)](https://postimg.cc/47F3n3LT)

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:

[![Screen-Shot-07-01-19-at-07-00-PM.png](https://i.postimg.cc/nzJXrjRT/Screen-Shot-07-01-19-at-07-00-PM.png)](https://postimg.cc/p9sW1Ttn)

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

[![Screen-Shot-07-01-19-at-07-02-PM.png](https://i.postimg.cc/fbZs0cs3/Screen-Shot-07-01-19-at-07-02-PM.png)](https://postimg.cc/w1WZCs7H)

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

[![Screen-Shot-07-01-19-at-07-04-PM-001.png](https://i.postimg.cc/L88wdxm3/Screen-Shot-07-01-19-at-07-04-PM-001.png)](https://postimg.cc/PP02YzpC)

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

[![Screen-Shot-07-01-19-at-07-05-PM-001.png](https://i.postimg.cc/BQqwDmPf/Screen-Shot-07-01-19-at-07-05-PM-001.png)](https://postimg.cc/bdBTfHRm)

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

5 - Agora, cliquem em **Go to resource**

[![Screen-Shot-07-01-19-at-07-11-PM.png](https://i.postimg.cc/90p2bzBm/Screen-Shot-07-01-19-at-07-11-PM.png)](https://postimg.cc/m1tK2LqJ)

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**

[![Screen-Shot-07-01-19-at-07-15-PM-001.png](https://i.postimg.cc/nVsw1X00/Screen-Shot-07-01-19-at-07-15-PM-001.png)](https://postimg.cc/0rsfkygw)

Abrirá a seguinte página:

[![Screen-Shot-07-01-19-at-07-16-PM.png](https://i.postimg.cc/FKBVfZ5m/Screen-Shot-07-01-19-at-07-16-PM.png)](https://postimg.cc/jWy7mySk)

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:

[![Screen-Shot-07-01-19-at-07-28-PM.png](https://i.postimg.cc/28SdxMkm/Screen-Shot-07-01-19-at-07-28-PM.png)](https://postimg.cc/Rq2nSPJb)

9 - Depois clique em **CMD**

[![Screen-Shot-07-01-19-at-07-29-PM-001.png](https://i.postimg.cc/zXQhFf2S/Screen-Shot-07-01-19-at-07-29-PM-001.png)](https://postimg.cc/ppDy2PHp)

10 - Depois clique em: **Site** -> **wwwroot** 

[![Screen-Shot-07-01-19-at-07-30-PM.png](https://i.postimg.cc/85yckyqB/Screen-Shot-07-01-19-at-07-30-PM.png)](https://postimg.cc/TLDfCc2p)

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:

[![gif-1defa342a8d66baa7.gif](https://s3.gifyu.com/images/gif-1defa342a8d66baa7.gif)](https://gifyu.com/image/EmRI)

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! 

[![Screen-Shot-07-01-19-at-07-43-PM-001.png](https://i.postimg.cc/Kzc7sHPn/Screen-Shot-07-01-19-at-07-43-PM-001.png)](https://postimg.cc/2qJB1TX6)

Há uma outra maneira que podemos realizar a hospedagem da nossa aplicação de maneira gratuita e melhor: usando o **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**! 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](https://docs.microsoft.com/pt-br/azure/storage/?WT.mc_id=devto-blog-gllemos)**

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](https://docs.microsoft.com/pt-br/azure/storage/blobs/storage-blob-static-website?WT.mc_id=devto-blog-gllemos)**. 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](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**
* **[Extensão - Azure Storage](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage&WT.mc_id=devto-blog-gllemos)**
* **[Extensão - Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack&WT.mc_id=devto-blog-gllemos)**

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:

[![gif-13d30f8caed4232383.gif](https://s3.gifyu.com/images/gif-13d30f8caed4232383.gif)](https://gifyu.com/image/E04p)

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

```bash
> 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.

3. 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**.

[![gif-14.gif](https://s3.gifyu.com/images/gif-14.gif)](https://gifyu.com/image/E04f)

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

5. Depois disso, devemos criar um novo `Resource Group`

6. 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:

[![gif-15.gif](https://s3.gifyu.com/images/gif-15.gif)](https://gifyu.com/image/E04e)

7. 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`. 

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

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

Vejam os passos: 7-9 no gif abaixo:

[![gif-16.gif](https://s3.gifyu.com/images/gif-16.gif)](https://gifyu.com/image/E06S)

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:

[![gif-17.md.gif](https://s3.gifyu.com/images/gif-17.md.gif)](https://gifyu.com/image/E063)

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](https://github.com/glaucia86/live-coding-vuejs-calculadora)**

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!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

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