📸 [s3 cloudFront github action] 배포 자동화 매뉴얼 📸

배포 방법

• 배포 방법
  • 배포 방법은 workflow파일의 트리거 부분을 먼저 확인한다.
  • on: push: branches: - deploy
  • 트리거 방법에 맞춰서 깃 허브 이벤트를 주면 된다
  • 지금과 같은 경우는 push branches : deploy 로 되어 있으니 deploy에 Push가 되면 자동으로 github Action 으로 들어가 workFlow가 작동된다.

배포 확인

• 배포 확인
  • github Action 페이지로 가면 지금까지 해온 workFlow를 볼 수 있다.
  • 또한 각 workFlow로 들어가면 프로세스로 배포가 되었는지를 확인할 수 있다

배포 자동화

• 배포 자동화

  • 배포 자동화 할 레포지토리의 최상위 폴더에 .github/workflows 폴더를 만들기

  • workflows폴더 안에 main-deploy.yml 파일을 만든다

  • 배포 자동화 할 코드를 구성한다

    name: Deploy to 42ggClientS3
    
    on:
      push:
        branches:
          - deploy
    jobs:
      continuous-deployment:
        runs-on: macos-12
        steps:
          - name: Git Checkout
            uses: actions/checkout@v2
    
          - name: Use Node.js version 16.x
            uses: actions/setup-node@v1
            with:
              node-version: 16.x
    
          - name: Build
            env:
              NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
              NEXT_PUBLIC_GOOGLE_ANALYTICS: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS }}
              GENERATE_SOURCEMAP: ${{ secrets.GENERATE_SOURCEMAP }}
            run: |
              npm install
              npm run build
          - name: Configure AWS credentials
            uses: aws-actions/configure-aws-credentials@v1
            with:
              aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
              aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
              aws-region: ${{ secrets.AWS_BUCKET_REGION }}
    
          - name: Deploy to S3
            run: aws s3 sync ./${{ secrets.BUILD_DIRECTORY }} ${{ secrets.AWS_BUCKET_NAME }} --acl public-read --delete
    
          - name: CloudFront Invalidate Cache
            run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths '/*'

    • 현재 배포 자동화 코드는 다음 과 같다.

      on:
        push:
          branches:
            - deploy

      • workFlow 실행 트리거를 deploy 브랜치에 push가 되면 실행하게 구성

      jobs:
        continuous-deployment:
          runs-on: macos-12
          steps:
            - name: Git Checkout
              uses: actions/checkout@v2
      
            - name: Use Node.js version 16.x
              uses: actions/setup-node@v1
              with:
                node-version: 16.x
      
            - name: Build
              env:
                NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
                NEXT_PUBLIC_GOOGLE_ANALYTICS: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS }}
                GENERATE_SOURCEMAP: ${{ secrets.GENERATE_SOURCEMAP }}
              run: |
                npm install
                npm run build
            - name: Configure AWS credentials
              uses: aws-actions/configure-aws-credentials@v1
              with:
                aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
                aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
                aws-region: ${{ secrets.AWS_BUCKET_REGION }}
      
            - name: Deploy to S3
              run: aws s3 sync ./${{ secrets.BUILD_DIRECTORY }} ${{ secrets.AWS_BUCKET_NAME }} --acl public-read --delete
      
            - name: CloudFront Invalidate Cache
              run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths '/*'

• runs-on : macos-12

  • workFlow를 실행 할 서버의 환경을 지정해준다
  • 다른 옵션으로 ubuntu-latest 같은 옵션이 있다

• name: Use Node.js version 16.x uses: actions/setup-node@v1 with: node-version: 16.x

  • 노드를 다운로드 받는다 node-version는 개발 환경에 맞춰서 변경하기

• name: Build env : … run: | npm install npm run build

  • env:
    • build를 할 때 필요한 env 파일 들을 세팅 해준다 github secret이라는 기능이 있는데 레포지토리 세팅에 들어가면 확인할 수 있다 레포 env파일이라고 생각하면 될 듯 합니다

• name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v1 with: …

  • aws 계정과 연결해줍니다
  • aws는 IAM에 있는 계정으로 s3버킷 같은 인스턴스들을 컨트롤 할 수 있다 그 계정과 연결하는 부분
  • 계정의 access key를 받아서 작성해주기

• name: Deploy to S3

  • run: aws s3 sync [배포 할 파일 폴더 위치] [aws 버킷 이름] --acl public-read --delete
    • aws s3 sync 명령어를 사용해서 파일을 배포
    • acl public-read : 배포된 파일을 모든 user가 읽을 수 있다
    • —delete : 배포된 파일 중 없는 파일이 있다면 지우기

• name: CloudFront Invalidate Cache

  • run: aws cloudfront create-invalidation --distribution-id AWS_CLOUDFRONT_DISTRIBUTION_ID --paths '/*'
    • cloudFront 객체 무효화 하기
      • 이렇게 해야 변화를 바로 인식해서 배포를 바로 적용 시킬 수 있다.

참고

• https://zzsza.github.io/development/2020/06/06/github-action/
• https://docs.github.com/en/actions/using-workflows/about-workflows