[웹/Vue.js/WebRTC] OpenVidu 설치부터 테스트까지

---

 

⚠️이 내용은 2021년도 프로젝트를 진행하며 작성했던 문서로 최신 버전과 다를 수 있습니다.

목차
0. 환경설정
1. 배포
  1.1. 권장 설치
  1.2. OpenVidu-Server Custom Dockerizing
  1.3. 실행
2. Nginx 및 방화벽 설정
3. 실행 후 통신 확인

---

0. 환경 설정

본 문서는 환경 설정의 설치에 대해 깊게 다루지 않습니다.

• AWS EC2
• Java Version : open-jdk-11 (openvidu 2.20.0 버전 사용 시 jdk 11 필요)
• maven : 3.6.3
• docker
• docker-compose
• 도메인 구성 : HTTPS 를 사용하여 배포. Let's Encrypt를 사용하여 SSL 인증서 생성
• 서버 포트 구성 (공식문서 권장)
  • ufw allow : 우분투 방화벽 설정
    • sudo ufw allow ssh
    • sudo ufw allow 80/tcp
    • sudo ufw allow 443/tcp
    • sudo ufw allow 3478/tcp
    • sudo ufw allow 3478/udp
    • sudo ufw allow 40000:57000/tcp
    • sudo ufw allow 40000:57000/udp
    • sudo ufw allow 57001:65535/tcp
    • sudo ufw allow 57001:65535/udp
  • sudo ufw enable : 우분투 방화벽 해제

---

1. 배포

1) 권장 설치

1. 설치 권장 폴더 생성 : mkdir opt
2. 설치 스크립트 다운로드 및 실행 : curl https://s3-eu-west-1.amazonaws.com/aws.openvidu.io/install_openvidu_latest.sh | bash

필요한 설정이 자동 설치됨(ex. docker-compse.yml)

순서대로 진행

# 디렉토리 구조
opt
- openvidu
   -- certificates
   -- custom-nginx-vhosts
   -- docker-compose.override.yml
   -- docker-compose.yml
   -- openvidu
   -- owncert
   -- recordings

3. 설정 파일 수정 : nano .env

DOMAIN_OR_PUBLIC_IP=mysite.com # 서비스 할 도메인
OPENVIDU_SECRET=MY_SECRET # 변경 가능
CERTIFICATE_TYPE=selfsigned
# HTTP_PORT=80
# HTTPS_PORT=443
LETSENCRYPT_EMAIL=your@email.com

2) OpenVidu-Server Custom Dockerizing

1. 디렉토리 생성 후 진입 : /home/ubuntu/ 에서 mkdir OpenVidu → cd OpenVidu
2. OpenVidu Git clone : git clone https://github.com/OpenVidu/openvidu.git
3. 받아진 openvidu 폴더 진입 : cd openvidu
4. 패키지 클린 : mvn clean install -U
5. openvidu/openvidu-server 폴더 진입 : cd openvidu-server
6. openvidu-server 패키지 클린 : mvn clean install -U
7. 관리자 권한 부여 : sudo su
8. 루트 디렉토리 이동 : cd /
9. SSL 인증서 경로 진입 : cd /etc/letsencrypt/live/{SSL 인증받은 도메인}/
10. openssl pkcs12 -export -in fullchain.pem -inkey privkey.pem -out mysite.com.p12 --name ssafy -CAfile chain.pem -caname root
    - 이때 설정하는 비밀번호 보관해두기 [★]
    - mysite.com.p12 생성 확인
11. openvidu-server 파일에 SSL 인증서 복사, 붙여넣기
    1) openvidu-server 의 application.properties 가 있는 경로까지 이동 : cd openvidu/openvidu-server/src/main/resources/
    2) SSL 인증서 복붙 : cp /etc/letsencrypt/live/mysite.com/mysite.com.p12 ./
    = 내 사이트 SSL인증서(mysite.com.p12)를 현재 경로(./)에 복사하겠다.
12. application.properties 수정 : vi application.properties

server.address=0.0.0.0
server.ssl.enabled=true
server.ssl.key-store=classpath:mysite.com.p12
server.ssl.key-store-password=your-password # 위 10번에서 설정한 비번
server.ssl.key-store-type=PKCS12
server.ssl.key-alias=mysite
server.servlet.session.cookie.name=OVJSESSIONID

logging.level.root=info
spring.main.allow-bean-definition-overriding=true

SUPPORT_DEPRECATED_API=true

DOTENV_PATH=.

DOMAIN_OR_PUBLIC_IP=mysite.com
OPENVIDU_SECRET=MY_SECRET # openvidu .env 설정과 통일
CERTIFICATE_TYPE=selfsigned
HTTPS_PORT=5443 # 포트번호는 자유
KMS_URIS=["ws://localhost:8888/kurento"]

13. openvidu 최상위 파일로 이동
14. 메이븐 빌드 : mvn package -DskipTests
15. openvidu-server 파일로 이동 : cd openvidu-server
16. 파일 접근 권한 부여 : chmode 777 create_image.sh
17. 도커 이미지 생성 : ./create_image.sh 2.20.1
18. cd opt/openvidu
19. 도커 컴포즈 파일 수정 : vi docker-compose.yml

services:

    openvidu-server:
        image: openvidu/openvidu-server:2.20.1
        restart: on-failure
        network_mode: host
        entrypoint: ['/usr/local/bin/entrypoint.sh']
        volumes:
            - /var/run/docker.sock:/var/run/docker.sock
            - ${OPENVIDU_RECORDING_PATH}:${OPENVIDU_RECORDING_PATH}
            - ${OPENVIDU_RECORDING_CUSTOM_LAYOUT}:${OPENVIDU_RECORDING_CUSTOM_LAYOUT}
            - ${OPENVIDU_CDR_PATH}:${OPENVIDU_CDR_PATH}
        env_file:
            - .env
        environment:
            - SERVER_SSL_ENABLED=true
            - SERVER_PORT=5443 # application.properties 설정과 일치
            - KMS_URIS=["ws://localhost:8888/kurento"]
            - COTURN_REDIS_IP=127.0.0.1
            - COTURN_REDIS_PASSWORD=${OPENVIDU_SECRET}
            - COTURN_IP=${COTURN_IP:-auto-ipv4}

3) 실행

1. /opt/openvidu 경로에서 ./openvidu start
   → 이전에 실행을 했다면 'stop' 후 'start' 또는 'restart'
2. 도커 확인 : docker ps

---

2. Nginx 및 방화벽 설정

1. Nginx 설정 파일 : sudo vi /etc/nginx/sites-enabled/default

location /api{
                proxy_pass http://localhost:8080/;
                proxy_http_version 1.1;
                proxy_set_header Connection "";

                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
        }

2. 방화벽이 'inactive' 면 상관없으나 접근 허용 룰을 설정한 'active' 상태라면 위에서 설정한 포트 번호를 허용해줘야 함
→ sudo ufw allow 5443

3. OpenVidu 실행 후 통신 확인

1. /opt/openvidu 경로에서 ./openvidu start (이미 실행 중이라면 넘김)
2. 화면에 나오는 URL 접속(Server URL)

--------------------------------------------------------
  OpenVidu is ready!
	-----------------------
	* OpenVidu Server URL : https://mysite.com:5443
	* OpenVidu Dashboard : https://mysite.com:5443/dashboard
--------------------------------------------------------

3. 다음과 같은 화면 확인

4. Git에서 OpenVidu tutorial 클론 : git clone https://github.com/OpenVidu/openvidu-tutorials.git
5. openvidu-insecure-vue 파일을 VSCode로 열기
6. /src/App.vue 코드 수정

const OPENVIDU_SERVER_URL = "https://mysite.com:5443";
const OPENVIDU_SERVER_SECRET = "MY_SECRET"; // 본인이 지정한 비밀번호

7. npm 설치 후 실행 : npm i → npm run serve
8. 맨 처음 실행 시 비밀번호 입력 팝업이 뜸 : .env 에서 설정한 SECRET 입력
9. 다음과 같은 화면 확인

10. 브라우저에서 카메라/마이크 권한 알림이 뜨면 허용
11. 본인의 캠과 마이크가 잘 나오면 성공

이후 OpenVidu 공식문서의 튜토리얼을 참고하여 개발

최종 파일 구조

- /home/ubuntu/OpenVidu/openvidu : Git clone 받아 openvidu-server dockerizing
- /home/ubuntu/opt/openvidu : curl 로 설치 ./openvidu start 실행

---

🔗 참고링크

OpenVidu 공식문서

- 튜토리얼
openvidu-hello-world - OpenVidu Docs

Hello World - OpenVidu Docs

- Vue.js
https://docs.openvidu.io/en/2.20.0/tutorials/openvidu-insecure-vue/

openvidu-insecure-vue - OpenVidu Docs

- SpringBoot MVC Java
https://docs.openvidu.io/en/2.20.0/tutorials/openvidu-mvc-java/

openvidu-mvc-java - OpenVidu Docs

- 배포 On premises
https://docs.openvidu.io/en/stable/deployment/ce/on-premises/

On premises - OpenVidu Docs