Wizpace
Published in

Wizpace

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

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 기반의 인스턴스로 간단하게 만들었습니다.

EC2 생성 과정

다음으로 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.jspm2 start app.js 커맨드를 사용하여 서버를 실행해 주시면 됩니다.

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

보안그룹 설정
보안그룹 설정

이후 인스턴스의 퍼블릭 DNS 주소로 3000번 포트를 접속하면 저희가 설정한 화면이 잘 나오게 됩니다.

잘 열리는게 확인됐나요?

생성한 EC2를 로드밸런서로 연결하기 (Application Load Balancer)

이제 생성된 EC2에 ALB 타입의 로드밸런서를 연결해 보겠습니다.

EC2 대시보드에서 로드밸런서 메뉴를 클릭하여 들어가 준 후 상단에 생성 버튼을 눌러 ALB 로드 밸런서를 선택해 줍니다.

Listener 부분에 80번 포트를 허용해주며 Availability Zones에서 VPC를 다 체크해 줍니다. 그리고 로드 밸런서의 보안 그룹을 설정해 주며 라우팅 세팅으로 넘어갑니다.

타겟 그룹의 타입을 Instance로 체크한 후 다음을 클릭합니다.
(프로토콜과 포트 번호는 HTTP / 80 을 그대로 사용했습니다.)

저희가 이전에 만들었던 인스턴스를 클릭 후 Add to registered 옆에 있는 on port 부분에 저희가 인스턴스에서 열어줬던 포트 번호 3000을 입력 후 추가해 줍니다.

이후 최종 리뷰 확인 후 생성을 누릅니다.

정상적으로 로드 밸런서가 생성됐다면, 로드 밸런서의 상태가 프로비저닝(Provisioning)상태에서 작업이 완료되면 Active로 변경됩니다.

이후 로드 밸런서의 DNS name 주소로 접속하게 되면 아래와 같이 잘 동작하는 것을 확인하실 수 있습니다.

로드 밸런서 주소 접속했을 때 나타나는 화면

CloudFront 생성

마지막으로 저희가 생성해준 로드 밸런서를 CloudFront CDN을 통해서 접속 할 수 있게 설정해 보겠습니다.

CloudFront 대시보드에서 상단에 생성 버튼을 클릭해서 들어가 줍니다.

CloudFront 생성

CloudFront Custom Origin 설정하기

1. Origin Domain Name 부분에 저희가 만들어줬던 로드 밸런서로 설정해줍니다.

2. Cache Behavior Settings 부분에 Cache Policy와 Origin Request Policy를 각각 Managed-CachingDisabled, Managed-CORS-CustomOrigin 이렇게 설정해 줍니다.

이후에 CookieQuerystring 등 추가적인 설정이 필요할 경우 새로운 정책을 만들어서 적용하면 됩니다.

3. Distribution Settings에서는 현재 따로 커스텀 도메인 등 추가적인 설정을 하지 않았기에 그대로 두고 생성 버튼을 클릭합니다.

4. 생성된 CloudFront의 상태가 완료(Completed)가 되면 CloudFront의 도메인 주소로 접속 시 아래와 같이 잘 설정된 모습을 볼 수 있습니다.

처리 중 상태

CloudFront가 적용된 최종 페이지

마치며

이번에 CloudFront를 알아보며 덕분에 몰랐던 부분을 좀 더 접하게 되었으며, 적용 이후에 간단하게 속도 측정을 해보니 확실히 CloudFront를 적용하기 전에 비해 속도가 향상된 것을 느꼈던 것 같습니다. :)

🚀 슝슝~ 저희와 함께 하실래요?

위즈페이스팀은 언제나 팀원들과 함께 즐겁게 서비스를 만들어 나아갈 사람들을 환영해요!

아래 이메일을 통해 본인이 관심 있는 분야에 대해 편하게 연락주세요 :)
recruit@wizpace.com

감사합니다.

--

--

A place for wisdom, where knowledge and creativity are connected.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jusung Hwang

Jusung Hwang

13 Followers

Web Frontend Developer. 디자인과 개발의 영역을 조화롭게 표현할 수 있는 프론트엔드 개발의 매력에 빠진 사람, 황주성입니다 :)