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 Deploy (destaque 1 da Figura 1) e, na . Na janela que exibir, escolha escolha a opção "War Completo" no campo Tipo de Artefato (2) a opção "War Completo" 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.

Figura 1 - Janela Pacote para Deploy

figura1.1

Após finalizar concluir o download, extraia os arquivos da pasta .zip para uma pasta descompactada que , 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).

Em seguidaAlém disso, vamos alterar a porta em que será executado na qual o projeto local será executado. Por padrão, o script run.sh (destaque 1 da na Figura 1.1), que possui comandos docker que facilitam a virtualização da aplicaçãocontendo os comandos Docker, utiliza a porta 80 para a execução do projeto. No entanto, essa é a porta padrão utilizada no ngnix... <TO DO> Vamos pelo Ngnix. Portanto, vamos alterá-la para a porta 81, para . Para isso, abra o script run.sh em um editor de texto e faça a alteração de altere "80:80" para "81:80" (2). Por fim, salve as alterações.

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

Após seguir esses passos, vamos executar no terminal do wsl 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 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 local com a porta configurada no script run.sh: http://localhost:81/. Na imagem abaixo, ao lado direito à direita, podemos ver a execução do projeto no terminal wsl e ao lado esquerdo 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 exportar executar um pacote War Servidor e um War Front-end de forma separadaseparadamente.

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 e siga os passos WSL, a nomeamos como "war-servidor".

Abra o script run.sh (destaque 1 da Figura 1.12) em um editor de texto para alterar a porta utilizada no script run.sh . Altere a porta 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

Visto que se trata apenas do war servidorUma vez que estamos lidando apenas com o War Servidor, não é possível acessar a aplicação com interfaces web. Para isso, teremos que será necessário exportar o war front War Front-end e utilizar usar o endereço "http://localhost:<porta-configurada>/ de acordo com a porta configurada 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 War Servidor anteriormente.

Em seguida, faça o download da aplicação e siga os passos descritos na Figura 1.1, descompactando os arquivos e adicionando a extraia os arquivos da pasta .zip para uma pasta descompactada no diretório wsl e, em seguida, altere a porta utilizada no arquivo run.sh. Para isso, abra 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 83. 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 do arquivo run.sh

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

sh run.sh

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: 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 fronfront-tend end de uma aplicação web, que pode ser utilizado servindo diretamente ao Nginx, por exemplo. 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 download do pacote, descompacte os arquivos e adicione a pasta descompactada no ao diretório wsldo WSL, como mostra a imagem abaixo. Visto que exibido na Figura 1.5 nomeamos a pasta como "zip-front-end" (destaque 1). Como a opção Dockerfile do pacote deploy não foi habilitada no pacote, o script run.sh não é incluído no pacote, para está incluído. Para executar a aplicação localmente usaremos o ngnix., 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 Figura - 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 localmenteAbra o terminal wsl, e instale e configure o Ngnix. Após a instalação, no arquivo de configuração do ngnix (ngnix.conf), será preciso adicionar a configuração do servidor que executará a aplicaçãono 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/homewww/lailahtml/zip<nome-frontda-endpasta>; 
		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