cloud front, github action

나의 버킷이 속하는 리전에서 정적호스팅을 사용하면, 빠르지만 만약 다른 리전에서 사용하면 느릴 것이다.

그럼 리전마다 s3를 만들어주면 해결이 가능하겠지만, 비효율적이다. cloud front는 이 부분을 해결해 줄 것이다.

 

아래의 그림과 같은 역할을 한다고 한다.

cloudfront에 들어가서 우리의 버킷을 선택해주고 생성해보자!

편집에 들어가서 기본값을 s3에 있는 index.html로 지정해주면 

새로운 도메인을 들어가면 바로 출력이 되는 것을 확인할 수 있다.

github action을 사용하여 우리가 index.html을 수정하면 그 수정한 파일이 자동으로 s3에 저장되고 그 저장된 index.html이 cloudfront에서 다시 캐싱되는 것을 해주어야 한다.

 

따라서 먼저 IAM의 권한을 추가시켜주자. 이전에는 s3에 대한 접근 권한만 있었다. 이젠 cloudfront에도 접근할 수 있도록 해주자.

깃을 init하고 거기에 .github라는 폴더를 생성 그 안에 workflows라는 폴더 생성 그 안에 main.yml을 생성해주었다.

이 것은 우리가 push를 하면 그 뒤에 깃허브에서 자동으로 아래의 코드를 실행시켜 주는 것이다.

name : Upload binary to S3 bucket이 부분이 S3저장소에 업로드 하는 부분이다.

--include 'templates/index.html' 이 부분이, 우리의 로컬 저장소의 templates/index.html을 그대로 S3저장소의 templates/index.html에 저장한다. 기존 것이 있으면 덮어쓴다. 그리고 아래의 name : Invalidate ~~는 수정한 내용을 cloudfront에서 뭐 해준다는데 그건 잘 모르겠다.. PATH 옵션도 있었는데 뭔지 몰라서 심지어 그냥 지우고 썼는데 잘 바뀐다...?

name: my-front.
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      AWS_REGION: 'ap-northeast-2'

    steps:
      - name: Checkout source code.
        uses: actions/checkout@master

      - name: Upload binary to S3 bucket
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --exclude '*' --include 'templates/index.html'
        env:
          AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}

      - name: Invalidate cache CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION_ID }}
        continue-on-error: true