[AWS] CloudFront: 웹페이지 배포하기

cloudfront는 프론트 배포용 서비스다. 빠른 전송속도와 캐싱 등을 제공한다.

S3에 html, js, css 등의 소스를 올리고, cloudfront로 연동하는 방식으로 프론트 서버를 게시할 수 있다.




S3 업로드

먼저 프론트용으로 사용할 버킷을 하나 만든다.

퍼블릭 액세스 차단은 전부 해제한다.

그리고 리소스를 업로드한다.

그리고 권한 탭-버킷 정책 편집에서 권한을 다 열어주고

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::버킷이름/*"
        }
    ]
}

속성 탭에서 정적 웹 사이트 호스팅을 활성화하고

기본 인덱스 경로를 적어준다.

그럼 다음과 같이 도메인이 생겨날 것이다.

잘 동작하는지 확인해보자.




CloudFront 배포

그럼 이제 저걸 cloudfront에 연결만 하면 된다.

원본 도메인은 방금 만든 S3를 골라 넣는다.

그리고 밑에것들은 일단 기본값으로 둬도 무방하다.

그렇게 해서 만들면, 이렇게 뜰 것인데

5분 정도 기다리면 저기 배포 도메인 이름의 도메인으로 접근이 가능해질 것이다.




도메인 붙이기 (Route53)

이제 도메인을 붙여보자.
나는 Route53으로 도메인을 관리중이므로, Route53으로 연동할 것이다.
적절히 서브도메인을 지어주고, CNAME 방식으로 해서 아까 cloudfront 도메인을 넣어준다.

그리고 다시 cloudfront로 돌아가서 방금 연결한 도메인을 복붙해준다.

인증서도 넣어줘야 한다.
없으면 생성해서 넣어주자.




캐시 날리기

cloudfront를 사용하다보면 본의아니게 캐시가 남아서 짜증나는 상황이 생길 수도 있다.
그럴 때는 캐시를 날려줘야 하는데, 그나마 편리한 방법은 무효화(Invalidation)를 날려주는 것이다.

cloudfront의 배포에서, 무효화 탭으로 들어가 무효화를 생성한다.

그럼 무효화시키고싶은 경로를 설정할 수 있다.
전부 날리고 싶으면 아래처럼 와일드카드를 깔아주면 되고, 특정 경로만 지정할 수도 있다.

저대로 날리면 끝이다.

간단하다.



참조
https://stackoverflow.com/questions/22021651/amazon-s3-and-cloudfront-cache-how-to-clear-cache-or-synchronize-their-cache