EC2에서 HTTPS간 통신 구현하기

배경

MSA환경에서 WebRTC통신을 구현하기 위해서는 서버와 클라이언트 모두 HTTPS로 암호화 된 상태에서 통신해야함 (ssl다는 방법은 여기를 참조)
서버와 클라이언트가 각 EC2에 따로 올라간 상태에서 nginx를 사용해 통신해보자

오늘의 할 일

• client: nginx의 tryfile을 index.html설정하기
• server: nginx에 리버스 프록시 달아주기
• server: node에 cors 달아주기

1. tryfile index.html설정하기

React는 SPA(Single Page Application)기반의 웹페이지 개발을 지원하기 때문에 index.html을 기반으로 내부 모듈을 교체하는 방식으로 동작한다. 절대경로로 요청이 들어와도 처리할 수 있도록 웹서버에서 설정을 해야한다. nginx의 경우 try_files설정을 하면 된다.

nginx config파일의 설정을 다음과 같이 변경한다

• sudo vi /etc/nginx/sites-available/default를 입력하기 전에 default파일의 이름을 바꿔 따로 백업해 두기로 하자
• 항상 config설정을 변경하고 나면 sudo systemctl restart nginx로 재시작을 한다.
  

2. nginx를 node.js express의 리버스 프록시로 사용하기

reverse proxy란?

리버스 프록시는 클라이언트로부터 요청을 받아서 적절한 웹 서버로 요청을 전송한다. 웹 서버는 요청을 받아서 평소처럼 처리를 하지만, 응답은 클라이언트로 보내지 않고 리버스 프록시로 반환한다. 요청을 받은 리버스 프록시는 그 응답을 클라이언트로 반환한다.

nginx config파일의 설정을 다음과 같이 변경한다.

• sudo vi /etc/nginx/sites-available/default를 입력하기 전에 default파일의 이름을 바꿔 따로 백업해 두기로 하자
• server { listen 80; server_name 도메인; location / { proxy_pass http://127.0.0.1:8000 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }
• server_name의 도메인부분에 사용할 서버의 도메인을 입력한다.
• proxy_pass부분에 express 앱의 포트번호를 입력한다.
• 항상 config설정을 변경하고 나면 sudo systemctl restart nginx로 재시작을 한다.

3. node.js express에서 CORS허용하기

CORS란?

Cross Origin Resource Sharing의 약자로, 현재 도메인과 다른 도메인으로 리소스가 요청될 경우를 말한다. 이런 경우 보안상의 이유로 브라우저는 CORS를 제한하고 있다.

CORS npm 모듈 설치하기

npm install --save cors

미들웨어로 사용하기

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

끝!!

결과적으로는 이러한 아키텍처가 완성이 됩니다!