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 que possua apenas o Docker instalado, possibilitando a integração com múltiplos clouds, como AWS, Azure ou Google.

Nesse exemplos usamos o Docker como tecnologia de container, porém, seria possível utilizar outras ferramentas, como o Kubernetes.

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

Em breve essa documentação será atualizada.

Nesse tutorial, mostraremos como:

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 e configurado.Docker Engine instalado e logado em seu registry, como o DockerHub. 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, normalmente localizado na raiz do projeto. Todos os projetos criados a partir da versão 2.7 do Cronapp já possui esse arquivo configurado para . 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 apresenta 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.

## Consulte a documentação do Docker em https://docs.cronapp.io para informações sobre o conteúdo desse arquivo.

FROM ubuntu:18.04 as maven_builder 
RUN apt update && apt install -y maven openjdk11-11-jdk npm git bash
WORKDIR /app
ADD pom.xml /app/pom.xml
RUN git config --global url."https://".insteadOf git://
ARG TIER
ARG CONTEXT_USE
ARG MOBILE_APP

## Para repositório EXTERNO não é necessário alterações.
## Para repositório INTERNO comente as linhas 16, 17 e 18 e retire os comentários nas linhas 21, 22, 23 e 24.

## Usando repositórios externo - JAR e NPM
RUN mvn dependency:go-offline -B
ADD . /app
RUN cd /app && mvn package -X -Dcronapp.profile=${TIER} -Dcronapp.useContext=${CONTEXT_USE} -Dcronapp.mobileapp=${MOBILE_APP}

## Usando repositórios interno - JAR e NPM
#ADD settings.xml  $HOME/.m2/settings.xml
#RUN npm config set registry https://my.registry.com/your-repository/name && mvn -s /app/settings.xml dependency:go-offline -B
#ADD . /app
#RUN cd /app && mvn -s /app/settings.xml package -X -Dcronapp.profile=${TIER} -Dcronapp.useContext=${CONTEXT_USE} -Dcronapp.mobileapp=${MOBILE_APP}

FROM tomcat:9.0.17-jre11
RUN rm -rf /usr/local/tomcat/webapps/* && groupadd tomcat && useradd -s /bin/false -M -d /usr/local/tomcat -g tomcat tomcat
COPY --from=maven_builder /app/target/*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
RUN chown tomcat:tomcat -R /usr/local/tomcat
USER tomcat

Passos

Este tutorial irá apresentar demonstrará como executar , via comandos no WSL, 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, escolha selecione a opção Pacote para Deploye, na (destaque 1 da Figura 1). Na janela que exibir, escolha no campo Tipo de Artefato escolha a opção "War Completo" no campo Tipo de Artefato (2) e habilite a checkbox do campo Dockerfile (3), assim como conforme apresentado na imagem abaixo. Por fim, clique em "OK" para iniciar o download do pacote.

Image Added

Figura 1 - Janela Pacote para Deploy

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

Figura 1.1 - Diretório wsl onde a pasta descompactada foi adicionada

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.

Image Added

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

Após seguir faça a alteração.Após esses passos, vamos executar no terminal do wsl o script run.sh que possui comandos docker que facilita a virtualização da aplicação no terminal do WSL. No terminal wsl , acesse o diretório que contém a pasta descompactada e execute o seguinte comando abaixo.:

sh run.sh

Após a execução do executar o comando, será possível você poderá abrir o projeto local localmente no navegador utilizando usando o endereço localhost:80.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).

Image Added

Figura 1.2 - Terminal e execução no navegadorExecuçã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 exportar executar um pacote war servidor e um frontWar Servidor e War Front-end de forma separadaseparadamente.

War Servidor

Na opção "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" e , habilite a checkbox Dockerfile, em seguida (3) e faça o download da aplicação, após finalizar o download siga os passos da Figura 1.1. e 1.2. Após configurar o servidor, copie a url resultante que será utilizada na configuração do front-end, como exibido no tópico abaixodo 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.

Image Added

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 "Pacote Opções de Geração de Pacote para Deploy ", na opção "(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 "Url Endereço do servidor" cole a url do passo anterior. Em seguida, faça o download da aplicação. Após seguir os passos descritos na Figura 1, será preciso alterar a porta utilizada no arquivo run.sh. Para isso, abra um arquivo (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 e faça a alteração da primeira porta 80 para 81, por exemplo, como exibe a imagem abaixo.para alterar a porta utilizada no script run.sh de "80" para "83" (destaque 2) e salve as alterações.

Image Added

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

Após esta etapa, siga os passos da Figura 1.2. Por fim, poderá executar o projeto local no navegador utilizando o endereço configurado.

Zip Front-end

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.

Image Added

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)Na janela "Pacote para Deploy", na opção "Tipo de Artefato", escolha a opção "Zip Front-end". Não será preciso habilitar a checkbox Dockerfile . Faça o download do pacote.(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. 

Image Added

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.

Image Added

Figura 1.6 - Projeto executando localmente