Introdução

• Muitas vezes finalizamos nossa aplicação e queremos que ela fique disponível para que qualquer um acesse. E ai a questão que fica é: Como fazer isso?
• Certamente para aplicações reais com grande demanda as grandes clouds como AWS, Azure, Google Cloud e etc oferecerem diversas opções.
• Porém para apenas disponibilizar sua aplicação para testes as opções a cima podem ser caras (apesar da maioria ter um free tier).
• Há um tempo podiamos fazer isso facilmente com o Heroku e ainda para o Front End temos opções como o Vercel.
• Uma opção muito interessante que acabei me deparando é o Mogenius que nos possibilita colocar toda a nossa infraestrutura em um lugar só de forma gratuita (existindo opções pagas mais robustas)

Mogenius

Com o Mogenius basicamente precisamos criar o arquivo Dockerfile para a nossa aplicação e integrar com ele, seja integrando diretamente com o nosso repositório, conectando com o repositório que contém a imagem gerada ou fazendo o upload da imagem.

Você configura quanto de RAM, CPU e Disco que disponiblizar para a instância e pronto o mogenus irá cuidar de alocar os recursos em um cluster Kubernetes e configurar o CDN Cloudflare incluindo SSL.

Aqui não irei discutir sobre como utilizar o Docker, mas basicamente uma pesquisa rápida no google te mostra como criar o Dockerfile, por exemplo: Angular + Nginx + Docker

Para esse post criei uma aplicação angular simples com o arquivo Dockerfile, caso você queira utilizar ela basta acessar o repositório:
Repositório app exemplo

Realizando o deploy

Como comentei há algumas maneiras de fazer isso:

• Através da integração com um repositório do github
• Através da integração com o docker hub
• Upload manual da imagem gerada

Nesse caso iremos seguir com a integração com o github

Crie uma conta no Mogenius através do link : Criar conta e confirme seu e-mail.

Após a confirmação do email você deve visualizar a tela:

Clique em create cloudspace, configure com seu nome selecionando o plano gratuito

Selecione a opção Bring Your Code, como destacado na imagem

Agora temos duas opções, no caso de um repositório privado é necessário fazer a conexão com a sua conta do Github. Em um repositório público podemos utilizar a aba public

Config do repositório

Nesse caso vou utilizar o repositório que passei ali em cima para vocês, como ele é publico vou utilizar a aba public.

Em git repository url indicamos a url do repositório, no nosso caso:
https://github.com/vinicius-fernandes/angular-docker-template.git

Em git branch selecionamos a branch desejada, para esse caso selecione a master.

Em docker file name, indicamos o nome do arquivo Dockerfile. Em algumas situações o arquivo pode estar em outra pasta, com isso pode ser necessário indicar o caminho completo, por exemplo se ele estiver na raíz do projeto em um pasta docker esse campo teria o valor Docker/Dockerfile

Em docker context indicamos . para que o contexto seja a pasta raíz do nosso projeto, no caso essa pasta será a pasta que ele irá dar o clone, portanto se por exemplo no nosso repositório tivessemos uma pasta chamada front_end com todo o projeto angular dentro o valor do contexto seria front_end/

Alocação de recursos

Agora vamos destinar um pouco dos recursos disponíveis para essa instância, nesse caso podemos alocar poucos recursos pensando em deixar disponível recursos para subir um backend nessa mesma conta.

Liberação de portas

Precisamos expor a porta 80, pois é através dela que o nginx trabalha conforme configuramos.

Finalizando

Agora com tudo configurado basta clicar em create service, deve demorar em torno de 1 minuto para o serviço estar disponível.

Se tudo deu certo seu serviço deve estar como running

Agora basta obter o external hostname e acessar sua aplicação.

No meu caso minha external url é https://angulardockert-prod-tabnews-gkwgao.mo4.mogenius.io/ que basicamente só tem o template do angular.

Conclusão

A ideia desse post é mostrar mais uma alternativa para fazer o deploy de suas aplicações.

Observe que além do front end, poderia facilmente criar um serviço para o backend e também para o banco de dados. Dessa forma tendo a aplicação completa em um único lugar de forma gratuita e rápida.

Além disso a utilização do docker facilita bastante caso seja necessária mudar para um outro ambiente.

Grande parte do que fizemos até aqui é baseado no quick start da documentação do Mogenius.

É isso pessoal, espero que o post tenha sido útil para vocês e qualquer dúvida vamos discutindo nos comentários