Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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
. Isso tornou a, 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:
Criar e executar uma imagem Docker a partir do repositório de código Git.
Obter e executar uma imagem Docker a partir de um repositório de imagens;
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:
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.
- 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.
Projeto Cronapp criado. Caso haja dúvidas de como criar um projeto, acesse a documentação Criar projeto.
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.
Âncora | ||||
---|---|---|---|---|
|
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.
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
## 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 |
Dica |
---|
Caso necessário, é possível editar o Ao exportar o pacote para Deploy via comando Maven ( Veja a lista de parâmetros Cronapp ao gerar pacotes Maven no tópico Exportando war via comando (High-code) da documentação Importar e exportar projetos. |
Passos
Este tutorial irá apresentar demonstrará como executar , via comandos no WSL, os quatro tipos de opções disponíveis para de Pacote para Deploy.
War Completo
A primeira opção que vamos executar no utilizando comandos no terminal WSL. Para mais informações sobre este recurso, consulte o tópico "Pacote para Deploy é a "" da documentação Importar e exportar projetos.
War Completo
". Para issoiniciar, acesse no menu do sistema Projeto > Exportar. Em seguida, escolha selecione a opção "Pacote para Deploy" (destaque 1 da Figura 1). Na janela que abrir escolha no campo "Tipo de Artefato" exibir, escolha a opção "War Completo" no campo Tipo de Artefato (2) e habilite a checkbox do campo "Dockerfile ", assim como exibe a imagem abaixo. (3), conforme apresentado na imagem abaixo. Por fim, clique em "OK" para iniciar o download do pacote.
Âncora | ||||
---|---|---|---|---|
|
Image Added
Figura 1 - Janela Pacote para Deploy
Após finalizar concluir o download do pacote, extraia os arquivos da pasta .zip
baixada para uma pasta descompactada, para este exemplo a nomeamos como "war-completo". Em seguida, adicione adicionamos a pasta descompactada no diretório wsl, para este exemplo adicionamos a pasta no diretório WSL do usuário, seguindo o caminho \\wsl.localhost\Ubuntu-20.04\home\laila
. Assim como mostra a imagem abaixo.<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.
Image Added
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
. Para isso, no terminal no terminal do WSL. No terminal, acesse o diretório que contém a pasta descompactada e execute o seguinte comando:
Bloco de código | ||||
---|---|---|---|---|
| ||||
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).
Image Added
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.
Âncora | ||||
---|---|---|---|---|
|
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.
Image Added
Figura 1.2 - Terminal e execução no navegdor
War Separado
War Servidor
War Front-end
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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
Âncora | ||||
---|---|---|---|---|
|
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.
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
sudo su |
Se o diretório /var/www/htm
l ainda não foi criado, execute o comando abaixo. Caso contrário, você pode prosseguir para o próximo passo.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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/htm
l. para isso execute o comando abaixo, substituindo "<nome-da-pasta>" pelo caminho do seu diretório.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
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
Zip Front-end