박선아
** 역할 **
- 채팅 fe/be
- 마이페이지 fe
- 마이페이지 수정 fe
- 배포(Docker, nginx)
- 프로필 이미지 업로드
- ppt 제작
김나영
** 역할 **
- 로그인/로그아웃 be
- 마이페이지 be
- 친구찾기 fe/be
- 전체적 UI 디자인
- ppt 제작
윤세일
@devysi0827
devysi0827@gmail.com
** 역할 **
- 로그인/로그아웃 fe
- 채팅 fe
- 전체적 UI 수정
- 발표
어너는 다양한 국가의 다양한 언어를 배우고자 하는 사용자들이 서로 언어를 교환하며 성장 할 수 있는 서비스입니다.
웹사이트에서 적극적이고 진지하게 언어교환을 하고 싶은 사람들을 위하여 시작한 프로젝트입니다.
자신이 배우고 싶은 언어, 할 수 있는 언어, 모국어를 선택 후,
관심사가 같은 다양한 사람들과 글로벌하게 토킹 해 보세요!☺
- 최초 로그인시 마이페이지로 바로 이동
- 관심사토픽 및 사용자가 가능언어/모국어/배우고 싶은 언어 선택
- 프로필 이미지 설정 가능
- 원하는 주세 선택 시, 해당 주제를 관심사로 등록한 사용자 목록을 띄워줌
- 단, 내가 배우고 싶은 언어를 사용하거나 모국어인 사람들 내에서만
- 친구찾기에서 특정 유저를 클릭 시, 채팅 연결 성공
- 기존에 친구였던 친구는, 해당 채팅방으로 이동
### 💜배포 환경
- __URL__ : https://i5a102.p.ssafy.io/
- __배포 여부__ : O
- __접속 가능__ : 다른 인스턴스로 이동 예정으로 현재 불가능
- __HTTPS 적용__ : O
- 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.3ec2에 도커 설치
//구버전 삭제
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-worldOpenvidu
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 nginxCertbot
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 --nginxnginx.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
}
}### 💜프로젝트 설치 방법
-
깃 레포지토리 클론
git clone https://lab.ssafy.com/s05-webmobile1-sub3/S05P13A102.git
-
NPM packages 설치
npm install
-
front 디렉토리 이동 후 실행
npm run start
-
스프링부트 빌드 전 ./gradlew 권한 부여
sudo chmod 777 ./gradlew
-
스프링부트 빌드
./gradlew build && java -jar build/libs/eoneo-0.0.1.jar -
도커 이미지 생성
docker build --build-arg JAR_FILE=build/libs/eoneo-0.0.1-SNAPSHOT.jar -t eoneoback:v0.0 . -
도커 컨테이너 실행 => 8080포트로 포트포워딩 및 이미지 마운트 위한 -v 유의
docker run -d -p 8080:8080 --network eoneo --name eoneoback -v /home/ubuntu/images:/var/eoneo/images eoneoback:v0.0
-
React 도커 이미지 생성
cd S05P13A102/frontend/front docker build -t eoneofront:v0.1 .
-
이미지 실행 => 컨테이너, 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 : 회원가입 - 페이지 버튼 수정




