오직 공부에만 집중할 수 있는 캠스터디

졸업 프로젝트 주제와 부제는 위와 같다.

본 프로젝트에서 프론트 개발, 웹 클라이언트 서버 배포를 담당하면서 해결했던 것들을 정리해보고자 한다.

1. 배포 후 로그인 안되는 세션 문제 해결

STUDY-DO 프로젝트를 배포하려고 domain 하나에는 s3으로 react를 올리고, 다른 domain 하나에는 ec2로 express를 올렸다.

그런데 문제가 생겼다. 우리는 '참여한 스터디' 페이지를 볼 때 서버에서 session으로 사용자의 아이디를 확인해 클라이언트로 데이터를 보내줬다. 여기서 사용자의 session(req.session.user) 확인이 안되었다.

그래서 구글링했는데 인프런에 어떤 분이 올린 질문이 우리 문제랑 비슷하다.

프론트랑 백엔드가 도메인이 다른 경우에는 쿠키 설정이 현실적으로 어렵다고 한다..... 나는 프론트를 서버와 다른 도메인에 배포했기 때문에 배포를 새로 하려고 한다...!

ec2에 nodejs 서버를 올리는데 502 bad gateway도 나고, target group이 unhealthy하다는 문제도 계속 있었다. 한 세번 계속 ec2 새로 인스턴스 생성했다가 지우고 하다가 왜 이런 에러들이 났는지 알아냈다... 다음에 배포할 때 또 이런 일이 일어날 수 있기 때문에 나중에 참고하고자 정리하려고 한다.

ec2에 nodejs 서버 배포하기

1. 인스턴스 생성

처음은 인스턴스 생성을 해야한다.

보안그룹은 포트 22, 80, 8000을 지정해주자 로컬에서 돌릴 때 8000 포트로 해서 그대로 8000해줬다.

시작하기 누르면 키 페어를 새로 생성해서 잘 저장해두자 나중에 서버 접속할 때 필요하다.

그럼 이렇게 일단 인스턴스는 생성했다.

2. 탄력적 IP 할당

도메인이 인스턴스를 가리키도록 도메인에 대한 DNS 레코드에 탄력적 IP주소를 지정해야한다.

탄력적 IP 주소 할당 버튼 누른다.

설정은 이런식으로 해서 IP주소를 할당 받으면,

이렇게 고정 IP 주소가 생긴다.

3. 인스턴스에 탄력적 IP 연결

탄력적 IP 만들었으니까 인스턴스에 연결하자!

탄력적 IP 주소 연결 누른다

연결하고 싶은 인스턴스가 보인다. 그대로 연결해주자 그럼 인스턴스 요약에서 퍼블릭 IPv4주소로 탄력적 IP주소가 연결된 것을 확인할 수 있다.

4. pem키로 ubuntu에 접속하기

1번에서 새로 생성한 키페어 지금 필요하다. 윈도우 쓰니까 git bash 열어줬다. 해당 키페어가 있는 곳으로 cd하자. 그 다음에 그 루트에서

ssh -i "키페어 이름(확장자까지)" ubuntu@(탄력적IP주소)

이거 치고 엔터하면

이런 식으로 우분투에 접속할 수 있다.

여기에 nodejs 서버를 올릴 것이기 때문에, nodejs 관련 모듈을 install하면 된다.

sudo apt update 
sudo apt install npm 
sudo apt install nodejs
sudo apt install git

이렇게 하면 아래 코드로 잘 설치가 되었는지 확인하자

node -v
npm -v
git --version

5. git clone

이제 배포할 코드를 클론하자

git config --global user.name (아이디)
git config --global user.email (이메일)
git clone https://github.com/CSE-Final-Project/backend.git

이렇게 하면

깃 클론 된거 확인할 수 있다.

이제 프로젝트 관련 모듈 설치하려고 npm i 했는데 node 구버전이라서 안됐다. node 더 높은 버전으로 업데이트하자.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs
sudo apt install build-essential

이렇게 하면

아까 v8.10.0에서 v14.19.0으로 업데이트 됐다.

다시 npm i 해보자

된다!

이제 코드도 올려봤으니 npm run start해서 서버가 잘 돌아가는지 확인하자

http://탄력적IP주소:8000/ 에서 되는걸 확인할 수 있다.

6. 인바운드 규칙 https 443 추가

http를 https로 전환하기 위해서는 인바운드 규칙을 추가해줘야 한다. 인바운드 규칙 추가는 인스턴스에서 할 수 있다.

HTTPS 443 포트를 추가해줬다.

7. 80번 포트 -> 8000번 포트로 redirect하기

지금은 http://탄력적IP주소:8000 주소에 들어갈 수 있다. 이제 8000 포트를 뒤에 붙여주지 않고 http://탄력적IP주소 이렇게만 해도 들어갈 수 있도록 만들어주자

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8000

그러면

이렇게 http://탄력적IP주소 만 쳐도 들어가는 걸 확인할 수 있다

8. 로드밸런서 생성

로드 밸런서 생성 버튼을 누른다.

Listeners and routing에서 HTTPS 설정을 해줘야 한다. 443 포트의 HTTPS 프로토콜을 추가해주자.

옆에 target group도 설정해줘야 한다. Create target group을 누르자.

9. Create target group

이름 설정해주고 HTTP 프로토콜의 80번 포트를 지정해주자. (지금 http://탄력적IP주소 로 들어가고 있으니까)

Health checks의 path 부분은 '/' 루트로 지정해줬다.

Next 누르면

인스턴스를 연결할 수 있다.

10. ACM SSL 인증서 만들기

https로 리다이렉트 해야하니까 SSL 인증서도 필요하다.

도메인 이름에는 이 nodejs 서버를 올릴 도메인의 이름을 적어주면 된다.

발급받는데 시간이 조금 걸린다. 이때 도메인 부분의 'Route 53에서 레코드 생성'을 눌러준다.

레코드 생성을 해주자

9번이랑 10번에서 만든 대상그룹, ACM SSL를 넣어서 로드밸런서를 만들면 된다.

11. route53에 로드밸런서 연결

이런식으로 nudo-study.cf에 레코드를 편집해줬다.

https://nudo-study.cf 로 접속이 가능하다!

에러 이유

ec2에 nodejs를 배포하면서 502 bad gateway 에러가 진짜 많이 났다. 내가 배포해보면서 위 같은 에러가 난 이유는 ** target group이 unhealthy해서**였다.

그럼 target group을 healthy하게 바꾸려면 health check path인 '/'에 200 응답을 줄 수 있도록 해야한다.

'/'에 200 응답을 주려면 로드밸런서에 연결하기 전에 올린 서버가 '/' path에서 잘 작동되는지 확인해야한다. 그러려면 7번의 80번 포트 -> 8000번 포트로 redirect하기를 한 다음에, '/' path에서 서버가 잘 켜지는지 확인이 꼭 필요하다.

프론트와 백을 같은 도메인에 배포를 완료했으면, 프론트와 백에 withCredentials 옵션을 추가해주자

[이유] 프론트에서 백으로 CORS 요청을 할 때 기본적으로 쿠키를 설정하거나 보내지 않았다. 그래서 프론트에서 백으로 CORS 요청을 할 때 withCredentials 옵션을 추가하여 CORS 요청에 쿠키값을 추가해야 한다.

nodejs 서버

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}));
app.use(function(req, res, next){
    res.header('Access-Control-Allow-Origin', 'https://client.nudo-study.cf');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE,PATCH');
    res.header('Access-Control-Allow-Headers', 'content-type');
    res.header('Access-Control-Allow-Credentials','true');
    next();
})

app.use(cors({
    origin : process.env.CLIENT_ORIGIN | "(클라이언트 주소)",
    credentials : true,
    methods: ["GET","POST","PATCH","DELETE","OPTIONS"]
}))

react 클라이언트

import axios from 'axios'

const client = axios.create({
    withCredentials: true
})

export default client;

아니면

axios.defaults.withCredentials = true;

위 withCredentials 옵션 설정이 끝나면 CORS 요청을 할 때 쿠키 값도 같이 넣어서 프론트에서 백으로 보내주기 때문에 로그인이 가능해졌다.

MakeSense 위 링크에서 object detection을 위한 라벨링을 진행했다.

Get Started 눌러준다.

해당 알고리즘을 선택한다.

라벨 이름을 설정한다. hand로 설정했다.

이렇게 하나하나 다 rect annotation을 만든다.

라벨링이 되면 상단바의 Actions > Export rect annotations에서 해당 라벨링 파일을 받는다.

ffmpeg을 이용해서 캠스터디 동영상의 프레임을 추출했다.

FFMPEG 설치방법 및 명령어 정리 - 동영상 자르기, 이미지 변환, 확장자 변환

위 블로그를 참고해서 ffmpeg를 설치했다.

bin 폴더에 들어가서 cmd 창을 열어 아래 명령어를 입력했다.

ffmpeg -ss [동영상_시작시간] -i [인풋_동영상_경로] -r [초당_추출할_장수] -f image2 [이미지_이름]

동영상 경로와 이미지 이름에는 끝에 .mp4, .jpg 같은 파일 형식을 포함해주자

예시

ffmpeg -ss 00:00:0 -i C:\test.mp4 -r 10 -f image2 test-%d.jpg

프레임 추출이 잘 되면 bin 폴더 안에 이미지가 저장 된 것을 확인할 수 있다.

cmd창에

pip3 install plotly --upgrade

했는데도 에러가 계속 나서

anaconda prompt(anaconda3) 관리자 권한으로 실행해서 위에 코드 쳤더니 해결됨.

캠스터디는 혼자서 공부하는 사람들을 대상으로 각자의 공간에서 공부하는 모습을 캠으로 서로 보여주면서 열심히 공부하자는 의지를 함께 불태울 수 있는 서비스이다.

즉, 캠스터디는 서로가 공부를 열심히 하고 있는지 확인할 수 있는 온라인 독서실이다.

캠스터디는 보통 공부시간을 기준으로 캠스터디 방의 규칙을 정하는데, 기존의 캠스터디는 사용자가 직접 수동으로 타이머를 눌러 공부 시간을 기록하여, 목표 공부시간을 채웠는지 인증해야한다.

그런데 이 공부시간을 직접 기록하는 것에 대해 캠스터디를 애용하는 몇몇 사용자의 의견을 물었는데, 다음과 같다.

"공부하다가 가끔 타이머를 멈추지 않아 공부하지 않은 시간도 함께 기록되는 일이 있었다. 이럴 때마다 어느 정도의 시간을 기록된 시간에서 빼야할지 고민이 된다." "5분에서 10분 정도의 짧은 휴식시간을 가질 때마다 타이머를 눌러서 중지하고 다시 눌러서 시작하는 것이 귀찮을 때가 있다."

위 의견을 바탕으로 캠스터디 서비스인데, 사용자의 자리 이탈을 실시간으로 인식해서 공부시간을 자동으로 기록하여 인증까지 해주는 서비스가 있으면 좋겠다는 생각을 했다.

'자리 이탈 감지 캠 스터디 관리 웹 서비스'를 구현하려면 크게 두 가지 기술 확인이 필요하다.

1. 실시간 영상통화
2. 캠에 보이는 손의 유무를 인식하여 스톱워치를 자동으로 중지할 수 있는지

먼저 WebRTC로 실시간 영상통화 웹 사이트를 구현해보자 구현한 영상통화 웹 사이트가 다음 두 조건을 만족하는지 확인해야한다.

1. 내 기기에서 캠으로 내 모습을 실시간으로 확인할 수 있는지
2. 다른 기기에서도 내 모습을 실시간으로 확인할 수 있는지

npm init -y

terminal에 위 명령어로 package.json 파일을 생성한다.

dependency를 추가하자

npm i express ejs socket.io

ejs는 embedded javascript의 약자로 express에서 dynamic website를 만들기 위해 template로 사용되는 파일이다. socket.io는 양방향 통신에 필요하다.

npm i uuid

uuid는 네트워크 상에서 고유성이 보장되는 id를 만들기 위한 고유 식별자이다. 영상통화의 개별적인 id를 부여해 room을 만들 때 사용된다. 위처럼 새로운 id를 새로고침할 때마다 부여해준다.

npm i --save-dev nodemon

nodemon(node monitor)는 파일이 수정되면 자동으로 노드를 재시작하는 확장 모듈이다. 노드 애플리케이션의 소스 코드를 수정할 때마다 매번 명령어로 새로 시작할 필요가 없어 편리하다.

package.json 파일의 script 부분에

"devStart" : "nodemon server.js"

을 추가하여 npm run devStart을 한번 하면 소스코드를 수정할때마다 새로 시작하지 않아도 된다.

bash terminal을 열어서 peer 라이브러리를 다운로드하자 peerjs

npm i -g peer

peerjs --port 3001

하면 3001 포트에서 PeerServer가 작동된다.

코드를 짜는 중에 아래와 같은 에러가 났다. TypeError: Cannot read property 'emit' of undefined (해결방법) socket.io 버전이 상위버전이라 emit에서 에러가 났다. socket.io 버전을 낮추자

npm install socket.io@^2.3.0

package.json 파일에서 socket.io 버전이 제대로 설치되었는지 확인.

소스코드

package.json

{
  "name": "webrtc_test_2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "devStart": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "socket.io": "^2.3.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

server.js

const express = require('express')
const app = express()
const server = require('http').Server(app) //socket.io는 http위에서 동작한다.
const io = require('socket.io')(server)
const { v4: uuidV4 } = require('uuid')

app.set('view engine', 'ejs')
app.use(express.static('public')) //모든 js코드는 public 폴더 안에 넣는다.

app.get('/', (req, res) => {
    res.redirect(`/${uuidV4()}`) 
    //새로고침할때마다 랜덤 dynamic url을 만들어서 new room 생성
})

app.get('/:room', (req, res) => {
    res.render('room', { roomId: req.params.room })
})

io.on('connection', socket => {  
    socket.on('join-room', (roomId, userId) => {   
      socket.join(roomId)
      socket.to(roomId).broadcast.emit('user-connected', userId)

      socket.on('disconnect', () => {
        socket.to(roomId).broadcast.emit('user-disconnected', userId)
      })
    })
  })


server.listen(3000)

room.ejs room의 view를 보여주기위해 작성.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        const ROOM_ID = "<%= roomId %>"
    </script>
    <script
    defer
    src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"
    ></script>
    <script src="/socket.io/socket.io.js" defer></script>
    <script src="script.js" defer></script>
    <title>Document</title>
    <style>
        #video-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, 300px);
          grid-auto-rows: 300px;
        }

        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      </style>
</head>
<body>
    <div id="video-grid"></div>
</body>
</html>

script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
/*
const myPeer = new Peer(undefined, {
  host: '/',
  port: '3001'
})
*/
const myPeer = new Peer();

const myVideo = document.createElement('video')
myVideo.muted = true
const peers = {}
navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(stream => {
  addVideoStream(myVideo, stream)

  myPeer.on('call', call => {
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
      addVideoStream(video, userVideoStream)
    })
  })

  socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
  })
})

socket.on('user-disconnected', userId => {
  if (peers[userId]) peers[userId].close()
})

myPeer.on('open', id => {
  socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) {
  const call = myPeer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
  call.on('close', () => {
    video.remove()
  })

  peers[userId] = call
}

function addVideoStream(video, stream) {
  video.srcObject = stream
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
  videoGrid.append(video)
}

실행결과

(영상통화 웹 사이트 하나만 열었을 때)

(영상통화 웹 사이트 같은 url로 두개 열었을 때)

두 개 이상의 기기에서도 실시간 영상통화가 가능한지 구현해보자.

OpenSSL로 private.pem, public.pem 파일을 생성하자.

server.js 수정

const express = require('express');
const app = express();
const { v4: uuidV4 } = require('uuid');
const fs = require('fs');
const https = require('https');

const server = https.createServer(
  {
    key: fs.readFileSync('./public/private.pem'),
    cert: fs.readFileSync('./public/public.pem'),
    requestCert: false,
    rejectUnauthorized: false,
  },
  app
);

const io = require('socket.io')(server);

app.set('view engine', 'ejs')
app.use(express.static('public'))

app.get('/', (req, res) => {
    res.redirect(`/${uuidV4()}`) 
})

app.get('/:room', (req, res) => {
    res.render('room', { roomId : req.params.room })
})


io.on('connection', socket => {
    socket.on('join-room', (roomId, userId) => {
        socket.join(roomId)

        socket.to(roomId).emit('user-connected', userId)

        socket.on('disconnect', () => {
        socket.to(roomId).emit('user-disconnected', userId)
    })
    })
})

app.get('/:room')
server.listen(3000)

https://서버IP:3000 으로 접속하자.

서버IP주소는 cmd창에서 다음 명령어로 확인하자.

ipconfig

PC에서 https://서버IP:3000 로 들어가게 되면 아래 같은 창이 뜬다.

고급 버튼을 누른다.

localhost(안전하지않음)으로 이동한다.

모바일도 마찬가지로 https://서버IP:3000 로 접속한다.

실행결과

PC에서 볼때>

모바일에서 볼때>

참고 How To Create A Video Chat App with WebRTC

화상채팅예제로 익히는 WebRTC