AWS S3 + Cloudfront 간단 설명

hash bang이나 단일 페이지만 있는(url이동이 필요없는) 프로젝트는 상관이 없지만

history API 기반의 SPA를 배포하려면

해당 서비스에서 404 에러에 대해 처리할 수 있는 옵션이 필요하다.

 

SPA로 하면 index.html을 한 개인데

여러가지 경로로 오기 때문에 

해당 경로에 해당하는 index.html이 없어서 404에러가 나는 상황을 대응해야한다.

 

 

서버에서 직접 호스팅하기

서버 업체한테 서버를 빌려서

그 서버에다 올려서 사용자들이 쓸 수 있게하는 것

가장 난이도가 높은 편

인프라 지식이 필요

 

하지만 이걸 알아야 다른 배포서비스를 사용했을 때 문제를 해결할 수 있다.

 

EC2

구글 컴퓨터 엔진

Azure

네이버 클라우드 플랫폼

cafe24

iwinV

Oracle

...등등 많다.

 

매달 비용이 발생한다.

 

 

aws s3 + cloudfront 이용하기

-자주 쓰는 방식

s3는 일종의 정적인 파일만 저장하는 서비스

s3에 파일을 올리는 것만으로도 사람들이 서비스를 이용할 수 있음(cloud Front 없이)

 -> 퍼블릭 설정으로 가능

 

하지만 URL이 아래처럼 형성되기 때문에 CloudFront를 이용한다.

 

CloudFront를 통해서 실제 접속을 받고,

CloudFront는 요청 받은 것을 S3에서 꺼내서 사용하는 것이다.

 

CloudFront에서는 위에서 말했던 index.html의 부재로 인한 404에러를 해결해준다.

그리고 자체적으로 캐시가 있어 매번 S3에서 꺼내오는 것이 아니라서 속도가 빠르다.

 

접속을하려면 cloudforont에 Distributions에서 create Distribution을 하고,

DomainName을 S3에서 저장한 버킷의 이름 + s3.amazonaws.com 을 입력하고

만들면된다.

 

그리고 General에 DomainName에 있는 주소가 우리가 만든 서비스의 url이 되는 것이다.

 

이때  

권한 설정을 해야하고,

S3의 속성에서 정적 웹 사이트 호스팅을 활성화 해야한다.

 

일단 먼저 아래와 같이 웹사이트 호스팅을 활성화하고 살펴보자

위 링크에 접속하면 s3 자체에서 서비스에 접속할 수  있게 된다.

하지만 새로고침을 하게되면 404에러가 뜬다. 위에서 말했던 경로에 해당하는 index.html이 없기 때문이다.

 

 

그래서 s3를 CloudFront에서 접속해야한다.

위에서 했던 것처럼 해당 서비스를 cloudfront에 만들어주고,

아래에 Domain Name에 있는 url로 접속하면 서비스를 이용할 수 있다.

그리고 아래 처럼 S3에서 오류 문서에 index.html을 설정해놓으면

새로고침을 해도 404에러가 나타나지 않고 페이지도 그대로 노출되게 된다.

하지만 이 방법은 만약 다른 에러가 생겼을 때에도 index.html을 불러오기 때문에 문제가 있다.

 

그래서 Cloudfront에 있는 Error Page 탭을 이용하면된다.

에러 코드가 특정 코드일 때만 index.html로 가도록 적용할 수 있다.

이걸 다시 적용하려면 캐시를 날려줘야한다!