AWS CloudFront를 사용하여 동적 콘텐츠 전송하기(Dynamic Content Delivery)

Published in

Wizpace

8 min readJan 29, 2021

AWS CloudFront(CDN) 서비스를 사용하여 서비스의 레이턴시(Latency) 줄여보자

안녕하세요! 👋
위즈페이스 팀에서 웹 프론트엔드 개발을 담당하고 있는 Jusung입니다.
오늘은 저희 팀에서 운영 중인 서비스에 CloudFront를 사용하여 동적 콘텐츠를 전송했던 경험에 대해 공유하려고 합니다.

동적 컨텐츠 전송이란

보통 CDN을 접하면 이미지/JS/CSS 등 자주 바뀌지 않는 정적 파일들을 여러 CDN 서버에 올려 사용자가 좀 더 빠르게 콘텐츠를 전달받을 수 있게 해준다고 많이 들어보셨을 것입니다.

하지만 정적 콘텐츠 제공 이외에도 Node.js 웹서버, PHP, Go, Python 등 서버에서 매번 바뀌는 동적인 콘텐츠 제공 부분에도 성능을 향상시킬 수 있습니다.

CloudFront는 여러 나라의 Edge를 보유하고있음으로 사용자는 각 위치에서 멀리 떨어져 있는 Origin에 직접 연결하는 것이 아닌, 가장 가까운 Edge에 접근하여 콘텐츠를 제공받게 되며 그 과정속에서 Edge와 Origin 사이의 데이터 전송의 지속적인 연결을 유지하기에 콘텐츠 전송 속도의 향상이 증가됩니다.

그 밖에도 전송 데이터를 줄일 수 있는 GZIP Compression 기능 등을 Cloudfront에서 제공하고 있기 때문에 오리진 서버에서 압축을 위해서 별도의 자원을 사용할 필요가 없기도 합니다.

적용 구조

저희가 설정한 대략적인 구조는 아래와 같습니다.

EC2 인스턴스 생성 및 Node.js 서버 셋업

먼저 EC2 인스턴스를 생성해 줍니다.
저는 Ubuntu Server 20.04 LTS 기반의 인스턴스로 간단하게 만들었습니다.

다음으로 SSH 클라이언트를 사용하여 ec2 서버에 접속해 줍니다.

그다음 필요한 우분투 패키지를 설치해주며 n(node version management)을 통해 Node.js를 설치해 줍니다.

노드 버전은 작성 시점을 기준으로 14.15.4를 사용하였습니다.

# APT 패키지 업데이트 및 업그레이드 후 Node 설치 관련 패키지 설치$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install -y build-essential python2.7# n 설치
# 이후 CONTINUE 관련 메시지가 나오면 y를 누르고 엔터$ curl -L https://git.io/n-install | bash# 설치가 완료되면 현재 접속한 SSH 클라이언트를 종료하고 다시 연결
# 이후 n 명령어를 실행 후 패키지 매니저가 제대로 설치되었는지 확인$ n
$ node -v
v14.15.4
$ npm -v
6.14.10# yarn 및 pm2 설치
$ npm i -g yarn pm2

그리고나서 테스트를 위해 간단한 node.js 웹 서버를 하나 만들어 보겠습니다.

$ mkdir web-server
$ cd web-server
$ yarn init -y
$ touch app.js
$ vim app.js

app.js파일에 서버 코드 추가

const http = require('http');

const server = http.createServer((req,res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end(`Hello Node.js Web Server!`);
})

server.listen(3000, "0.0.0.0", () => {
    console.log("Server listening on port 3000");
})

node app.js 나 pm2 start app.js 커맨드를 사용하여 서버를 실행해 주시면 됩니다.

마지막으로 인스턴스의 보안 그룹 설정에 들어가셔서 저희가 오픈한 서버의 포트 3000번을 오픈해줍니다.