SNS 노래 추천 Extension

💭 프로젝트 소개

chrome extension과 Django를 이용하여 만든 게시글 노래 추천 프로그램
이미지와 텍스트의 감정 분석을 통해 현재 사용자가 보고 있는 게시글에 관한 노래 추천
단순 설치만으로 서비스를 이용할 수 있는 이식성 높은 프로그램

참여 인원

Backend: 1명
ML : 3명

api 도메인(현재 `AWS` 중단)

Root

🛠 기술 스택

Backend(`Python`)

Django
Django Rest Framework

Database(None)

Front(`JS`)

Chrome Extension

Infrastructure

Docker
AWS(EC2)

🗺 Structure

🖥 클라이언트 페이지 동작 화면

🤔 Contribution

Service Architecture 설계

사용자에게 최대한 편의를 제공할 수 있게 끔 알아서 정보를 수집, 가공, 결과 표출이라는 3가지 단계를 거치도록 설계했습니다.

정보 수집

게시글 정보를 수집합니다.

가공

학습된 모델로 예측

결과 표출

list, notification을 이용해서 사용자에게 전달

이 과정에서 사용자는 chrome extension을 설치하는 것 이외에 어떠한 조작할 필요 없이 편하게 기능을 자동할 수 있습니다.

`django` + `nginx`를 이용한 `HTTPS` rest api 구현 및 배포(with `AWS EC2`)

image와 text를 request로 받기 위해서는 json 방식이 아닌 multipart 형식으로 보내야합니다. 따라서 해당 부분만 수정해서 기능을 확장하였습니다.

FormData를 수신 받게 되면 기존의 학습 모델을 통해서 데이터를 처리 및 추천 노래 리스트를 반환하게 됩니다.

그러면 이를 이용해서 브라우저에서 사용자에게 여러 형태로 결과를 노출시킵니다.

Django 앞 단에서는 NGINX가 동작하고 있습니다. NGINX는 리버스 프록시의 역할로서 HTTPS 설정과 CORS 문제를 해결하고 있습니다.

👿 Trouble shooting

`NGINX`를 이용한 `CORS` + `HTTPS` 해결 및 서버의 확장성 확보

`HTTPS`끼리만 통신 가능

해당 프로그램이 이식된 웹 페이지는 HTTPS 프로토콜을 사용하고 있습니다.

HTTPS 사이트에서 AJAX 통신은 HTTPS끼리만 가능한 보안 규칙으로 인해서 해당 문제를 해결하고자 NGINX를 사용하였습니다.

NGINX를 이용해서 ssl 및 도메인 설정을 같이 해줌으로써 간편히 문제를 해결하였습니다.

`CORS` 문제 발생

기존의 Instargram origin에서 개인 서버로 AJAX 통신을 하기 때문에 CORS 문제가 발생하였습니다.

해당 문제도 NGINX에서 같이 origin 처리를 해주어 해결하였습니다.

Kisooofficial/FeelSoftwareDjango