Experts in Angular

The Twelve-Factor AppVII. Port Binding – Expor serviços via port binding
Exportação de Serviços via Port Binding

VII. Port Binding – Expor serviços via port binding

Fazer com que a aplicação seja autossuficiente, vinculando-se a portas para expor seus serviços

7º Fator: Exportação de Serviços via Port Binding

No mundo do desenvolvimento de aplicações web, uma prática comum é executar a aplicação dentro de um servidor de aplicação, como o Tomcat para Java ou o Apache para PHP. No entanto, o sétimo fator da metodologia de doze fatores estabelece que as aplicações devem ser autossuficientes, ou seja, devem expor seus serviços através do vinculamento de portas (port binding) e não depender de um servidor web externo injetado no ambiente de execução.

O Que é Port Binding?

Port binding significa que a própria aplicação deve estar configurada para escutar requisições em uma porta específica, em vez de depender de um servidor web separado para lidar com as requisições HTTP. Ao vincular-se a uma porta, a aplicação se torna diretamente acessível através de uma URL, como http://localhost:4200 no caso de aplicações Angular rodando localmente.

Essa prática é especialmente útil em arquiteturas modernas de microsserviços, onde cada serviço pode ser implementado em uma linguagem ou framework diferente, mas todos expõem suas funcionalidades via uma porta única, acessível por outros serviços ou diretamente por usuários.

Como Isso se Aplica ao Angular?

No Angular, o servidor web para desenvolvimento local é iniciado automaticamente através da Angular CLI com o comando ng serve. Esse comando faz com que o servidor vincule a aplicação Angular a uma porta local (geralmente a porta 4200), tornando a aplicação acessível em http://localhost:4200.

Exemplo de comando no Angular:

ng serve --port 4200

Aqui, o Angular CLI está vinculando a aplicação à porta 4200. Você pode facilmente mudar para outra porta com a opção --port. Essa prática é útil durante o desenvolvimento, permitindo que a aplicação seja autossuficiente para atender requisições HTTP em uma porta específica.

O Conceito de “Autossuficiência” em Angular

Embora o Angular seja um framework frontend que geralmente consome APIs de backend, ele ainda deve ser capaz de servir a si mesmo sem depender de servidores web externos como Apache ou Nginx durante o desenvolvimento. Isso segue o princípio de autossuficiência, permitindo que a aplicação seja completamente independente de ambientes de execução externos até o momento da implantação.

Durante o build para produção, o código da aplicação Angular é compilado em arquivos HTML, JavaScript e CSS otimizados, que podem ser servidos por um servidor web como o Nginx ou hospedados em plataformas de nuvem como AWS S3 ou Netlify. No entanto, a responsabilidade de vincular a aplicação a uma porta durante o desenvolvimento e permitir que ela seja testada localmente recai sobre o próprio Angular CLI.

Vantagens do Port Binding

  1. Autossuficiência da Aplicação: Ao garantir que a aplicação Angular possa ser executada e servida por conta própria (via ng serve), sem depender de infraestrutura externa, o processo de desenvolvimento e teste se torna mais ágil e simples.
  2. Facilidade de Desenvolvimento: Durante o desenvolvimento, você pode rodar múltiplas instâncias da mesma aplicação em diferentes portas locais, testando, por exemplo, diferentes configurações de ambiente, como ng serve --port 4201 para rodar uma versão alternativa da aplicação.
  3. Compatibilidade com Microsserviços: Aplicações que seguem o princípio do port binding são mais fáceis de integrar com arquiteturas de microsserviços, onde cada serviço pode ser acessado por meio de uma URL e porta específicas.

Exemplo Prático de Port Binding em Desenvolvimento Local

  1. Desenvolvimento Local Angular: Quando você executa ng serve, a aplicação Angular vincula-se a uma porta local (4200 por padrão) e serve a aplicação diretamente. Os desenvolvedores podem acessar a aplicação em http://localhost:4200 e verificar as mudanças em tempo real.
  2. Integração com Outros Serviços: Se a aplicação Angular precisar consumir dados de um backend local rodando em outra porta (por exemplo, http://localhost:3000), o frontend e o backend podem coexistir em diferentes portas, ambos vinculados diretamente ao sistema operacional, sem depender de um servidor web intermediário.

Port Binding em Produção

Embora o port binding seja usado principalmente durante o desenvolvimento, o conceito também se aplica a ambientes de produção. Quando a aplicação Angular é compilada para produção (ng build), o resultado é um conjunto de arquivos estáticos (HTML, JavaScript e CSS), que precisam ser servidos por um servidor como Nginx, Apache ou uma plataforma de hospedagem.

No entanto, se a aplicação Angular estiver em um contêiner Docker, o conceito de port binding ainda é relevante, pois o contêiner também expõe a aplicação em uma porta específica, que pode ser vinculada ao sistema host.

Exemplo de Docker:

docker run -p 8080:80 my-angular-app

Neste exemplo, o contêiner expõe a aplicação na porta 80 dentro do contêiner, que é vinculada à porta 8080 no host. Os usuários podem acessar a aplicação em http://localhost:8080.

Uso de Port Binding para Comunicação Entre Aplicações

Outro benefício importante do port binding é a capacidade de uma aplicação atuar como serviço de apoio para outra. Por exemplo, em uma arquitetura de microsserviços, um serviço pode fornecer uma API RESTful que outras aplicações consomem via HTTP. A aplicação Angular, por sua vez, pode consumir essa API via chamadas HTTP para uma URL como http://localhost:3000/api, sendo que o serviço de backend também está vinculado a uma porta específica.

Essa abordagem permite a flexibilidade de mover os serviços de backend entre diferentes máquinas ou ambientes sem precisar modificar o código da aplicação Angular, apenas ajustando as configurações.

Conclusão

O port binding é um princípio importante da metodologia de doze fatores, garantindo que as aplicações possam ser autossuficientes, vinculando-se diretamente a portas para expor seus serviços. No contexto do Angular, isso se manifesta através do uso do Angular CLI para servir a aplicação durante o desenvolvimento e da facilidade de integrar o frontend com diferentes serviços de backend por meio de portas específicas.

Seguindo esse princípio, as aplicações se tornam mais flexíveis, escaláveis e prontas para rodar em diferentes ambientes sem depender de infraestrutura externa para expor seus serviços.