[Github] CloudFront + Github 연동으로, 도메인+https+자동재배포까지 해결하자!!

이번 파트는 깃헙을 통해 해당 배포를 자동화시키는 부분입니다. 도메인 붙이기와 클라우드 프론트 배포 자체는 앞 게시물을 참고해주세요!!!

깃허브의 원격 리포지토리에는 생각보다 많은 보조기능이 있습니다. 이슈, 풀리퀘스트, 디스커션, 액션, 위키, 시큐리티 등등이요. 우리가 오늘 사용할 부분은 액션 탭입니다.

대표적인 클라우드들과 연결할 수 있는 기능들이 있고 우리가 사용하려는 아마존의 템플릿도 있네요. 클릭해서 한번 들여다 볼까요?

이런 템플릿을 제공해 줍니다. on: 부분은 어떠한 액션을 했을 때 이 프로세스들이 작동할 것인지를, env는 AWS 사용자 정보 등 원하는 기능을 수행하기 위한 환경 셋팅을, jobs는 그 작업 내용을 말합니다. 이 정도만 아셔도 큰 무리는 없구요. 

좀 더 들여다 보면 actions에 사용되는 yml 파일의 구조를 들여다 볼 수 있습니다. name은 실제 깃 액션을 통한 배포를 할 때 각 단계의 명칭을 정합니다. 또 uses는 그 기능을 외부에서 잘 작성한 스크립트로 대신하려 할 때, 해당 스크립트의 리포지토리 위치를 말합니다. with:는 그 외부 스크립트에서 규정한 arguments들을 선언해주기 위해 사용합니다. 

또 id:로 특정 과정의 return 값을 변수에 담아서 ${{ steps.id로 정한 이름 }} 이런 식으로 뒤 단계에서 사용할 수 있게 됩니다. run: 태그는 uses와는 다르게 직접적으로 각 단계의 스크립트를 여기서 정해 주겠다는 뜻인데, | 파이프 기호를 쓰면 다음 줄부터 여러줄로 작성할 수 있고, 그렇지 않을 때는 한 줄만 쓸 수 있습니다.

그래서 uses 뒤에 있는 외부 스크립트는 깃허브에서 검색하면 그 문서를 들여다보고, 일부 파라미터를 추가로 더하거나 뺄 수도 있습니다. 이렇게 실제로 존재하는 퍼블릭 리포지토리만 uses의 값으로 들어갈 수 있습니다.

GitHub - aws-actions/configure-aws-credentials: Configure AWS credential environment variables for use in other GitHub Actions.

그리고 secrets라는 값은 우리 리포지토리의 settings에서 설정 가능한 비밀 환경변수라 생각하시면 됩니다. 보통 아이디나 비밀번호, 디비 주소 등을 담은 환경변수를 여기에 셋팅해놓고 이렇게 불러다 사용합니다.

여기서 이렇게 설정해주시면 되구요! 각 값은 다음과 같이 설정합니다.

우선 AWS에서 IAM에 사용자 추가를 해서, AmazonEC2FullAccess, AmazonS3FullAccess, CloudFrontFullAccess 이 세가지 권한을 허용한 사용자를 만들고 그 액세스 키와 비밀 키를 복사해둡니다.

• AWS_ACCESS_KEY_ID - IAM에서 CloudFrontsFullAccess를 허용한 액세스 키
• AWS_SECRET_ACCESS_KEY - IAM에서 CloudFrontsFullAccess를 허용한 비밀 액세스 키
• BUCKET_NAME - 현재 index.html이 보관되어 있는 S3 퍼블릭 버킷 이름 (전 글을 따라오셨다면 도메인)
• DISTRIBUTION - 현재 클라우드 프론트의 배포 이름 (E3HB9YDMTY6M4J 이런 형식)

그럼 스크립트를 짜보겠습니다. 주석은 실제로 들어가면 아니됩니다. 

name: myprojectf
on:
  push:
    branches:
      - release 저는 배포할 때 푸시할 브랜치를 따로 만들었는데 main이나 master로 정하셔도 됩니다.
jobs:
  build:
    runs-on: ubuntu-18.04 // 이렇게 버전을 지정해주실 수도 있고 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: Andrew's distribution  // 제가 직접 작성한 거라.. 여러분들의 상황에 맞게 변경해 주세요.
        run: |
          aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION }} --paths "/*"
          aws s3 sync templates s3://smallmeal.shop/templates --acl public-read
          aws s3 sync static s3://smallmeal.shop/static --acl public-read
          // 해당 버킷과 리포지토리를 동기화하고, 객체들을 모두 퍼블릭으로 설정

      - name: Upload binary to S3 bucket  여기 줘야 하는 argument는 jakejarvis/s3-sync-action 직접 들어가보세요
        uses: jakejarvis/s3-sync-action@master  // 위의 코드와 중복인 것 같기는 한데 강의자료에서 주신 내용
        with:
          args: --acl public-read --exclude '*' --include 'index.html' --include '/static/*' --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.BUCKET_NAME }}

      - name: Invalidate cache CloudFront  // 클라우드 프론트에 이미 배포된 index.html 파일을 무효화!
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION }}  // secrets에 배포ID를 입력합니다.
          PATHS: '/templates/index.html'  // templates에 넣지 않았다면 그냥 index.html로 해주세요.
        continue-on-error: true  // 이 외에도 넘길 수 있는 arguments는 chetan/invalidate-cloudfront-action 리포 확인!

스크립트를 내 리포지토리의 폴더 구조와 원하는 결과에 따라 편집해줍니다. 어려운 부분들은 uses의 리포지토리를 직접 방문해서 docs를 확인해보세요 되게 친절합니다 저분들

네 그럼 이제부터 푸시할 때마다 깃허브가 알아서 일할겁니다 일해라 깃허브!!

열심히 일합니다. 제 이름도 보이네요.

오류가 발생하면 바로 그 자리에서 알려주니까 첫 배포는 끝까지 지켜보세요!! 뭔가 잘못되면 왜 그렇게 됐는지 알아야 해요.

저는 이렇게 ElasticBeansTalk와 CloudFront를 각각 b와 f로 나눠뒀습니다. 저기 243개의 워크플로우 보이시나요...? 이 포스트는 저를 갈아 만든 포스팅입니다 x를 눌러 joy를 표하세요....

그럼 다음 포스팅은 ElasticBeansTalk로 올리겠습니다... 어우 힘드네요.