Vue.js로 만든 웹 앱은 정적 사이트로 AWS S3+ CloudFront에서 호스팅할 수 있습니다.

매우 까다로운 추천 디자인이지만 S3의 프로덕션 파일을 업데이트하는 경우 CloudFront의 에지 서버에 남아 있는 캐시로 인해 업데이트가 즉시 반영되지 않습니다.

CloudFront 콘솔에서 Invalidation을 수동으로 실행하여 캐시를 삭제할 수 있습니다.

이번에는 AWS Lambda를 사용하여 Invalidation 수동 실행 부분을 자동화하는 방법을 정리합니다.

전제

정적 사이트(특히 Vue.js)를 S3+ CloudFront에서 호스팅하는 경우를 가정합니다.

Lambda를 사용한 Invalidation 자동화 절차

IAM 역할 만들기

먼저 Lambda 함수에 적용할 IAM 역할을 준비합니다.

IAM 콘솔 에서 새 역할을 만듭니다. 역할을 사용하는 권한은 Lambda이고 권한 내용은 다음 JSON에 지정됩니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "logs:CreateLogGroup",
        "logs:CreateLogStream",
        "logs:PutLogEvents"
      ],
      "Resource": "arn:aws:logs:*:*:*"
    },
    {
        "Effect": "Allow",
        "Action": [
            "cloudfront:CreateInvalidation"
        ],
        "Resource": [
            "*"
        ]
    }
  ]
}

「 Automatic Cloudfront invalidation with Amazon Lambda 」에서 인용

롤명은 「lambda_cloud_front_invalidation」등 알기 쉬운 적당한 이름으로 합시다.

Lambda 함수 만들기

그런 다음 Lambda 함수를 만듭니다.

함수 만들기

Lambda 콘솔 에서 새 함수를 만듭니다. 이번 런타임에서 사용하는 언어는 'Python 2.7'을, 실행 역할은 기존 역할에서 '이전에 만든 IAM 역할'을 지정합니다.

트리거 추가

함수 트리거에 정적 사이트를 호스팅하는 S3을 추가합니다. 이벤트 유형은 "모든 오브젝트 작성 이벤트"를 선택합니다.

함수 코드 설정

기본 설정된 함수 코드 lambda_function.py를 다음 내용으로 업데이트합니다.

lambda_function.py

from __future__ import print_function

import boto3
import time

def lambda_handler(event, context):
    path = "/dist"
    for items in event["Records"]:
        if path in items["s3"]["object"]["key"]:
            client = boto3.client('cloudfront')
            invalidation = client.create_invalidation(DistributionId='YOUR_DISTRIBUTION_ID',
                InvalidationBatch={
                    'Paths': {
                        'Quantity': 1,
                        'Items': [path + '/*']
                },
                'CallerReference': str(time.time())
            })
            break

코드 내용은 S3의 /dist 디렉토리(Vue.js의 빌드된 코드)의 업데이트를 감지하여 CloudFront의 Invalidation을 실행할 수 있다는 것입니다.
YOUR_DISTRIBUTION_ID 부분을 자신의 Distribution ID로 바꾸십시오.

가동 테스트

Lambda 함수가 의도한 대로 움직이는지 테스트합니다.

S3 의 대상 디렉토리(이번은 /dist )를 갱신해, Lambda 콘솔 의 「모니터링 > Error count and Success rate」로 처리가 성공했는지 확인할 수 있습니다.



한층 더 새롭게 브라우저를 열어, 변경 내용이 반영되어 있으면 OK입니다.

청구 알람 설정도 잊지 마세요.

의도하지 않은 고액 청구가 발생하지 않도록 CloudWatch 콘솔 에서 청구 알람을 설정해 둡시다.

Reference

Automatic Cloudfront invalidation with Amazon Lambda