O Docker é uma plataforma open source que possibilita a criação e administração de ambientes de forma isolada. Dessa forma, uma aplicação pode ser empacotada dentro de um container com todas as bibliotecas e recursos necessários para ser executada em outro host. Nginx é um servidor web de código aberto que também pode ser utilizado como proxy reverso, balanceador de carga HTTP e servidor de e-mail proxy. Além disso, o Nginx pode ser configurado como um servidor reverso para encaminhar solicitações para uma aplicação front-end.

Nos projetos Cronapp o arquivo Dockerfile pode ser criado ao gerar um Pacote para deploy, tornando a virtualização de uma aplicação Cronapp muito mais simples, bastando apenas descompactar o pacote deploy e executar os scripts run.bat (utilizado para executar comandos no Windows ) ou run.sh (utilizado para executar comandos em sistemas Linux) que acompanha o pacote. Além disso, se você deseja apenas gerar um zip contendo os arquivos estáticos do front-end, pode executar a aplicação localmente usando o Nginx.

Requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais:

1. Conhecimentos básicos sobre Docker e Nginx.

2. WSL instalado. Para mais detalhes de instalação em sistemas Windows, consulte a documentação de referência. 

3. Docker e Ngnix instalado e configurado no WSL. O Nginx será utilizado apenas ao exportar o zip front-end, consulte o tópico correspondente para mais detalhes.

4. Projeto Cronapp criado. Caso haja dúvidas de como criar um projeto, acesse a documentação Criar projeto.

5. Recomendamos que o equipamento possua os requisitos do ambiente de produção.

Terminal

Os comandos exibidos nesse tutorial serão executados via terminal WSL e será necessário que o usuário tenha perfil Administrador (root) do sistema. Para mais informações de instalação e configuração, consulte a documentação oficial.

Arquivo Dockerfile

Para construir uma imagem, o Docker utiliza as instruções contidas no arquivo Dockerfile. Ao exportar um Pacote de Deploy, é possível selecionar a opção Dockerfile (destaque 3 na Figura 1) e incluir esse arquivo junto com o pacote, permitindo construir uma imagem local ou executá-lo em um CI/CD pipeline.

Abaixo apresentamos como esse arquivo está configurado. Os comandos abaixo definem o ambiente e os arquivos que serão incluídos na imagem Docker para executar a aplicação desejada.

FROM cronapp/runtime:1.0.0

#ADD fullchain.pem /etc/nginx/conf.d/fullchain.pem
#ADD privkey.pem /etc/nginx/conf.d/privkey.pem

ENV CRN_MEM="80"
ENV CRN_TIMEZONE="America/Fortaleza"
ENV CRN_GZIP="on"
ENV CRN_STATIC="false"
ENV CRN_SERVER_HOST=""

#ADD io.cronapp.apps.projetodeploy-1.0-SNAPSHOT.war /tmp/html.zip
#RUN unzip /tmp/html.zip -d /usr/share/nginx/html

ADD io.cronapp.apps.projetodeploy-1.0-SNAPSHOT.war /usr/local/tomcat/webapps/ROOT.war

Passos

Este tutorial demonstrará como executar os quatro tipos de opções disponíveis de Pacote para Deploy utilizando comandos no terminal WSL. Para mais informações sobre este recurso, consulte o tópico "Pacote para Deploy" da documentação Importar e exportar projetos.

War Completo

Para iniciar, acesse no menu do sistema Projeto > Exportar. Em seguida, selecione a opção Pacote para Deploy (destaque 1 da Figura 1). Na janela que exibir, escolha a opção "War Completo" no campo Tipo de Artefato (2) e habilite a checkbox do campo Dockerfile (3), conforme apresentado na imagem abaixo. Por fim, clique em "OK" para iniciar o download do pacote.

Figura 1 - Janela Pacote para Deploy

Após concluir o download, extraia os arquivos da pasta .zip para uma pasta descompactada, para este exemplo a nomeamos como "war-completo". Em seguida, adicionamos a pasta descompactada no diretório WSL do usuário, seguindo o caminho \\wsl.localhost\Ubuntu-20.04\home\<nome-do-usuário> (Figura 1.1).

Além disso, vamos alterar a porta na qual o projeto local será executado. Por padrão, o script run.sh (destaque 1 na Figura 1.1), contendo os comandos Docker, utiliza a porta 80 para a execução do projeto. No entanto, essa é a porta padrão utilizada pelo Ngnix. Portanto, vamos alterá-la para a porta 81. Para isso, abra o script run.sh em um editor de texto e altere "80:80" para "81:80" (2). Por fim, salve as alterações.

Figura 1.1 - Diretório wsl onde a pasta war-completo foi adicionada e edição do script run.sh

Após seguir esses passos, vamos executar o script run.sh no terminal do WSL. No terminal, acesse o diretório que contém a pasta descompactada e execute o seguinte comando:

sh run.sh

Após executar o comando, você poderá abrir o projeto localmente no navegador usando o endereço com a porta configurada no script run.sh: http://localhost:81/. Na imagem abaixo, à direita, podemos ver a execução do projeto no terminal do WSL, e à esquerda, a execução do projeto local no endereço configurado (destaque 1 da Figura 1.2).

Figura 1.2 - Execução do projeto local

War Separado

No passo anterior, executamos um pacote completo que integra tanto o back-end quanto o front-end. Agora, vamos apresentar como executar um pacote War Servidor e War Front-end separadamente.

War Servidor

Acesse novamente a janela Opções de Geração de Pacote para Deploy (Figura 1). No campo Tipo de Artefato (destaque 2 da Figura 1), escolha a opção "War Servidor", habilite a checkbox Dockerfile (3) e faça o download do pacote. Em seguida, extraia os arquivos da pasta .zip para uma pasta descompactada no diretório WSL, a nomeamos como "war-servidor".

Abra o script run.sh (destaque 1 da Figura 1.2) em um editor de texto para alterar a porta utilizada no script run.sh de "80" para "82" (destaque 2) e salve as alterações.

Figura 1.2 - Diretório wsl onde a pasta war-servidor foi adicionada e edição do script run.sh

Por fim, no terminal WSL, execute o comando abaixo.

sh run.sh

Uma vez que estamos lidando apenas com o War Servidor, não é possível acessar a aplicação com interfaces web. Para isso, será necessário exportar o War Front-end e usar o endereço "http://localhost:82/" conforme configurado no servidor. Consulte o tópico abaixo para obter mais detalhes.

War Front-end

Na janela Opções de Geração de Pacote para Deploy (Figura 1), no campo Tipo de Artefato (destaque 2 da Figura 1), escolha a opção "War Front-end" e habilite a checkbox Dockerfile (3). No campo Endereço do servidor (4) adicione o endereço "http://localhost:82/" configurado no War Servidor anteriormente.

Em seguida, extraia os arquivos da pasta .zip para uma pasta descompactada no diretório WSL, a nomeamos como "war-front-end". Abra o script run.sh (destaque 1 da Figura 1.3) em um editor de texto para alterar a porta utilizada no script run.sh de "80" para "83" (destaque 2) e salve as alterações.

Figura 1.3 - Diretório wsl onde a pasta war-front-end foi adicionada e edição do arquivo run.sh

Por fim, execute, no terminal WSL, o comando abaixo.

sh run.sh

Agora, com os projetos back-end e front-end em execução, você pode acessar as interfaces web localmente no navegador usando o endereço configurado no front-end: "http://localhost:83/". A imagem a seguir, exibe a página inicial após login na aplicação no endereço destacado.

Figura 1.4 - Execução do projeto local

Zip Front-end

Este pacote é uma versão compactada dos arquivos estáticos do front-end de uma aplicação web, que pode ser utilizado servindo diretamente ao Nginx. Na janela Opções de Geração de Pacote para Deploy, na opção Tipo de Artefato (destaque 2 da Figura 1), escolha a opção "Zip Front-end". Não será preciso habilitar a checkbox Dockerfile (3). No campo Endereço do servidor (4) adicione o endereço "http://localhost:82/" configurado no war servidor.

Após baixar o pacote, descompacte os arquivos e adicione a pasta descompactada ao diretório do WSL, como exibido na Figura 1.5 nomeamos a pasta como "zip-front-end" (destaque 1). Como a opção Dockerfile não foi habilitada no pacote, o script run.sh não está incluído. Para executar a aplicação localmente, vamos utilizar o Nginx. Abra o terminal WSL, e instale o Ngnix. Para detalhes de instalação e configuração, acesse a documentação de referência. 

Figura 1.5 - Arquivos estáticos do zip front-end

Para seguir boas práticas de desenvolvimento, vamos incluir a pasta descompactada "zip-front-end" no diretório var/www/html do WSL. Por padrão, o WSL restringe a criação de diretórios ou alterações nas pastas do sistema de arquivos do Linux, como por exemplo a pasta /var, fora do seu contexto. Por isso, todos os passos deste tópico serão executados via terminal WSL com o perfil de usuário root. Para isso, abra o terminal WSL e execute o comando abaixo e, em seguida, adicione sua senha de usuário.

sudo su

Se o diretório /var/www/html ainda não foi criado, execute o comando abaixo. Caso contrário, você pode prosseguir para o próximo passo.

mkdir -p /var/www/html

Agora vamos copiar a pasta "zip-front-end", que contém os arquivos do pacote deploy, para o diretório /var/www/html. para isso execute o comando abaixo, substituindo "<nome-da-pasta>" pelo caminho do seu diretório.

cp -R <nome-da-pasta>/ /var/www/html

Em seguida, vamos ajustar as permissões de leitura, escrita e execução para os diretórios dentro de /var/www/html. Execute o comando abaixo para realizar essa configuração. Esse comando alterará as permissões para que o proprietário tenha permissão total e outros usuários tenham apenas permissão de leitura e execução.

find /var/www/html -type d -exec chmod 755 {} \;

Também será preciso ajustar as permissões de leitura e escrita para os arquivos dentro dos diretórios de /var/www/html. Execute o comando abaixo para realizar a configuração. Esse comando modificará as permissões para que o proprietário tenha permissão de leitura e escrita, enquanto os outros usuários terão apenas permissão de leitura.

find /var/www/html -type f -exec chmod 644 {} \;

O comando abaixo é utilizado para alterar o proprietário de arquivos ou diretórios do WSL, onde o Nginx será definido como proprietário, garantindo as permissões adequadas para acessar e manipular os arquivos.

chown -R www-data:www-data /var/www/html

Para executar o projeto localmente, será preciso adicionar a configuração do servidor no arquivo de configuração ngnix.conf do Ngnix. Para abrir o arquivo ngnix.conf e editá-lo, execute o comando abaixo.

sudo nano /etc/nginx/nginx.conf

Com o arquivo de configuração aberto, adicione o código abaixo dentro do bloco http{ } do arquivo, substituindo "<nome-da-pasta>" pelo nome utilizado no seu diretório. Para mais informações de configuração, consulte a documentação oficial.

server {
	listen 84; 
	server_name localhost:84; 
	location / {
		root /var/www/html/<nome-da-pasta>; 
		index index.html;  
	}
}

Por fim, execute o comando abaixo para reiniciar o serviço Nginx e aplicar as alterações.

sudo systemctl restart nginx

Para executar o projeto localmente, abra o navegador e informe o endereço com base na porta configurada no arquivo nginx.conf: "http://localhost:84/". A imagem abaixo exibe a aplicação local na página inicial após o login.

Figura 1.6 - Projeto executando localmente