[AWS] Github Actions S3와 github repository 연결하기 [Ver 2]

Github Actions

지난 번에 이어서 너무 만족했던 기능이었기에, 이번에도

제 repository랑 연동해서 push 할 때마다 s3가 업로드 되도록 해봤습니다..ㅎ 

 

제가 S3와 Cloudfront를 활용한 정적 웹 배포를 이번에도 진행해봤는데,

이게 git에 새로운 것을 업데이트를 시키는 데 cloudfront 주소로 막상 들어가보면 css랑 js 코드가 계속 이전꺼로 되어있었어여..

바로, 개발자 도구를 열어서 확인해봤더니,

역시 업데이트가 안되길래 이거 뭔가 이상하다 싶어서 생각해보니까,

S3에서 파일을 업데이트한 후, CloudFront가 새로운 파일을 즉시 제공하지 않는 이유가 있었습니다..

CloudFront가 캐시된 버전을 제공하기 때문에 그랬었습니다..

그래서 무효화하여 캐시된 파일을 최신 버전으로 업데이트 해야합니다.

CloudFront 무효화

그래서 저는 지난번에 했던 것처럼 요기서 무효화 생성을 할까도 고민하던 중,

이것도 역시 S3에 올릴 때마다 CloudFront 캐시 무효화를 생성하면 좋겠다라고 생각해서 이거를 추가했습니다

workflow.yaml 파일 생성 및 secrets and variables 추가

github actions의 workflow에 CloudFront 캐시 무효화 단계를 추가했습니다.  

secrets and variables에 추가하는 법은

https://mrkite.tistory.com/32

[AWS] [Step 15] CI/CD github actions를 활용해서 자동 배포

여기 참고하시면 좋을 것 같아요!!

지난번과 달라진 점이라고 하면, CLOUDFRONT_DISTRIBUTION_ID인데

이건 Cloudfront -> 배포 에 들어가면 ID가 나오는 데 이걸 secrets에 입력하면 됩니다!

 

CloudFront 배포 ID 찾는법

 

제가 여기서 uses: jakejarvis/s3-sync-action@master 를 사용하지 않은 이유는

파일을 동기화하지만, assets 폴더 자체가 올라가지 않고,

안에 내용물만 올라가서 aws s3 cp 명령어를 사용하기로 했습니다. 

assets 폴더를 재귀적으로 S3 버킷에 업로드하고,

현재 디렉토리에 있는 모든 HTML 파일을 개별적으로 반복문으로 업로드 합니다.

그리고 마지막 단계에서는 CloudFront 캐시를 무효화하여 최신 파일이 제공되도록 하였습니다.! 후 후!

 

Github Actions workflow 

주요 구성 요소 

1. name: Upload Website: 워크플로의 이름입니다. 

2. on: push: main 브랜치에 푸시될 때 워크플로가 실행됩니다. 

3. jobs: deploy: 배포 작업을 정의합니다. 

   • runs-on: ubuntu-latest: 작업이 실행될 환경을 지정합니다. 

   • steps: 작업의 각 단계를 정의합니다. 

   • Checkout repository: GitHub repository의 코드를 체크아웃합니다.

   • Sync assets folder to S3: jakejarvis/s3-sync-action을 사용하여 assets 폴더를 S3 버킷에 동기화합니다.[동기화 할때 사용]

 

인수와 환경 변수 

• args: aws s3 sync 명령어에 전달되는 인수입니다. 여기에는 ACL 설정, 심볼릭 링크 처리, 삭제 옵션 등이 포함됩니다. 

  • --acl public-read: 업로드된 파일을 공용으로 설정합니다. 

  • --follow-symlinks: 심볼릭 링크를 따라갑니다. 

  • --delete: S3 버킷에서 로컬에 없는 파일을 삭제합니다. 

• env: 환경 변수를 통해 AWS 자격 증명과 S3 버킷 이름 등을 설정합니다. 

  • AWS_S3_BUCKET: S3 버킷 이름. 

  • AWS_ACCESS_KEY_ID: AWS 액세스 키 ID. 

  • AWS_SECRET_ACCESS_KEY: AWS 시크릿 액세스 키. 

  • AWS_REGION: AWS 리전.