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:
E também, você poderá implementar o Azure App Service usando o Visual Studio Code. Para entender mais, segue os links abaixo:
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:
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:
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!
- Abram o seu Visual Studio Code e abram o projeto. Faça o login na conta no Azure, assim como no gif abaixo:
- 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.
- 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.
Agora aparecerá uma caixa. Nessa caixa devemos criar um nome único para o nosso Storage Account. Depois pressionar o botão
Enter.Depois disso, devemos criar um novo
Resource GroupE 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:
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.Crie um documento:
index.htmle depois clique emEnter.E novamente crie um documento chamado:
index.htmle depois clique emEnter.
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:
Abre a aplicação no Visual Studio Code e clique com o botão direito na pasta
diste escolha a opção:Deploy to Static WebsiteDepois, escolha a
Subscriptione oAzure 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! 😍
Top comments (0)