Team 6

BigData PJT

| 😘 SAYE :: Sing About Your Emotion, 당신의 감정을 노래하다. 자세한 기획 개요는 여기서 보실 수 있습니다.

사이트 방문 • 데모(demo)

• Sing About Your Emotion (SAYE) 🎶🎶🎶
  • 🚩 Table of Contents
  • 🤖 What's SAYE?
  • 🎨 Features
  • 🐾 Architecture
    • Entity Relationship Diagram
    • Sequence Diagrams
  • 🌏 Browser Support
  • 📦 Packages (M)
    • Frontend
    • Backend
  • 📚 준비하기
  • 🏁 실행하기
  • 🖥 배포하기
  • 💬 Documents
  • 👥 Contributer
  • 🚀 References
  • 📜 License

노래 그리고 감정을 키포인트로 프로젝트명을 생각하던 중, 우리 서비스는 사용자의 감정을 입력받아 해당 감정에 맞는 노래를 추천해주고 들려주는 서비스입니다. 그래서 "사용자의 감정에 대한 노래를 불러주는 서비스"라 생각을 하고 접근을 하다가 최종적으로 "Sing abougt your emotion" 약자를 줄여, SAYE 라는 프로젝트명이 탄생하게 되었습니다.

• [음원 스트리밍]

  • 스포티파이의 국내 정책 상 1분만 듣기 가능함
  • 유튜브 영상을 맵핑시킴으로 최대한 전체 음원을 들을 수 있도록 구현(크롤링 실패 시 유튜브로 이동)
  • 오른쪽 Sidebar에 컨트롤러 구현

• [북마크/플레이리스트]

  • 북마크 기능 제공
  • 플레이리스트 여러개 생성/삭제 가능
  • 마이페이지에서 drag&drop으로 북마크에 있던 음원을 플레이리스트에 추가 가능

• [감정에 따른 음원 추천]

  • 직접 텍스트 입력 및 STT 기능 구현
  • 입력되는 글을 기반으로 감정 분석
  • 해당 감정과 유저의 플레이리스트를 기반으로 음원 추천

• [익명 게시판]

  • 댓글 기능
  • 익명 게시판에 작성된 글을 기반으로 감정 분석하여 음원 추천

• 회원가입

• 로그인

• STT 검색

• 감정분석 검색

• 일반 검색

• 게시판

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	10+	Yes	Yes	Yes

DB 생성하고 설정 파일 application.properties(백엔드), .env(프론트엔드) 파일 생성 및 추가하시면 됩니다

1. Git clone 받기

git clone https://lab.ssafy.com/s04-bigdata-sub3/s04p23d106.git

2. 데이터베이스 준비

• 'saye' 테이터베이스 생성

CREATE SCHEMA `saye`;

• 필요한 테이블 생성

Database Tables

3. [Backend] application.properties 설정

• backend\src\main\resources 폴더 아래 생성하시면 됩니다
• mysql 도메인과 아이디/비번 작성

server.port=8000
server.servlet.context-path=/saye

# for social login
spring.profiles.include=oauth

## JSP
#spring.mvc.view.prefix=/WEB-INF/views/
#spring.mvc.view.suffix=.jsp

# fileupload 
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=20MB
spring.servlet.multipart.max-request-size=30MB
    
# db
spring.datasource.url=jdbc:mysql://{도메인주소}:3306/saye?serverTimezone=UTC&useUniCode=yes&characterEncoding=UTF-8
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username={DB 계정 아이디}
spring.datasource.password={DB 계정 비밀번호}
mybatis.type-aliases-package=com.gokchu.saye.repository.dto
mybatis.mapper-locations=mapper/*.xml
mybatis.configuration.map-underscore-to-camel-case=true

4. [Frontend] .env 작성

• frontend 폴더 아래 생성하시면 됩니다
• nginx에 명시된 location을 따라갑니다

VUE_APP_SERVER_URL={도메인주소}
VUE_APP_SPRING_URL={도메인주소}/saye
VUE_APP_DJANGO_URL={도메인주소}/recommend

5. [Frontend] 모듈 다운로드

# frontend 폴더로 이동해서 다운
cd frontend/
yarn install

6. [Backend] (Option) Spring boot를 build(jar 파일 생성)

# backend 폴더로 이동해서
cd backend/
mvn -B -DskipTests -f backend

1. 백엔드 실행

• 생성한 jar 파일 실행

java -jar [filename].jar

• 혹은 war 파일 생성하지 않고 demon으로 로컬에서 실행하고 싶다면 STS와 같은 IDEA에서 Spring boot Run을 실행하거나 아래 명령어를 통해 실행

mvn spring-boot:run

2. 프론트엔드 실행

yarn serve

해당 서비스는 AWS EC2를 통해 배포하였고 Docker와 Jenkins를 이용해 CI/CD 구축하였습니다:

1. AWS EC2 인스턴스 생성 (ubuntu)
2. docker 설치
3. 필요한 이미지를 docker hub를 통해 설치
   1. Jenkins
   2. MySQL
4. Jenkins와 Gitlab repository 연동
5. MySQL 컨테이너에 saye DB 스키마 생성
6. Nginx 설정 (frontend/nginx 폴더의 homepage.conf)
7. frontend, backend 폴더 안에 dockerfile 작성
8. 프로젝트 root 위치에 Jenkins 파일 작성
   1. Build and Test 과정
   2. Build (frontend, backend)
   3. Run (컨테이너 실행)
9. docker ps 를 통해 frontend, backend, django 컨테이너가 실행되는 것을 확인 (Jenkins, MySQL 포함)

• SAYE - Notion
• 발표자료 - 기획
• 발표자료 - 중간점검

• 김지현
• 김동빈
• 김태진
• 김연정
• 임호빈
• 장민호

• Markdownify - README.md
• TOAST UI Editor - README.md

This software is licensed under the MIT © SSAFY.