Openvidu 프로젝트 수동 배포하기
<aside> ❗ Docker와 Nginx 설정을 처음 사용해봅니다. EC2, Ubuntu 환경에 익숙하지 않습니다. 따라서 설명에 오류가 있을 수 있습니다. 오타도 있을 수 있습니다.
설명에 오타 및 오류가 있다면 광주 2반 임태민에게 📩 주시면 수정하겠습니다.
</aside>
0. 도입
- 4일 동안 여러 실험을 거듭하며 배포에 성공했습니다.
- Docker, Nginx, Openvidu를 사용해본게 이번이 처음인지라 설명 내용에 다소 오류가 있을 수 있습니다
- 결과론입니다. 다만 배포에 성공했기 때문에 어떤 순서의 절차를 거쳐서 어떤 설정을 통해 배포에 성공했는지에 대해 다음과 같이 정보를 공유하고자 합니다.
1. 프로젝트 구조
- 설정 이전에 먼저 저희 팀의 프로젝트 구조를 보여드립니다. (front ↔ back ↔ openvidu)
- 위 구조에서 배포를 설정했기 때문에 구조를 이해한 후 팀의 상황에 맞는 설정을 권고드립니다.
- 80포트는 기본적으로 포트를 설정하지 않으면 사용하게 되는 HTTP 포트이므로 프로젝트(프론트, 백엔드)에 접근하기 위한 기본 포트로 사용해야 합니다
- 리버스 프록시를 이용해 프론트엔드는 3000번 포트를, 백엔드는 5000번 포트를 사용했습니다.
- 여기서 눈 여겨볼 점은 Openvidu on premises를 설치하면 Nginx 설정 환경도 같이 설정 된다는 점입니다. 그리고 Openvidu를 실행할 경우 기본 포트가 80 그리고 ssl 설정이 443포트에 default로 적용되어 있습니다.
- 이번 배포는 포트 설정이 가장 큰 문제입니다. openvidu가 필요로 하는 포트를 다 가져가도록 설정해야합니다. 설정이 되었는지 확인도 필수입니다.
- 그렇다면 어떻게 포트 설정을 해결하고 배포를 완성시키는지 그 과정을 알아봅시다
- 무엇보다도 공식 문서를 꼭 먼저 읽어 보시기 바랍니다!
2. OpenVidu 설정
- 전제 조건
- 로컬에서 실행했을 때, 프론트, 백엔드, Openvidu 모두 연결되어 사용이 문제가 없는 상태
- 기본적으로 EC2에 docker, docker-compose가 설치된 상태
- 포트 상황을 확인할 수 있는 netstat가 설치된 상태
- 방화벽 설정은 일단 해제 ufw disable , 추후 방화벽 설정 추가
- Nginx는 설치되어 있지 않은 상태. 설치되어 있다면 완전 삭제 필수 (삭제 방법은 5번 레퍼런스 참조)
- docker ps 를 통해 실행되고 있는 컨테이너가 없는 상태
- netstat -lntp 를 이용하여 포트를 점유하고 있는 작업이 기본 상태 이외에 추가적으로는 없는 상태
- Jenkins나 어떠한 포트를 점유할 수 있는 설치는 모두 완전 삭제 (초기화 상태에서 시작)
- letsencrypt로 발급받은 key는 보유중인 상태임을 가정!!!
- sudo apt-get install letsencrypt
- sudo letsencrypt certonly --standalone -d <도메인>
- 같은 도메인 ssafy.io 으로 발급을 요청하면 발급 limit 오류가 발생해서 서버 시간을 기준으로 발급이 가능한 시간까지 대기해야 할 수 있습니다… 수강 신청을 하듯이 해당 시간에 선착순으로 받을 수 있습니다…
- 시간이 부족하다면 해결 방법은 저렴한 도메인을 구매하셔서 해당 도메인을 적용하고 키를 요청 하시면 됩니다
- 설명
- 가장 먼저 OpenVidu를 설치하고 OpenVidu가 필요로 하는 포트를 내줘야합니다
- 공식 문서에서 Prerequisite을 읽어보면 Openvidu가 가져가야할 포트가 많습니다. 그래서 혹여나 설치한 Nginx가 포트를 먼저 선점할 수도 있기 때문에 Openvidu를 먼저 설치하며 미연의 가능성을 막아 봅시다
- 과정
- OpenVidu 설치 (공식 문서 참고)
- # 루트 권한
- sudo su
- # 이동
- cd /opt
- # 설치
- # 환경 설정 열기
- nano .env
- .env 파일 설정
- 환경 설정 파일입니다. 일단 HTTP와 HTTPS 설정을 하지 않고 default로 설정하여 실행해봅시다
- 아래 내용을 팀의 상황에 맞춰서 작성해주어야 합니다.
DOMAIN_OR_PUBLIC_IP=<도메인> # OpenVidu SECRET used for apps to connect to OpenVidu server and users to access to OpenVidu Dashboard OPENVIDU_SECRET=설정할 비밀번호를 넣어 주세요 # Certificate type: # - selfsigned: Self signed certificate. Not recommended for production use. # Users will see an ERROR when connected to web page. # - owncert: Valid certificate purchased in a Internet services company. # Please put the certificates files inside folder ./owncert # with names certificate.key and certificate.cert # - letsencrypt: Generate a new certificate using letsencrypt. Please set the # required contact email for Let's Encrypt in LETSENCRYPT_EMAIL # variable. CERTIFICATE_TYPE=letsencrypt # If CERTIFICATE_TYPE=letsencrypt, you need to configure a valid email for notifications LETSENCRYPT_EMAIL=이메일을 입력해주세요 - 실행 및 종료
- # 실행
- ./openvidu start
- # 종료
- ./openvidu stop
- 실행을 하면 설정한 도메인을 기반으로 접속할 수 있는 링크가 나올 것입니다. 링크를 눌러보셔서 openvidu 페이지에 접속할 수 있는지 확인해보세요! 성공적으로 접속이 되었다면 다시한번 포트 상황을 확인해야 합니다. 포트 확인은 netstat -lntp 입니다
- 포트 확인 시 성공적으로 80과 443이 nginx에 의해 사용되고 있다면 확인을 마치고 openvidu를 종료시켜주세요. 우리가 사용자들에게 보여줄 페이지는 openvidu가 제공하는 페이지가 아닌 우리가 만든 프론트 페이지이어야 하기 때문입니다
- .env 파일 재 설정
- nano .env 명령어를 이용하여 환경 설정 파일에 접속합시다.
- 이번에는 HTTP와 HTTPS 설정을 해봅시다.
- 이 설정이 필요한 이유는 openvidu 설정이 담긴 nginx설정에 ssl을 추가해주기 위해서 입니다.
- ssl설정을 위해서는 key가 필요한데 편리하게도 앞서 설정한 CERTIFICATE_TYPE=letsencrypt 덕분에 자동으로 인증이 설정됩니다. 그리고 이 설정이 진행되어야 여러 명이 하나의 세션에 들어가 통신을 할 수 있습니다.
- 이렇게 외부에서 키를 받아오기 위해서 사용자의 프론트와 백엔드가 사용하는 포트를 피해서 HTTP와 HTTPS 포트를 설정해줘야 합니다. 그렇지 않으면 Unable to load certificate 지옥에서 빠져 나올 수 없습니다.
HTTP_PORT=8081 HTTPS_PORT=8443 - 실행 및 포트 확인
- 이전에는 80번 443번 포트를 Nginx가 점유하고 있었다면 지금은 8081번, 8443번 포트가 점유하고 있을 것입니다. 확인해주세요!
- # 실행
- ./openvidu start
- # 포트 확인
- netstat -lntp
3. 프로젝트 설정
- 전제조건
- 프론트는 vuejs, 백엔드는 spring 입니다
- 기본적으로 프론트와 백엔드 그리고 openvidu 사이의 통신은 문제가 없다는 것을 가정합니다
- 디버깅을 하면서 각 파트 사이에 통신이 원활하게 되는지 먼저 체크하셔야 합니다
- 디버깅에 도움이 되는 코드는 다음과 같습니다
- # 경로 : /opt/openvidu # 설명 : Openvidu를 설정한 nginx 로그 확인
- docker-compose logs -f nginx
- # 컨테이너 로그
- docker logs <컨테이너 이름>
- DockerHub
- DockerHub 접속 및 가입
- repository 생성
- vuejs
- playroom 파일
- // 로컬 테스트용
- // const APPLICATION_SERVER_URL = "<http://localhost:5000/>";
- // 배포용
- const APPLICATION_SERVER_URL = "<도메인>";
- nginx.conf
- server {
- listen 3000;
- location / {
- root /app/build;
- index index.html;
- try_files $uri $uri/ /index.html;
- }
- }
- Dockerfile
- FROM nginx:stable-alpine
- WORKDIR /app
- RUN mkdir ./build
- ADD ./dist ./build
- RUN rm /etc/nginx/conf.d/default.conf
- COPY ./nginx.conf /etc/nginx/conf.d
- EXPOSE 3000
- CMD ["nginx", "-g", "daemon off;"]
- vuejs의 빌드 폴더 이름이 dist이기 때문에 4번째줄에 dist를 설정한 것입니다. 프로젝트 상황에 따라 적절히 대처하시기 바랍니다
- DockerHub
- 이미지 빌드 및 도커 허브 업로드
# 빌드 npm run build # 도커 이미지 빌드 docker build -t <도커허브이름>/<레포이름>:이미지태그이름 . # 도커 이미지 업로드 docker push <도커허브이름>/<레포이름>:이미지태그이름
- playroom 파일
- spring
- application.properties
- server.port: 5000
- server.ssl.enabled: false
- #로컬
- #OPENVIDU_URL: <http://localhost:4443/>
- #배포
- OPENVIDU_URL: http://<도메인>:5443/
- #OPENVIDU_URL: <http://localhost:5443/>
- OPENVIDU_SECRET: 비밀번호
- 여기에서 http:<도메인>:5443 이 부분이 정말 중요합니다!!!!!!
- 공식문서 설명을 확인해보면 접근 Openvidu URL의 포트번호를 5443으로 설정해야 한다고 나와 있습니다. 공식문서를 꼭 확인하세요!
- Dockerfile
- FROM openjdk:11-jdk-slim
- ARG JAR_FILE=target/*.jar
- COPY ${JAR_FILE} app.jar
- ENTRYPOINT ["java", "-jar", "/app.jar"]
- 이미지 빌드 및 도커 허브 업로드
# Maven project 기준 ## 우측 Maven 클릭해서 Lifecycle에 clean -> compile -> install을 순서로 클릭 # 도커 이미지 빌드 docker build -t <도커허브이름>/<레포이름>:이미지태그이름 . # 도커 이미지 업로드 docker push <도커허브이름>/<레포이름>:이미지태그이름 - application.properties
- EC2
- 일단 dockerhub 본인 repository에 이미지가 업로드 되어 있는지 확인
- docker image pull
docker pull <도커허브이름>/<레포이름>:이미지태그이름
4. 연동
- 전제조건
- Openvidu가 실행되고 있는 상태
- dockerhub에서 EC2에 프론트엔드와 백엔드 이미지를 모두 pull한 상황
- nginx
- nginx 설치
- # Nginx 설치
sudo apt-get install nginx
# 설치 확인
sudo nginx -v
# Nginx 중지
sudo systemctl stop nginx
# letsencrypt는 발급이 되었음을 전제로 합니다
# 키 확인
cd /etc/letsencrypt/live/<도메인>
# Nginx 파일 작성
cd /etc/nginx/sites-available
sudo vim deploy-test.conf
###### 설정파일 내용 ########
server {
location / {
proxy_pass http://localhost:3000;
}
location /api {
proxy_pass http://localhost:5000;
}
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/<도메인>/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/<도메인>/privkey.pem;
}
server {
if ($host = <도메인>) {
return 301 https://$host$request_uri;
}
listen 80;
server_name <도메인>;
return 404;
}
#########################
# sites-enabled로 작성 파일 복사
## sites-enabled 폴더에 있는 .conf 파일이 설정됩니다
## 만약 설정 파일을 다시 작성해서 복사해 넣으려면 sites-enabled에 있는 설정 파일을 지우고 하시면 됩니다
## 단, 절대로 default 파일은 건드리지 마세요!!!
sudo ln - /etc/nginx/sites-available/deploy-test.conf /etc/nginx/sites-enabled/deploy-test.conf
# 적용
## 적용 성공 시 success
## 실패 시 오타 가능성 혹은 경로나 여타 문제 가능성
sudo nginx -t
# Nginx 재시작
## 포트 충돌 시 재시작에서 오류 발생 가능성
sudo systemctl restart nginx
# Nginx 상태 확인
sudo systemctl status nginx
- 실행
- vuejs
- docker run --rm -d -p 3000:3000 --name <원하는 이름 작성> <vuejs 이미지 ID>
- spring
- docker run --rm -d -p 5000:5000 --name <원하는 이름 작성> <spring 이미지 ID>
- 컨테이너 실행 및 포트 확인
- # 컨테이너 실행 상황 확인 (run port 설정이 잘 되어 있는지 재차 확인)
- docker ps
- # 포트 확인
- netstat -lntp
- 도메인 접속 및 정상 실행 확인
- vuejs
5. 레퍼런스
- ‘도커를 활용한 수동 배포 실습’ 2023.02.02 대전 실습코치 박시원님
- Openvidu on premises 설치
- Deploy Openvidu Application
Deploy OpenVidu applications - OpenVidu Docs
- Ubuntu 사용 중인 포트 확인
우분투(Ubuntu) 22.04 Server netstat으로 이용중인 포트 확인하기 | YeopBox
- OpenVidu port와의 전쟁
- Openvidu를 On Premises로 배포
- Ubuntu에서 Nginx 완전 삭제
'프로젝트 - 기술' 카테고리의 다른 글
| [deploy] EC2, docker, jenkins (0) | 2023.02.06 |
|---|---|
| [vue]webpack오류 (0) | 2023.02.02 |
| [Vue]Can't resolve 'fs' in 오류 (0) | 2023.01.31 |
| [CI/CD]Docker, jenkins (0) | 2023.01.30 |
