Skip to content

**어너**는 다양한 국가의 다양한 언어를 배우고자 하는 사용자들이 서로 언어를 교환하며 성장 할 수 있는 서비스입니다. 웹사이트에서 적극적이고 진지하게 언어교환을 하고 싶은 사람들을 위하여 시작한 프로젝트입니다. 자신이 배우고 싶은 언어, 할 수 있는 언어, 모국어를 선택 후, 관심사가 같은 다양한 사람들과 글로벌하게 토킹 해 보세요!☺

Notifications You must be signed in to change notification settings

SeonA1223/EONEO

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

518 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation


EONEO

팀원

프로젝트 소개

Pages in Detail

배포 환경

개발 환경

핵심 라이브러리

프로젝트 시작하기

사전 준비

프로젝트 설치 방법

깃 커밋 컨벤션


팀원

박선아

@SeonA1223
bsa14523@gmail.com

** 역할 **

  • 채팅 fe/be
  • 마이페이지 fe
  • 마이페이지 수정 fe
  • 배포(Docker, nginx)
  • 프로필 이미지 업로드
  • ppt 제작

김나영

@kimmy01
lovejb0101@gmail.com

** 역할 **

  • 로그인/로그아웃 be
  • 마이페이지 be
  • 친구찾기 fe/be
  • 전체적 UI 디자인
  • ppt 제작

윤세일

@devysi0827
devysi0827@gmail.com

** 역할 **

  • 로그인/로그아웃 fe
  • 채팅 fe
  • 전체적 UI 수정
  • 발표

프로젝트 소개

어너는 다양한 국가의 다양한 언어를 배우고자 하는 사용자들이 서로 언어를 교환하며 성장 할 수 있는 서비스입니다.
웹사이트에서 적극적이고 진지하게 언어교환을 하고 싶은 사람들을 위하여 시작한 프로젝트입니다.

자신이 배우고 싶은 언어, 할 수 있는 언어, 모국어를 선택 후,
관심사가 같은 다양한 사람들과 글로벌하게 토킹 해 보세요!☺

기술흐름도

DB 모델링


Pages in Detail

로그인

회원가입

마이페이지

- 최초 로그인시 마이페이지로 바로 이동
- 관심사토픽 및 사용자가 가능언어/모국어/배우고 싶은 언어 선택
- 프로필 이미지 설정 가능

사용자 정보 수정

친구 찾기

- 원하는 주세 선택 시, 해당 주제를 관심사로 등록한 사용자 목록을 띄워줌
- 단, 내가 배우고 싶은 언어를 사용하거나 모국어인 사람들 내에서만

채팅

- 친구찾기에서 특정 유저를 클릭 시, 채팅 연결 성공
- 기존에 친구였던 친구는, 해당 채팅방으로 이동


### 💜배포 환경
- __URL__ : https://i5a102.p.ssafy.io/
- __배포 여부__ : O 
- __접속 가능__ : 다른 인스턴스로 이동 예정으로 현재 불가능
- __HTTPS 적용__ : O 

💜개발 환경

FrontEnd

BackEnd

Collaboration

Distribution

Design

개발환경

  • JVM : 1.8, java8 (openjdk:8-jdk-alpine)
  • NGINX : nginx/1.18.0 (ubuntu)
  • Nodejs : 14.17.3
  • IntelliJ : 2021.1

💜핵심 라이브러리

  • OPENVIDU

    • 링크 : https://openvidu.io/
    • 소개 : WebRTC 라이브러리
    • 사용 기능 : 그룹 화상 회의, 영상 통화를 가능하게 해줌
  • RECOIL

    • 링크 : https://recoiljs.org/ko/
    • 소개 : React를 위한 상태관리 라이브러리
    • 사용 기능 : props를 대신하여 React 상태 관리
  • STOMP

    • 링크 : https://stomp.github.io/
    • 소개 : 메시징 프로토콜
    • 사용 기능 : 메시지 보내기 위한 SEND 명령, 수신 메시지에 SUBSCRIBE 명령
  • SOCKJS client

    • 링크 : https://github.com/sockjs
    • 소개 : webSocket 미지원 브라우저 관리
    • 사용 기능 : 메시지 통신 시 클라이언트에서 사용

프로젝트 시작하기

로컬에서 어너프로젝트를 시작하는 방법입니다. 몇 가지 사전 준비를 한 뒤, 다음 절차에 따라 진행 해 보세요!


💜사전 준비

로컬에서 프로젝트를 시작하기 위해 몇 가지를 설치 해야 합니다. 다음 설명을 참고하여 설치 해 주세요!

nodejs https://nodejs.org/ko/download/ v14.17.3
ec2에 도커 설치
//구버전 삭제
sudo apt-get remove docker docker-engine docker.io containerd runc

//패키지 관리(apt: 패키지 관리 명령어)
sudo apt-get update
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

//도커 GPG 키 추가
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

//stable repository 셋업
echo \
  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

//도커 엔진 설치
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

//도커 엔진 구체적인 버전 설치 방법
//사용 가능한 버전 확인
apt-cache madison docker-ce 
apt-cache madison docker-ce-cli

sudo apt-get install docker-ce=<version_string> docker-ce-cli=<version_string> containerd.io

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

sudo docker run hello-world
Openvidu

Openvidu 실행

sudo su

cd /opt

cd openvidu

./openvidu start

추가 수정 사항은 공식문서를 참고 해 주세요! https://docs.openvidu.io/en/2.19.0/deployment/ce/on-premises/#1-prerequisites

NGINX&Certbot
  sudo yum info nginx

  /////에러 발생 시 아래 실행////////////////////////////

  sudo vi /etc/yum.repos.d/nginx.repo 
  [nginx] name=nginx repo 
  baseurl=http://nginx.org/packages/centos/7/$basearch/ 
  gpgcheck=0 
  enabled=1

  //////////////////////////////////////////////////////

  sudo yum install nginx

Certbot

  sudo apt-get install snapd
  sudo snap install core;
  sudo snap install --classic Certbot

  sudo ln -s /snap/bin/certbot /usr/bin/certbot
  sudo certbot --nginx

nginx.conf

  	server {
			listen 443 ssl; # managed by Certbot
			server_name i5a102.p.ssafy.io;

			ssl_certificate /etc/letsencrypt/live/i5a102.p.ssafy.io/fullchain.pem; # managed by Certbot
      ssl_certificate_key /etc/letsencrypt/live/i5a102.p.ssafy.io/privkey.pem; # managed by Certbot
      include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
      ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

      location / {
            proxy_pass http://172.22.0.1:3000;
       }

      location /api {
           proxy_pass http://172.22.0.1:8080;
       }

    }

    server {
    	    listen 80;
    	    server_name i5a102.p.ssafy.io;

    	    if ($host = i5a102.p.ssafy.io) {
                 return 301 https://$host$request_uri;
            } # managed by Certbot
           return 404; # managed by Certbot
    }

}

### 💜프로젝트 설치 방법
  1. 깃 레포지토리 클론

    git clone https://lab.ssafy.com/s05-webmobile1-sub3/S05P13A102.git
  2. NPM packages 설치

    npm install
  3. front 디렉토리 이동 후 실행

    npm run start
  4. 스프링부트 빌드 전 ./gradlew 권한 부여

      sudo chmod 777 ./gradlew
  5. 스프링부트 빌드

     ./gradlew build && java -jar build/libs/eoneo-0.0.1.jar
  6. 도커 이미지 생성

      docker build --build-arg JAR_FILE=build/libs/eoneo-0.0.1-SNAPSHOT.jar -t eoneoback:v0.0 .
  7. 도커 컨테이너 실행 => 8080포트로 포트포워딩 및 이미지 마운트 위한 -v 유의

      docker run -d -p 8080:8080 --network eoneo --name eoneoback -v /home/ubuntu/images:/var/eoneo/images eoneoback:v0.0
  8. React 도커 이미지 생성

      cd S05P13A102/frontend/front
      docker build -t eoneofront:v0.1 .
  9. 이미지 실행 => 컨테이너, 3000번 포트로 포트포워딩

      docker run -d -p 3000:3000 --network eoneo --name eoneofront eoneofront:v0.1 

### 💜깃 커밋 컨벤션
  Summary >>> type : title 형식으로 작성
  Description >>> 본문은 생략 가능

  types = {
    feat : 새로운 기능에 대한 커밋
    fix : 버그 수정에 대한 커밋
    build : 빌드 관련된 파일 수정에 대한 커밋
    chore : 그 외 자잘한 잡다한 것들 수정에 대한 커밋
    ci : CI관련 설정 수정에 대한 커밋
    docs : 문서 수정에 대한 커밋
    style : 코드 스타일 혹은 포맷 등에 관한 커밋
    refactor : 코드 리팩토링에 대한 커밋
    test : 테스트 코드 수정에 대한 커밋
    design : 프론트 디자인에 대한 커밋
  }

  커밋 메시지 입력 예시:
    feat : 로그인 기능 구현
    feat : Implementation about Login
    fix : 회원가입 - 페이지 버튼 수정

About

**어너**는 다양한 국가의 다양한 언어를 배우고자 하는 사용자들이 서로 언어를 교환하며 성장 할 수 있는 서비스입니다. 웹사이트에서 적극적이고 진지하게 언어교환을 하고 싶은 사람들을 위하여 시작한 프로젝트입니다. 자신이 배우고 싶은 언어, 할 수 있는 언어, 모국어를 선택 후, 관심사가 같은 다양한 사람들과 글로벌하게 토킹 해 보세요!☺

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 5