전체 설계
.png)
- db는 아마존의 aws mysql 인스턴스를 사용하였고, mongo db도 사용할 예정이라 구축해놓고 연동 해놓았습니다.
- redis는 따로 캐싱 서버를 두어야 하지만 자원이 제한적이라 api 서버를 담은 인스턴스안에 같이 놓았습니다.
- 보안을 위해 nginx를 이용해서 리버스 프록시 기능을 사용했습니다. 이후에 만약 인스턴스가 많아진다면 로드밸런싱 기능도 구현할 예정입니다.
- 음악 데이터 등 정적 데이터 저장을 위해 s3 bucket을 사용하였습니다.
- 배포 방법
- 먼저 jenkins를 git repository와 연동합니다. master branch에서 push 이벤트가 발생하면 이 정보를 jenkins로 보내주도록 설정합니다.
- jenkins는 push이벤트를 받으면, 충돌을 피하기 위해 pm2 인스턴스를 중지한 뒤, 모든 소스코드를 삭제합니다. 그리고, 다시 git repository를 clone해서 업데이트된 소스코드를 불러옵니다.
- 그리고, npm install 등을 통해서 필요한 모듈들을 받아주고, pm2를 이용하여 백엔드 api서버를 오픈합니다. node를 실행할 때, cpu 개수에 맞는 cluster를 사용하는 설정을 두었고, 이후에 실제로 서비스가 어느정도 완성되었을 때 여러가지 test를 통해서 적절한 cluster 개수와 worker thread개수를 맞출 생각입니다.
- 그 후에, frontend 소스코드를 build합니다. cli 명령어를 통해 s3 bucket중에서 정적 웹 호스팅을 맡고 있는 s3 bucket의 내용을 모두 제거하고, 업데이트된 build파일을 다시 업로드함으로써 vue.js 파일을 배포하게 됩니다.
- 또한 cloud front에 해당 파일을 캐싱함으로써 사용자가 조금 더 빠르게 웹페이지에 접근할 수 있도록 도움을 줍니다.
- 개발된 기능
- jwt 토큰을 이용하여 로그인 및 회원가입 기능을 구현하였습니다. 프론트엔드의 로그인 토큰은 vuex에 저장하도록 했습니다.
- 최근에 추가된 음악을 보여주는 기능을 redis를 이용해 구현했습니다. 최근에 추가된 음악은 모든 유저가 보게 되어있고, 추가와 삭제가 빈번하기 때문입니다. 서버가 시작될 때, 데이터베이스에서 가장 최근에 추가된 음악을 정렬된 순서로 12개를 골라 유저에게 노출합니다. 만약 추가나 삭제가 일어났을 때는, 데이터베이스에 변경내용을 반영함과 동시에 redis에도 해당 내용을 반영했습니다. 데이터베이스에 내용을 쓰고 redis에 원래있던 내용을 날려버리고 다시 db에서 불러오면 나중에 많은 양의 데이터를 다룰 때 성능 저하가 올 것이라고 생각되어서, redis에도 따로 저장하고 database에도 따로 저장하도록 했습니다.
- 유저가 음악을 업로드하고 들을 수 있는 기능을 구현했습니다. 유저는 일단 api 서버에 요청을 보내서, 일시적으로 유효한 s3에 업로드 할 수 있는 주소를 받아옵니다. 그리고, 유저는 그 주소를 이용하여 서버를 거치지 않고 s3에 음악을 업로드하고, 음악이 저장된 s3 주소를 db에 저장합니다. 또한 이후에 유저가 음악을 들을 땐, db에서 해당 음악파일의 저장소 주소를 가지고 온 후, 서버를 거치지 않고 바로 브라우저에서 s3로부터 데이터를 받아오도록 했습니다.
- 유저의 최근 플레이리스트를 관리하는 기능을 구현했습니다. vuex로 유저의 플레이리스트를 관리하고, 유저가 음악을 플레이리스트에 추가하면, 플레이리스트에 음악을 추가함과 동시에 이후에 유저가 다시 접속했을 때 그 목록을 볼 수 있도록 db에도 해당 내용을 저장하도록 했습니다.
- 채팅 기능을 구현했습니다. 유저간 그룹으로, 혹은 개인으로 채팅을 할 수 있으며 웹 소켓 서버를 따로 구성했습니다.