... | @@ -33,10 +33,25 @@ MVC, abreviatura de Model, View e Controller, é um padrão arquitetônico usado |
... | @@ -33,10 +33,25 @@ MVC, abreviatura de Model, View e Controller, é um padrão arquitetônico usado |
|
|
|
|
|
## Diagrama de Componentes
|
|
## Diagrama de Componentes
|
|
|
|
|
|
|
|
No diagrama de componentes a seguir está descrito a relação existente dos componentes dentro da nossa interface gráfica e do nosso servidor.
|
|
|
|
|
|
|
|
O primeiro componente - o Front - é composto apenas por dois sub componentes: App e Components, onde o App compõe as telas que os usuários vêem e interagem de fato, enquanto o Components possui pedaços reutilizáveis pelas telas.
|
|
|
|
|
|
|
|
Já no servidor nós temos uma divisão maior de subcomponentes: Route, Controller, Service, Model e Util. Não sou me adentrar muito, pois eles estão melhor explicados na seção do backend, mas basicamente o fluxo é sempre do Route para o Model, e a resposta do Model para o Route, fazendo uso de funções básicas deinidas no Util nesse processo, por exemplo, formatação das mensagens de erro.
|
|
|
|
|
|
![kk.drawio](uploads/a93055b58a14129bcb97dbfd20e4adc6/kk.drawio.png)
|
|
![kk.drawio](uploads/a93055b58a14129bcb97dbfd20e4adc6/kk.drawio.png)
|
|
|
|
|
|
## Diagrama de Deploy
|
|
## Diagrama de Deploy
|
|
|
|
|
|
|
|
Nosso diagrama de deploy demonstra os passos necessários para realizar o deploy da nossa aplicação, então, como podemos ver, temos diversas etapas que são realizadas antes de chegar na nossa máquina da AWS, todo esse fluxo é acionada automaticamente quando é feito algum commit na nossa branch Main.
|
|
|
|
|
|
|
|
O fluxo pode ser descrito por:
|
|
|
|
Assim que um commit é feito na Main, automaticamente serão realizadas verificações de escrita de código (Lint), testes unitários (Tests) e, se tudo ocorrer como esperado, o repositório irá atualizar as máquinas na Amazon com o código recém enviado.
|
|
|
|
|
|
|
|
Na Amazon nós temos, dentro de containers no mesmo EC2, o frontend e o backend que estão rodando e se comunicando. Além disso, também temos o banco de dados que persiste os dados do backend.
|
|
|
|
|
|
|
|
O resultado de toda essa infraestrutura é uma interface disponível para o usuário (HTML) com o código mais recente da branch Main
|
|
|
|
|
|
<img src="resources/images/arquitetura/DiagramaDeploy.png" width="500">
|
|
<img src="resources/images/arquitetura/DiagramaDeploy.png" width="500">
|
|
|
|
|
|
## Backend
|
|
## Backend
|
... | | ... | |