📎 Link

코맛집

📎 Souce Code

https://github.com/to1step/backend

⚒️ Project Architecture

🔍 Node.js (v16)

nvm을 통한 버전 일치

팀원들이 각자의 로컬에서 개발을 하였기 때문에, 각자 데스크톱의 node.js버전이 달라 발생하는 에러를 방지하기 위해 nvm을 통해 node.js의 버전을 16으로 일치시켰습니다.

✏️ nvm을 이용한 node.js 버전 관리

REST의 원칙을 지키는 API설계

REST의 원칙을 지켜 간결하고 가독성이 좋은 API를 설계하였고, UI에 묶이지 않는 API를 설계하여 API의 확장성을 높였습니다.

✏️ REST API란? | ✏️ REST 원칙을 지키며 API를 설계하자 | ✏️ API는 UI에 종속되지 않아야 한다

MVC패턴 적용

Node.js는 자유도가 매우 높기 때문에, Controller나 Service가 따로 분리되어 있지 않았습니다. 이에 MVC 패턴을 적용하여 Controller와 Service 분리하고 어플리케이션의 유지보수성, 확장성, 코드 재사용성을 향상시켰습니다.

✏️ MVC 패턴이란?

class-validator를 통한 유효성 검사

class-validator 를 사용하여 사용자로부터 입력받은 데이터나 외부에서 받은 데이터를 검증하여 잘못된 데이터가 데이터베이스에 들어가는 것을 방지하였습니다.

Dev-dependency 분리를 통한 빌드 경량화

개발 단계에서만 사용되고, 실제 프로덕션 환경에서는 필요하지 않은 패키지들은 devDependenc 로 별도 분리하여 설치하여 프로덕션 빌드 시에 더 가볍고 효율적인 빌드를 할 수 있게 하였습니다.

Day.js를 이용한 시간 통일

저희의 클라우드 서버가 한국에 존재하지 않기 때문에, 모든 시각을 한국 시간으로 통일해 주기위해 날짜 라이브러리를 도입하여야 했는데, 그 중 크기가 작고 가벼워 가장 많이 사용되는 day.js를 채택하였습니다.

Cutsom Error를 통한 Front-end와의 소통

서버에서 발생할 수 있는 에러를 BadRequestError , UnauthorizedError , ForbiddenError , InternalServerError , NotFoundError 로 나누어 class화 하고 Front-end가 처리할 수 있는 에러들에 대해선 ErrorCode들을 미리 enum type으로 정의해 둔 다음, 해당 에러에 맞는 class로 mapping하여 Front-end와 소통하였습니다.

✏️ Custom Error를 이용한 Front-end와의 소통

Winston.js를 통한 로그 기록

Winston.js를 이용하여 서버에 들어오는 모든 요청, 서버에서 발생하는 모든 에러에 대해 파일로 기록하였습니다.

✏️ Winston.js를 통한 로그 기록하기

Discord.js를 통한 Exception Error 핸들링과 API 개선

서버에서 발생하는 Exception Error에 대해 Discord.js를 통해 Discord로 메세지를 보내게 하여 바로 대응할 수 있도록 하였고, API소요시간을 계산하여 2000ms 이상 걸리는 API에 대해서 Discord로 메세지를 보내 로직을 개선할 수 있게 하였습니다.

✏️ API소요시간 계산하기 | ✏️ Discord.js를 통한 Error-bot 만들기

🔍 Typescript (v5.1.3)

Node.js 는 빠르고 간단하게 API를 만들 수 있다는 것에 강점이 있다고 생각합니다. 하지만 서버는 안정성이 최우선이므로, TypeScript를 통해 동적타입 언어인 Javascript 에서는 검사하지 못했던 변수, 함수, 인터페이스 등의 타입 오류를 사전에 최대한 차단하였고. 이로 인해 런타임 시점의 타입 관련 버그를 사전에 방지 하였습니다.

🔍 Prettier

코드 스타일을 일관성 있게 유지하고 흔히 발생하는 실수나 잠재적인 오류를 사전에 감지하기 위해 prettier를 사용하였습니다.

"lint-staged": {
  "./src/**/*.{ts,tsx,js,jsx}": [
    "eslint --fix"
  ]
}

🔍 Husky

오류가 있는 코드나 lint에 맞지 않는 코드가 올라와 develop에 merge되는 것을 막기위해 Husky 를 사용하여 commit과 push에 정책을 적용하였습니다.

pre-commit

> npm run lint-staged

lint-staged 명령어를 통해 변경된 파일들만 대상으로 lint를 실행하여 commit 전에 에러를 확인하였습니다.

pre-push

> tsc --noEmit

tsc --noEmit 명령어를 통해 TypeScript 파일을 컴파일하여 JavaScript 파일을 생성하지 않고, 타입 검사만 수행한 다음, 통과하면 push가 되도록 하였습니다.

✏️ Husky를 이용한 git hook 적용하기

🔍 Jest

Jest를 통한 테스트 주도 개발

Jest 라이브러리를 이용하여 API를 작성할때 해당 API에 대해서 테스트를 작성하여 버그를 빠르게 감지하고 코드의 안정성을 높였습니다. 또한 husky를 통해 push전에 테스트를 진행하여 테스트를 통과하지 못한 API가 있을시에 코드가 병합되지 않게 조치하였습니다.

✏️ Jest를 통한 테스트 주도 개발

🔍 Docker

일관성 있는 배포

Docker 컨테이너가 애플리케이션과 그 실행에 필요한 모든 종속성들을 포함하고 있기 때문에, 우리의 서비스를 Docker로 컨테이너화 하여 개발 환경과 프로덕션 환경 사이의 일관성을 유지하였습니다. 또한 다양한 플랫폼과 환경에서 일관성 있게 배포할 수 있게 하였습니다.

효율적인 자원 관리

Docker는 호스트 OS와 리소스를 공유하여 실행되어 가상화 방식에 비해 더 적은 리소스를 소비하기 때문에 우리의 서비스를 Docker로 컨테이너화 하여 더 효율적인 자원 관리와 높은 서버 활용률을 얻을 수 있게 하였습니다.

✏️ Docker란 무엇이고 왜 사용할까?

.dockerignore를 이용한 이미지 경량화

.dockerignore 에 Docker 이미지를 빌드할 때 포함하지 않을 파일이나 디렉토리를 지정하여, 이미지 크기를 경량화 하였습니다.

✏️ Docker 이미지 경량화 하기

Docker-compose를 이용한 컨테이너 관리

docker-compose.yml 파일에 컨테이너를 실행하는데 필요한 네트워크, 볼륨, 환경 변수 등을 정의하여. 가독성이 좋게 하였고, 애플리케이션 구성을 이해하고 공유하기 쉽게 하였습니다.

🔍 Github action

CI

docker/build-push-action@v4 를 이용하여 DockerFile에 작성된 대로 우리의 서비스를 이미지로 만들어 Github packages에 저장되도록 하였습니다.

CD

Github packages에 저장된 이미지를 appleboy/ssh-action@master 를 이용하여 우리의 클라우드 서버에 접근하여 이미지를 컨테이너화 하여 서비스를 실행할 수 있게 하였습니다.

Action secrets을 통한 환경변수 관리

Action secrets에 우리의 환경변수들을 넣어서 이미지가 빌드될때 환경변수로 주입하여 .giitignore에 포함되어 GIthub에 로드 되지 않던 환경변수들을 관리하였습니다.

✏️ Github-action을 통한 CI/CD

🔍 Filebeat

Filebeat를 이용한 로그 서빙

Winston.js로 기록한 우리 서버의 로그들을 기록한 폴더를 volume에 연결하고 Filebeat 또한 컨테이너로 실행한 다음 volume으로 연결하여 로그가 쌓일때마다 Filebeat가 Elasticsearch로 우리들의 로그를 보내게 만들었습니다.

✏️ Filebeat를 이용해 서버 로그 서빙하기

🔍 Nginx

WAS의 부담 줄이기

nginx 를 도입하여 정적인 컨테츠에 대해선 nginx 가 처리해 주기 때문에 Node.js로 구동되고 있는 WAS에 대해 부담을 줄였습니다.

Reverse proxy

nginx 를 이용해 http로 80번 port에 들어온 요청들에 대해서 대리로 받은 다음, 443번 port로 redirect시켜서 보내주고. reverse-proxy 를 이용해 4000번에서 작동하고 있는 node.js서버로 요청이 가게 하였습니다. 이렇게 리버스 프록시는(reverse-proxy)를 통해 서버를 감추고, SSL/TLS 암호화를 사용하여 데이터를 안전하게 전송할 수 있게 하였습니다.

✏️ Http와 Https 그리고 SSL은 각각 무엇일까? | ✏️ Nginx란 무엇이고 왜 사용할까? | ✏️ Nginx 설치 및 Https 적용하기

⚒️ 문제해결 / 개선사항

Redis의 데이터가 매일 날라가버리던 문제 해결

6379 port 에서 작동하고 있는 redis 컨테이너가 외부의 접근을 받아, 수시로 데이터가 모두 날라가 버리는 현상이 발생하였습니다.

따라서 6379번의 방화벽을 차단하여 외부 접근은 막고 도커 네크워크를 이용해 서버와 레디스가 소통할 수 있도록 만들어 주었습니다.

✏️ 방화벽 설정 때문에 redis의 데이터가 삭제되던 문제 해결

서버 방화벽 강화

방화벽을 차단하여도, 계속해서 공격이 들어와 cloud단과 os단의 방화벽 규칙을 강화하여 서버에 적용하였습니다.

✏️ 서버 방화벽 정책 강화하기

static 변수 선언 때문에 환경변수가 로드되지 않던 문제 해결

dotenv.config()를 프로젝트 최상단에 선언하였지만, 싱글턴으로 작성한 Redis를 연결하는 함수가

dotenv.config() 보다 먼저 실행되어, Redis에 연결이 되지 않는 현상이 발생하였습니다.

JavaScript에서 static 키워드를 사용하여 선언된 변수는 클래스가 로드될 때 기본적으로 초기화 된다는 사

실을 알았고, 해당 변수를 인스턴스 변수로 수정하여 문제를 해결하였습니다.

✏️ staic으로 선언한 변수는 언제 로드되는가?

4000ms 소요되던 API 1000ms로 단축

Discord.js로 2000ms 이상 소요되는 API에 대해 알림을 보내도록 하였는데, 알림이 온 문제의 API에 대해

생성/수정 보단 조회가 많이 일어나는 서비스임을 감안하여, 생성단에서 처리할 수 있는 작업은 Database

table에 새 column을 추가하는 작업을 통해 생성 및 수정시에 처리하였고, Promise.all의 병렬 처리를 이용

하여 API 수행시간을 단축하였습니다.

✏️ Promise.all과 DB column추가로 인한 API 소요시간 단축