<div id="readability-page-1" class="page"><section><div><figure><img alt="" src="https://miro.medium.com/max/4000/1*BuvBlQtHRA6398v_UAf19w.png" width="2000" height="616" role="presentation"></figure></div><div><div><p><a href="https://nabigraphics.medium.com/?source=post_page-----c249da4b269b-----------------------------------" rel="noopener follow"><img alt="Jusung Hwang" src="https://miro.medium.com/fit/c/96/96/1*3sz0SF37ibwm-BAopfwAfQ.png" width="48" height="48"></a></p></div><p id="feb4">AWS CloudFront(CDN) 서비스를 사용하여 서비스의 레이턴시(Latency) 줄여보자</p><p id="cbb4">안녕하세요! 👋<br>위즈페이스 팀에서 웹 프론트엔드 개발을 담당하고 있는 <strong>Jusung</strong>입니다.<br>오늘은 저희 팀에서 운영 중인 서비스에 CloudFront를 사용하여 동적 콘텐츠를 전송했던 경험에 대해 공유하려고 합니다.</p><h2 id="a603">동적 컨텐츠 전송이란</h2><p id="0a42">보통 CDN을 접하면 이미지/JS/CSS 등 자주 바뀌지 않는 정적 파일들을 여러 CDN 서버에 올려 사용자가 좀 더 빠르게 콘텐츠를 전달받을 수 있게 해준다고 많이 들어보셨을 것입니다.</p><p id="ec64">하지만 정적 콘텐츠 제공 이외에도 Node.js 웹서버, PHP, Go, Python 등 서버에서 매번 바뀌는 동적인 콘텐츠 제공 부분에도 성능을 향상시킬 수 있습니다.</p><p id="291e">CloudFront는 여러 나라의 Edge를 보유하고있음으로 사용자는 각 위치에서 멀리 떨어져 있는 Origin에 직접 연결하는 것이 아닌, 가장 가까운 Edge에 접근하여 콘텐츠를 제공받게 되며 그 과정속에서 Edge와 Origin 사이의 데이터 전송의 지속적인 연결을 유지하기에 콘텐츠 전송 속도의 향상이 증가됩니다.</p><p id="d876">그 밖에도 전송 데이터를 줄일 수 있는 GZIP Compression 기능 등을 Cloudfront에서 제공하고 있기 때문에 오리진 서버에서 압축을 위해서 별도의 자원을 사용할 필요가 없기도 합니다.</p><h2 id="0f4e">적용 구조</h2><p id="fe3b">저희가 설정한 대략적인 구조는 아래와 같습니다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*RjKq61e4TdeP0GVWGR7KPg.png" width="1000" height="565" role="presentation"></p></div></figure></div><div><h2 id="ff34">EC2 인스턴스 생성 및 Node.js 서버 셋업</h2><p id="a42a">먼저 EC2 인스턴스를 생성해 줍니다.<br>저는 Ubuntu Server 20.04 LTS 기반의 인스턴스로 간단하게 만들었습니다.</p></div><div><p id="7356">다음으로 SSH 클라이언트를 사용하여 ec2 서버에 접속해 줍니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*LCQoqgqtquNejTIPFa8IPQ.png" width="700" height="509" role="presentation"></p></div></figure><p id="7c6e">그다음 필요한 우분투 패키지를 설치해주며 n(node version management)을 통해 Node.js를 설치해 줍니다.</p><blockquote><p id="615f">노드 버전은 작성 시점을 기준으로 <strong>14.15.4</strong>를 사용하였습니다.</p></blockquote><pre><span id="de6f"># APT 패키지 업데이트 및 업그레이드 후 Node 설치 관련 패키지 설치</span><span id="ce1d">$ sudo apt update<br>$ sudo apt upgrade -y<br>$ sudo apt install -y build-essential python2.7</span><span id="9e8f"># n 설치<br># 이후 CONTINUE 관련 메시지가 나오면 y를 누르고 엔터</span><span id="88f9">$ curl -L https://git.io/n-install | bash</span><span id="2d9a"># 설치가 완료되면 현재 접속한 SSH 클라이언트를 종료하고 다시 연결<br># 이후 n 명령어를 실행 후 패키지 매니저가 제대로 설치되었는지 확인</span><span id="548b">$ n<br>$ node -v<br>v14.15.4<br>$ npm -v<br>6.14.10</span><span id="a609"># yarn 및 pm2 설치<br>$ npm i -g yarn pm2</span></pre><p id="8522">그리고나서 테스트를 위해 간단한 node.js 웹 서버를 하나 만들어 보겠습니다.</p><pre><span id="b3ef">$ mkdir web-server<br>$ cd web-server<br>$ yarn init -y<br>$ touch app.js<br>$ vim app.js</span></pre><p id="66e9"><code>app.js</code>파일에 서버 코드 추가</p><pre><span id="95a9"><em>const </em>http = require('http');<p><em>const </em>server = http.createServer((req,res) =&gt; {<br>    res.statusCode = 200;<br>    res.setHeader('Content-Type', 'text/plain');<br>    res.end(`Hello Node.js Web Server!`);<br>})</p><p>server.listen(3000, "0.0.0.0", () =&gt; {<br>    <em>console</em>.log("Server listening on port 3000");<br>})</p></span></pre><p id="e193"><code>node app.js</code> 나 <code>pm2 start app.js</code> 커맨드를 사용하여 서버를 실행해 주시면 됩니다.</p><p id="0681">마지막으로 인스턴스의 보안 그룹 설정에 들어가셔서 저희가 오픈한 서버의 포트 3000번을 오픈해줍니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*HuqZurvdwr7ir8SHmVbx-w.png" width="700" height="380" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*HuqZurvdwr7ir8SHmVbx-w.png?q=20"></p></div><figcaption>보안그룹 설정</figcaption></figure></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*QIPFJSfn8RMkl9LvkpK_Gg.png" width="1000" height="625" role="presentation"></p></div><figcaption>보안그룹 설정</figcaption></figure></div><div><p id="63ed">이후 인스턴스의 퍼블릭 DNS 주소로 3000번 포트를 접속하면 저희가 설정한 화면이 잘 나오게 됩니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*QyWw0gKegIcgIlInXGnXGg.png" width="700" height="494" role="presentation"></p></div></figure><p id="b27a">잘 열리는게 확인됐나요?</p><h2 id="cdf0">생성한 EC2를 로드밸런서로 연결하기 (Application Load Balancer)</h2><p id="0793">이제 생성된 EC2에 ALB 타입의 로드밸런서를 연결해 보겠습니다.</p><p id="5d80">EC2 대시보드에서 로드밸런서 메뉴를 클릭하여 들어가 준 후 상단에 생성 버튼을 눌러 ALB 로드 밸런서를 선택해 줍니다.</p></div><div><p id="ca89">Listener 부분에 80번 포트를 허용해주며 Availability Zones에서 VPC를 다 체크해 줍니다. 그리고 로드 밸런서의 보안 그룹을 설정해 주며 라우팅 세팅으로 넘어갑니다.</p></div><div><p id="3df3">타겟 그룹의 타입을 Instance로 체크한 후 다음을 클릭합니다.<br>(프로토콜과 포트 번호는 HTTP / 80 을 그대로 사용했습니다.)</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*p3HgAsFBf3t-McKpstgiHQ.png" width="1000" height="625" role="presentation"></p></div></figure></div><div><p id="9686">저희가 이전에 만들었던 인스턴스를 클릭 후 Add to registered 옆에 있는 on port 부분에 저희가 인스턴스에서 열어줬던 포트 번호 3000을 입력 후 추가해 줍니다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*VlS6XkiFcqvmYBewGEl5dg.png" width="1000" height="625" role="presentation"></p></div></figure></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*7iEyfU2bq-uFEYEpTS5GiA.png" width="1000" height="742" role="presentation"></p></div></figure></div><div><p id="b251">정상적으로 로드 밸런서가 생성됐다면, 로드 밸런서의 상태가 프로비저닝(Provisioning)상태에서 작업이 완료되면 Active로 변경됩니다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*UqopYPy7Hk11JllmvjLq6g.png" width="1000" height="625" role="presentation"></p></div></figure></div><div><p id="20e6">이후 로드 밸런서의 DNS name 주소로 접속하게 되면 아래와 같이 잘 동작하는 것을 확인하실 수 있습니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*gJRCz9Y0yNCrYkw4X-phAw.png" width="700" height="517" role="presentation"></p></div><figcaption>로드 밸런서 주소 접속했을 때 나타나는 화면</figcaption></figure><h2 id="1846">CloudFront 생성</h2><p id="40e5">마지막으로 저희가 생성해준 로드 밸런서를 CloudFront CDN을 통해서 접속 할 수 있게 설정해 보겠습니다.</p><p id="a2d9">CloudFront 대시보드에서 상단에 생성 버튼을 클릭해서 들어가 줍니다.</p></div><div><h2 id="afcf">CloudFront Custom Origin 설정하기</h2><p id="e71f">1. Origin Domain Name 부분에 저희가 만들어줬던 로드 밸런서로 설정해줍니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*VXrnNtz2D-6O8xbBGDvTAw.png" width="700" height="524" role="presentation"></p></div></figure><p id="b5f2">2. Cache Behavior Settings 부분에 <strong>Cache Policy와</strong> <strong>Origin Request Policy</strong>를 각각 <code>Managed-CachingDisabled</code>, <code>Managed-CORS-CustomOrigin</code> 이렇게 설정해 줍니다.</p><blockquote><p id="46b8">이후에 <strong>Cookie</strong> 및 <strong>Querystring</strong> 등 추가적인 설정이 필요할 경우 <strong>새로운 정책</strong>을 만들어서 적용하면 됩니다.</p></blockquote><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*OPGDc0fFKrzUtwYc9_e-Cg.png" width="700" height="719" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/58/1*OPGDc0fFKrzUtwYc9_e-Cg.png?q=20"></p></div></figure><p id="ee7d">3. Distribution Settings에서는 현재 따로 커스텀 도메인 등 추가적인 설정을 하지 않았기에 그대로 두고 생성 버튼을 클릭합니다.</p><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*qnGKvgxPTIHDrL9PHUbsNQ.png" width="700" height="690" sizes="700px" role="presentation" data-old-src="https://miro.medium.com/max/60/1*qnGKvgxPTIHDrL9PHUbsNQ.png?q=20"></p></div></figure><p id="195b">4. 생성된 CloudFront의 상태가 <strong>완료(Completed)</strong>가 되면 CloudFront의 도메인 주소로 접속 시 아래와 같이 잘 설정된 모습을 볼 수 있습니다.</p></div><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/2000/1*anXaQO6UqKCXfS075UFsoQ.png" width="1000" height="486" role="presentation"></p></div><figcaption>처리 중 상태</figcaption></figure></div><div><h2 id="e9a3">CloudFront가 적용된 최종 페이지</h2><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*XwZfuYBEjAYV21NQfy-Sdw.png" width="700" height="525" role="presentation"></p></div></figure><h2 id="4798">마치며</h2><p id="c063">이번에 CloudFront를 알아보며 덕분에 몰랐던 부분을 좀 더 접하게 되었으며, 적용 이후에 간단하게 속도 측정을 해보니 확실히 CloudFront를 적용하기 전에 비해 속도가 향상된 것을 느꼈던 것 같습니다. :)</p><h2 id="da11">🚀 슝슝~ 저희와 함께 하실래요?</h2><p id="4bf5">위즈페이스팀은 언제나 팀원들과 함께 즐겁게 서비스를 만들어 나아갈 사람들을 환영해요!</p><p id="2895">아래 이메일을 통해 본인이 관심 있는 분야에 대해 편하게 연락주세요 :)<br><a href="mailto:recruit@wizpace.com" rel="noopener ugc nofollow" target="_blank">recruit@wizpace.com</a></p><p id="f0f4">감사합니다.</p></div></section></div>

Stories by Jusung Hwang on Medium

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 기반의 인스턴스로 간단하게 만들었습니다.
다음으로 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번을 오픈해줍니다.
이후 인스턴스의 퍼블릭 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 Custom Origin 설정하기
1. Origin Domain Name 부분에 저희가 만들어줬던 로드 밸런서로 설정해줍니다.
2. Cache Behavior Settings 부분에 Cache Policy와 Origin Request Policy를 각각 Managed-CachingDisabled, Managed-CORS-CustomOrigin 이렇게 설정해 줍니다.
이후에 Cookie 및 Querystring 등 추가적인 설정이 필요할 경우 새로운 정책을 만들어서 적용하면 됩니다.
3. Distribution Settings에서는 현재 따로 커스텀 도메인 등 추가적인 설정을 하지 않았기에 그대로 두고 생성 버튼을 클릭합니다.
4. 생성된 CloudFront의 상태가 완료(Completed)가 되면 CloudFront의 도메인 주소로 접속 시 아래와 같이 잘 설정된 모습을 볼 수 있습니다.
CloudFront가 적용된 최종 페이지
마치며
이번에 CloudFront를 알아보며 덕분에 몰랐던 부분을 좀 더 접하게 되었으며, 적용 이후에 간단하게 속도 측정을 해보니 확실히 CloudFront를 적용하기 전에 비해 속도가 향상된 것을 느꼈던 것 같습니다. :)
🚀 슝슝~ 저희와 함께 하실래요?
위즈페이스팀은 언제나 팀원들과 함께 즐겁게 서비스를 만들어 나아갈 사람들을 환영해요!
아래 이메일을 통해 본인이 관심 있는 분야에 대해 편하게 연락주세요 :)
recruit@wizpace.com
감사합니다.
AWS CloudFront를 사용하여 동적 컨텐츠 전송하기(Dynamic Content Delivery) was originally published in Wizpace on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

댓글