4iz

소개

• 4iz는 다국적 스포츠 의류 기업 나이키를 모델링한 스포츠 의류를 판매하는 웹 서비스입니다.
• ExpressJS 프레임워크와 JavaScript를 사용하여 개발하고 AWS의 EC2와 RDS를 통해 배포한 위코드 1차 프로젝트 4iz를 NestJS 프레임워크와 TypeScript을 배우고 경험을 쌓고 싶어 리팩토링을 했습니다.
• OAuth 2.0을 사용한 구글 로그인과 네이버 로그인을 구현했습니다.
• Docker를 사용해서 환경(개발, 테스트, 운영)에 맞는 Dockerfile로 이미지를 생성하였고 코드의 기능과 안정성을 보장하기 위해 Docker Compose와 Jest로 단위 테스트 및 E2E 테스트 코드를 작성했습니다.
• 인프라의 경우 AWS의 VPC의 네트워크 ACL로 보안을 더 강화했고 ECR, ECS으로 트래픽에 따른 스케일 아웃 및 스케일 인을 자동화 했으며 ALB로 로드 밸런싱을 구현했습니다.
• Route 53으로 도메인을 등록하고 ACM으로 HTTPS를 적용했습니다. 테스트와 배포 과정을 자동화 하기 위해 GitHub Action를 사용하여 단위 테스트와 E2E 테스트 CI를 ECR에 Docker 이미지를 푸시하고 ECS에서 새로운 작업을 실행하는 CD를 구현했습니다.

아키텍처

실행

main 브랜치의 docker-compose.yml 파일을 docker compose up --build 명령으로 실행.

• 애플리케이션: http://localhost:3000
• Redis 웹 인터페이스: http://localhost:8081

테스트

• 단위 테스트: 애플리케이션 실행 후 docker compose exec app npm run test 명령 실행.
• E2E 테스트: main 브랜치의 docker-compose.ci.yml 파일을 docker compose -f docker-compose.ci.yml up --build 명령으로 실행.

기술 스택

개발
인프라

API

• 로컬에서 애플리케이션 실행 후 http://localhost:3000/api

기록

https://whooa27.blogspot.com/search/label/4iz

시현

회원가입 및 로그인

Screencast.from.2024.01.28.20.08.28.webm

상품 목록, 상품 상세 및 장바구니 추가

Screencast.from.2024.01.28.20.10.22.webm

장바구니 목록, 장바구니 수정 및 장바구니 삭제

Screencast.from.2024.01.28.20.11.48.webm

주문하기, 주문 상세, 주문 목록 및 주문 삭제

Screencast.from.2024.01.28.20.15.23.webm

개인 정보 및 로그아웃

Screencast.from.2024.01.28.20.16.24.webm