Criação e deploy de aplicação Reactjs no Azure

INTRODUÇÃO

Uma tarefa comum na rotina diária de um Desenvolvedor de Software é efetuar o deploy de uma aplicação, e saber como realizar isso é fundamental nos dias de hoje. Neste post, iremos mostrar como construir um ambiente e efetuar o deploy de uma aplicação estática Reactjs, utilizando a nuvem Microsoft Azure.

Para quem não conhece, o Microsoft Azure é destinada a executar aplicativos e serviços em nuvem, e é muito utilizada pelas empresas e desenvolvedores de software. Para saber mais sobre a Microsoft Azure, acesse aqui e veja os serviços disponíveis.

Eu sou Felipe Albacete, Tech Lead do time do BotiLabs ( laboratório de Inovação em Tecnologia do Grupo Boticário ), e junto comigo neste post está a Jay Jay , Dev Full Stack no Grupo Boticário.

PRÉ REQUISITOS

1- Possuir uma assinatura na Microsoft Azure. Caso não tenha, acesse aqui e realize o cadastro gratuitamente.

2- Ter Visual Studio Code instalado na máquina. Ccaso não tenha, acesse aqui e baixe a versão mais recente.

3- Ter Node + npm instalado na máquina. Caso não tenha, acesse aqui e baixe a versão mais recente.

4- Ter o npx instalado. Caso não tenha, acesse aqui e baixe a versão mais recente.

Criando os recursos no Azure

Ao acessar o portal do Azure após a criação de sua conta, você verá uma lista de ações que você pode efetuar.

Para iniciarmos, clique em “Criar um Recurso”

Na tela seguinte, pesquise por “Resource Group” (este recurso serve para agrupar todos os recursos utilizados em um projeto) e selecione nas opções que aparecem.

Na tela seguinte, clique em “Criar”.

Em seguida, será exibida a tela acima, onde você deverá selecionar a assinatura onde o recurso será alocado (normalmente, este campo já vem selecionado com sua assinatura ativa).

No campo seguinte, informe o nome do Grupo de Recursos que iremos criar, neste caso, utilizamos o “RG-Medium-StaticWebSite” — utilizamos essa nomenclatura apenas para organização.

Em Região Selecione a região do Azure que iremos colocar nossos recursos. Por uma questão de latência, colocamos na região mais próxima de onde nossa aplicação será utilizada, neste caso, Sul do Brasil.

Clique em “Revisar + Criar”

Nesta tela é exibido o resumo da criação do recurso.

Se tudo estiver OK, clique em “Criar”.

Aguarde a criação do Resource Group e a mensagem acima será exibida.

Clique em “Ir para o grupo de recursos”.

Onde você verá a tela abaixo:

Clique no botão “Adicionar” e a tela abaixo será exibida:

Pesquise por “Storage account” (recurso de armazenamento de arquivos duráveis, onde iremos hospedar nossa aplicação estática) e selecione na lista de resultados.

A tela abaixo será exibida:

Clique no botão “Criar”

Na tela acima temos que colocar algumas informações para a configuração de nossa Storage Account.

Selecione a “Assinatura” no Drop Down.

Em “Grupo de Recursos” selecione o nome que criamos no início do artigo, no nosso caso, “RG-Medium-StaticWebSite”.

Crie um nome para a conta de armazenamento (utilize apenas letras em caixa baixa ou números). Utilizaremos “armstaticwebsite” — se você inserir o mesmo nome, você verá o erro de que ele já existe. Portanto, pode utilizar outro, só não esqueça, pois iremos utilizá-lo em outros momentos ;)

Em “Desempenho”, vamos utilizar a opção “Standard”.

Em tipo de conta, “StorageV2”.

Em replicação para este exemplo, pode utilizar “LRS (armazenamento com redundância local)”.

Clique em “Revisar + criar”.

Verifique o resumo e, se tudo estiver OK, clique em “Criar”.

Aguarde alguns minutos e a tela abaixo será exibida:

Criando uma aplicação Reactjs

Neste post, iremos utilizar o “boilerplate create-react-app” para criar nossa aplicação. Execute os comandos abaixo para criar sua aplicação.

npx create-react-app my-app

cd my-app

yarn start

Com a aplicação Reactjs pronta, o próximo passo é gerar o build da sua aplicação. Execute o comando:

yarn build

Após finalização do build, abra a pasta do projeto utilizando o Visual Studio Code (execute o comando “code”). Ela irá possuir essa arquitetura:

Instalando extensões

Após ter criado sua aplicação com sucesso, o próximo passo é instalar as extensões no Visual Studio Code. Essas extensões ajudam no processo de deploy da sua aplicação.

Na barra de ferramenta esquerda do Visual Studio Code, clique em extensões e pesquise por “Azure Storage”. Selecione o item pesquisado e clique em instalar.

Repita o mesmo procedimento para “Azure Account”.

Depois de ter instalado as extensões, clique com o botão direito do mouse sobre a pasta Build e selecione a opção “Deploy to Static Website via Azure Storage”.

Em seguida, selecione a Storage Account “armstaticwebsite” (caso você possua mais de uma assinatura no Azure, ele exibirá uma lista de assinaturas antes da seleção do Storage Account. Selecione a assinatura onde você criou o recurso).

Clique em “Enable website hosting”…

…e pressione “Enter” para as seguintes configurações.

Ao finalizar o deploy, o Visual Studio Code irá mostrar a mensagem “Deployment complete” e exibirá o endereço onde você poderá acessá-lo, neste caso: https://armstaticwebsite.z15.web.core.windows.net/

Caso não consiga obter o endereço neste momento e já passou por todos os passos, vá até o portal do Azure, dentro do Grupo de recursos que utilizou e selecione a Storage account que criou.

No menu ao lado direito, selecione a opção “Site estático”

No campo “Ponto de extremidade primário ” está o endereço da sua aplicação.

Conclusão

Com estes passos você poderá hospedar qualquer tipo de aplicação estática Reactjs e, com isso, poderá fazer provas de conceito sem se preocupar com a criação de Domínios ou criação de qualquer DNS com custo bastante acessível.

Ficou com dúvidas?

Sinta-se à vontade em entrar em contato conosco através dos nossos perfis no LinkedIn que estão no início deste post.

Nos próximos posts, iremos abordar a criação de APIs para que possamos interagir esta aplicação com Banco de Dados e outras necessidades que devem ocorrer do lado do servidor.

Aguardem ;)