[AWS Lambda] CloudFront Invalid Cache 자동화

이전 글에서 Front-end 소스를 수정하고 CodeCommit Repository로 push하는 경우 CodePipeline을 통해 자동으로 빌드한 뒤, S3에 빌드된 소스를 저장하였습니다. 하지만 CloudFront에 캐시가 남아있어서 바로 적용되지 못해 AWS Management Console에서 CloudFront로 들어가 직접 무효화를 해줘야 하는 번거로움이 있었습니다.

 

이번 글에서는 CloudFront의 캐시를 지우는 내용을 Lambda로 작성하여 CodePipeline에 연결하여 자동화해 보도록 하겠습니다.

 

1. 람다 Role 생성하기

람다 함수를 사용하기 전 먼저 람다 역할을 생성합니다. 이번 람다에서는 CloudFront에 접근할 것이기 때문에 관련 정책을 추가합니다. 또한, 로그 정보를 CloudWatch에 저장할 것이기 때문에 관련 정책을 추가하고 람다 함수 종료 후 CodePipeline으로 결과를 전송할 것이기 때문에 관련 정책을 추가합니다.

 

Lambda 서비스 선택

CloudFrontFullAccess, CloudWatchFullAccess, AWSCodePipelineFullAccess 선택

역할 이름 지정

 

2. 람다 함수 생성하기

람다 함수를 생성합니다. 함수는 python을 사용하여 작성하겠습니다.

 

함수 이름과 런타임을 지정하고 위에서 생성한 람다 역할 선택

 

3. 람다 함수 작성하기

아래와 같이 람다 함수를 작성합니다.

 

import json
import boto3
import time

cf = boto3.client('cloudfront')
code_pipeline = boto3.client('codepipeline')

DISTRIBUTION_ID = "CloudFront_배포_ID"

def create_invalidation():
    res = cf.create_invalidation(
        DistributionId=DISTRIBUTION_ID,
        InvalidationBatch={
            'Paths':{
                'Quantity': 1,
                'Items': [
                    '/*',
                ]
            },
            'CallerReference': str(time.time())
        }
    )
    invalidation_id = res['Invalidation']['Id']
    return invalidation_id

def lambda_handler(event, context):
    id = create_invalidation()
    job = event['CodePipeline.job']['id']
    
    if id:
        return code_pipeline.put_job_success_result(jobId=job)
    else:
        return code_pipeline.put_job_failure_result(jobId=job, failureDetails={'message': message, 'type': 'JobFailed'})

 

4. CodePipeline에 연결하기

기존 React 프로젝트를 배포하던 CodePipeline을 찾아 편집합니다. 아래와 같이 Build 스테이지 이후에 새로운 스테이지를 추가합니다. 

 

 

그런 다음 새로운 스테이지에 작업 그룹을 추가합니다. 작업 공급자로 Lambda를 선택하고 위에서 작성한 함수를 선택합니다.

 

 

이후 프론트엔드 소스를 수정한 뒤 push 하면 해당 파이프라인이 정상적으로 동작하는 것을 확인할 수 있습니다.

 

 

CloudFront에 접속하여 해당 배포를 찾아 무효화를 확인하면 새로운 무효화가 자동으로 생성된 것을 확인할 수 있습니다.

 

 

또한, 브라우저에서 http://CloudFront_배포_도메인_이름/index.html 로 접속하면 새로 변경된 내용이 반영된 서비스를 바로 확인할 수 있습니다.

 

---

지금까지 구성한 내용을 구조화하면 다음과 같습니다.