https://github.com/deirofelippe/agenda-telefonica
Agenda telefonica com: Nodejs, React (contextAPI), CSS responsivo, S3 com Serverless Framework e Localstack, Testes no backend e Docker Compose
https://github.com/deirofelippe/agenda-telefonica
aws css docker-compose ec2 express html localstack mysql nodejs rds reactjs responsive s3 terraform test typescript
Last synced: 3 months ago
JSON representation
Agenda telefonica com: Nodejs, React (contextAPI), CSS responsivo, S3 com Serverless Framework e Localstack, Testes no backend e Docker Compose
- Host: GitHub
- URL: https://github.com/deirofelippe/agenda-telefonica
- Owner: deirofelippe
- Created: 2022-02-23T07:03:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T20:56:31.000Z (over 1 year ago)
- Last Synced: 2025-02-06T15:53:19.662Z (over 1 year ago)
- Topics: aws, css, docker-compose, ec2, express, html, localstack, mysql, nodejs, rds, reactjs, responsive, s3, terraform, test, typescript
- Language: TypeScript
- Homepage:
- Size: 4.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Agenda telefônica
Esse projeto foi um teste técnico feito em 3 dias com React, Nodejs, Express e MySQL. Posteriormente foi atualizado para fazer deploy na AWS S3 e usar seus serviços como AWS S3, AWS EC2 e AWS RDS, tudo provisionado com o Terraform.
Outras mudanças foram:
- a atualização de todas as libs
- o uso do Docker
- uso do Typescript no React
- uso do useReducer no React
- CI/CD com GitHub Actions e testar localmente com Act
A aplicação sendo usada pode ser vista no youtube, abaixo:
[](https://www.youtube.com/watch?v=V1DiE-N3WCM)
## Sumário
- [Ferramentas usadas](#ferramentas-usadas)
- [Arquitetura do Sistema na AWS](#arquitetura-do-sistema-na-aws)
- [Como executar com docker?](#como-executar-com-docker)
- [Executar os testes do backend e cobertura de código](#executar-os-testes-do-backend-e-cobertura-de-código)
- [Executar em desenvolvimento](#executar-em-desenvolvimento)
- [Testar o CI/CD local com Act](#testar-o-cicd-local-com-act)
- [Testar os scripts para o backend sempre rodar no vagrant](#testar-os-scripts-para-o-backend-sempre-rodar-no-vagrant)
- [Deploy na AWS](#deploy-na-aws)
- [Screenshots](#screenshots)
## Ferramentas usadas
| Nome | Versão |
| :-: | :-: |
| Docker | 27.3.1, build ce12230 |
| Docker Compose | v2.29.7 |
| Localstack | 3.1.10 |
| MySQL | 8.0 |
| Act (GH Actions) | v0.2.61 |
| Nodejs | 22.11.0 |
| Reactjs | 18.13.1 |
| Typescript | 5.6.2 |
| Vite | 5.4.10 |
## Arquitetura do Sistema na AWS
## Como executar com docker?
- `make init-all`: inicia os containers e terraform
- As urls para acessar os serviços do docker são:
- Frontend: `http://localhost:3001/`
- Backend: `http://localhost:3000/`
- Bucket agenda-images: `http://localhost:4566/agenda-images`
- PhpMyAdmin: `http://localhost:8081/`
- Finalize os containeres `make down`
- Delete os recursos no Localstack: `make terraform-destroy-local`
### Executar os testes do backend e cobertura de código
- `make backend-test`
### Testar o build do frontend localmente
- `make frontend-express`
### Executar em desenvolvimento
- Abre o vscode na pasta da aplicação
- Abrir o vscode no docker: `ctrl+shift+p` > `"Dev Containers: Rebuild and Reopen in Container"` > `enter`
## Testar o CI/CD local com Act
- `make ci-cd`
## Testar os scripts para o backend sempre rodar no vagrant
> Não vai funcionar, pois o banco de dados não está configurado, mas pode ser testado o funcionamento do systemd. Se deletar ou parar o container, o script irá executar para deixar o container de 'novamente.
- Crie a máquina virtual (VM): `vagrant up`
- Copie o path absoluto do pivate key `vagrant ssh-config | grep IdentityFile`
- Substitua o pelo que foi copiado e execute: `rsync -vahz -e 'ssh -i -p 2222' ./aws-scripts vagrant@127.0.0.1:/home/ubuntu/`
- Execute `ssh -p 2222 -i vagrant@127.0.0.1 bash /home/ubuntu/aws-scripts/init-all.sh` para configurar o backend na VM
- Acesse a VM `vagrant ssh`
- `cd /home/ubuntu/aws-scripts`
- Veja o status do service criado `systemctl status agenda-backend`
- Veja os logs do service agenda-backend `sudo journalctl -u agenda-backend`
- Liste os containeres `make ls`
- Caso o container tenha sido criado, remova ele `make rm`
- Liste de novo `make ls`, ele deve ser criado automaticamente pelo script do systemd
- Destrua a VM: `vagrant destroy`
## Deploy na AWS
- Gere a chave SSH para o EC2
- `ssh-keygen -t rsa -b 2048 -f ./agenda_ec2_key -N ""`
- `chmod 400 ./agenda_ec2_key`
- `make terraform-init`
- `make terraform-plan`
- `make terraform-apply`
- Espere uns 5 segundos e execute novamente o comando de novo para exibir o IP do EC2 no output
- Copie output que o terraform irá exibir para trocar as variáveis de ambiente do backend e do frontend:
- Copie o `ec2_public_ip` e cole na variável `prodBackendUrl` que está no arquivo `./frontend/src/env.ts`.
- Duplique o env file com `cp ./aws-scripts/agenda-backend/.env.backend.example ./aws-scripts/agenda-backend/.env.backend`.
- Copie o `rds_address` e `s3_frontend_endpoint` e substitua os valores `DB_HOST_PROD` e `FRONTEND_URL` no `.env.backend`.
- Gere o build do frontend do frontend com as variáveis de ambiente já setadas do IP do EC2.
- `make frontend-pull-and-build`
- Execute novamente o `make terraform-apply` para fazer upload do build gerado do frontend.
- Deploy do backend
- Substitua o `` dos comandos abaixo pelo IP do EC2.
- Faça upload do diretório aws-scripts para o EC2 via rsync com ssh `rsync -vahz -e 'ssh -i ./agenda_ec2_key -p 22' ./aws-scripts ubuntu@:/home/ubuntu`
- Execute o script `init-all.sh` que está no EC2 `ssh -i ./agenda_ec2_key ubuntu@ bash /home/ubuntu/aws-scripts/init-all.sh`
- Limpar os recursos criados na AWS
- Delete todos os objetos que existem o bucket `agenda-images` pela GUI ou pela CLI `aws s3 rm --recursive s3://agenda-images`
- Delete todos os recursos criados com `make terraform-destroy`
## Screenshots
