Definições Arquitetura

Descrição

• Esta seção irá abordar a arquitetura da aplicação.

Sumário

• Arquitetura do Sistema
• Deploy
  • Diagrama de Deploy
  • Diagrama de Componentes
• Definições de Tecnologias
  • Frontend
  • Backend
• Módulos do Sistema

Arquitetura do Sistema

Na nossa arquitetura da nuvem usaremos principalmente o serviço ECS(Elastic Container Service) da AWS. Este é um serviço de orquestração de contêineres totalmente gerenciado que facilita a implantação, o gerenciamento e a escala de aplicações em contêineres. Este seviço vai servir para garantir à nossa aplicação uma camada extra de segurança e escalabilidade.

No ECS usaremos uma instância do AWS Fargate que é um mecanismo de computação sem servidor e com pagamento conforme o uso que permite a você se concentrar em construir aplicações sem gerenciar servidores.

Para realizarmos nosso deploy no ECS usaremos o ECR(Elastic Container Registry) que é um registro de contêiner totalmente gerenciado que oferece hospedagem de alta performance para que você possa implantar imagens e artefatos de aplicações de forma confiável em qualquer lugar.

O fluxo da nosso deploy será enviar uma imagem conteinerizada da nossa aplicação, no total 3 imagens (frontend, backend e banco de dados), para o ECR. Com a imagem no ECR iremos para a configuração do ECS, onde criaremos uma task(um serviço) usando uma instancia do AWS Fargate.

Esse é um padrão de deploy oferecido pela propria AWS.

Para mais informações do ECS e seu fluxo de deploy, a AWS oferece um workshop sobre os serviços.

Deploy

• O deploy é o processo de disponibilizar uma aplicação concluída para uso. Esse processo pode ser realizado em diversas fases do projeto, assim como após sua finalização. Utilizamos a plataforma de computação em nuvem TDB.

Diagrama de Deploy

• O diagrama apresenta o processo de deploy da aplicação Cosmos utilizando a nuvem AWS.

Diagrama de Componentes

Um diagrama de componentes eficiente para a aplicação "Cosmos" pode ser organizado conforme as funções específicas de cada parte do sistema:

Componentes de Infraestrutura

1. Amazon Elastic Container Service (ECS): Responsável pela orquestração dos containers que rodam tanto o backend quanto o banco de dados.
2. Amazon Elastic Container Registry (ECR): Repositório onde as imagens Docker são armazenadas.
3. AWS Fargate: Provedor de serviço serverless que gerencia a execução dos containers, dispensando o uso de servidores.

Componentes de Backend

1. NestJS: Framework utilizado para o desenvolvimento do backend, que está dentro de um container Docker.
2. PostgreSQL: Banco de dados relacional que também é gerenciado via containers.

Componentes de Frontend

1. React: Biblioteca JavaScript utilizada para o desenvolvimento do frontend, hospedada no AWS Amplify.
2. AWS Amplify: Plataforma para hospedagem e deploy de aplicações frontend, com integração direta ao repositório GitLab.

Definições de Tecnologias

• Logo abaixo todas as tecnologias e linguagens de programação utilizadas no projeto.

Frontend

• Repositório: https://tools.ages.pucrs.br/cosmos/cosmos-frontend

• React: Biblioteca JavaScript usada para construir interfaces de usuário dinâmicas e interativas. Ela permite criar componentes reutilizáveis, o que facilita a manutenção e o desenvolvimento de grandes aplicações web. Referência

• TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. Referência

• JavaScript: Uma linguagem de programação versátil usada principalmente para criar interatividade em sites e aplicações web. Referência

• HTML/CSS: HTML é usado para estruturar o conteúdo na web, e CSS é usado para controlar a apresentação, formatação e layout. Referência

• SASS: Pré-processador CSS que adiciona recursos como variáveis, aninhamento e mixins ao CSS, tornando o código mais organizado e fácil de manter. Referência

• Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. Referência

Backend

• Repositório: https://tools.ages.pucrs.br/

• TDB: Texto. Referência

• TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. É amplamente usada em projetos que exigem maior escalabilidade e manutenção. Referência

• Postgres (PostgreSQL): Sistema de gerenciamento de banco de dados relacional robusto e de código aberto, conhecido por sua confiabilidade, flexibilidade e suporte a recursos avançados, como consultas complexas e transações atômicas. Referência

• Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. É essencial para a criação de ambientes isolados e portáteis. Referência

Módulos do Sistema

• Frontend:

  • Estrutura Principal

    • .vscode: Configurações para o editor VS Code, como extensões recomendadas e configurações específicas do projeto.
    • node_modules: Bibliotecas e dependências do projeto instaladas via npm ou yarn.
    • public: Pasta com arquivos estáticos, como index.html e imagens, servidos diretamente pelo servidor.
    • src: Diretório principal onde o código-fonte do front-end está organizado.

  • Dentro do diretório src

    • components: Contém componentes reutilizáveis usados em várias partes do aplicativo.
    • context: Armazena e gerencia os contextos do React, fornecendo estados globais e lógica compartilhada para a aplicação.
    • hooks: Reúne hooks personalizados do React utilizados no projeto.
    • models: Define as interfaces e tipos que descrevem as estruturas de dados usadas na aplicação.
    • pages: Contém as páginas principais da aplicação, geralmente representando rotas únicas.
    • routes: Gerencia as rotas e a navegação dentro da aplicação.
    • services: Serviços que lidam com a lógica de negócios e as interações com APIs externas.
    • styles: Define os estilos globais e componentes de estilo utilizados em toda a aplicação.
    • index.tsx: Arquivo de entrada principal do projeto React, onde a aplicação é inicializada.
    • theme.ts: Define e gerencia temas de estilo globais, como cores e tipografia.

  • Arquivos de Configuração e Scripts

    • .eslintrc.js: Arquivo de configuração para o ESLint, que define regras e padrões de código a serem seguidos no projeto, ajudando a manter a qualidade e consistência do código.
    • .gitignore: Arquivo que especifica quais arquivos e diretórios devem ser ignorados pelo Git, evitando que informações sensíveis ou desnecessárias sejam versionadas.
    • .prettierrc: Arquivo de configuração para o Prettier, que define regras de formatação de código, como indentação, uso de aspas, e comprimento máximo de linhas, para manter um estilo de código consistente.
    • package-lock.json & package.json: Arquivos que gerenciam as dependências do projeto e garantem uma instalação consistente das mesmas.
    • README.md: Arquivo de documentação do projeto, geralmente contendo instruções de instalação, uso e outras informações importantes sobre o projeto.
    • tsconfig.json: Configurações do TypeScript para o projeto, definindo como o código TypeScript deve ser compilado.

• Backend:

  • Estrutura Principal

    • Texto: Texto.

  • Dentro do diretório APP:

    • controllers: Texto.
    • models: Texto.
    • routes: Texto.

  • Outros Diretórios e Arquivos

    • docker-compose.yml: Define e configura serviços relacionados, volumes e redes utilizando o Docker Compose.
    • Dockerfile: Script para criar uma imagem Docker do projeto.