[AWS] github action + S3로 NextJS 정적배포 자동화 시도

프론트엔드 서버를 사용하던 환경에서 팀 내부적으로 굳이 프론트 서버 기능이 없다고 판단해 정적 배포로 전환하였습니다.

이전까지의 CI/CD 플로우는 젠킨스를 활용해 특정 액션에 훅을 걸어 자동 배포되는 구조였습니다. 이전에 쓰던 젠킨스 프론트엔드 파이프라인을 다시 설정해서 써야하는 상황이었는데..

프론트엔드 깃허브 레포를 정리하는 김에 깃허브 액션을 써볼까 해서 시도를 해봤습니다.

깃허브 내부에서 해결할 수 있다면 젠킨스 비용을 절약할 수도 있겠다~ 했구요.

S3, CloudFront등 AWS 기본 셋업이 되어 있다고 가정합니다.

1. 깃허브 액션용 IAM 계정 설정

원하는 이름으로 새 IAM 사용자를 생성합니다.

위 두 개의 권한만 필요합니다.

생성이 완료된 IAM 계정의 액세스 키를 발급받아 저장해놓습니다. (발급했을 때만 보여주니 잘 저장해놓으세요!)

2. 깃허브 secret 설정

레포지토리의 Settings에서 Secrets and variables 탭의 Actions로 이동합니다. Secrets의 Repository secrets를 설정합니다. 각 시크릿 키에 대해 하나하나 생성해주셔야 합니다!

아래 yaml 파일을 기준으로 위 4개만 필요합니다.

3. yaml 파일 작성

레포지토리 내부의 .github 폴더에 workflows 폴더를 생성하고, 그 안에 깃허브 액션에 쓰일 yaml 파일을 생성합니다. 파일의 이름은 상관 없습니다. 저는 front-cicd.yaml로 생성했습니다.

# 이름은 상관 없습니다.
name: Front Deployment

on:
  # 트리거로 지정할 액션을 정합니다.
  push:
    # 타겟 브랜치를 정합니다.
    branches:
      - master

jobs:
  build:
    name: next build and deploy
    # runner가 실행될 환경을 지정합니다.
    runs-on: ubuntu-latest

    # name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다.
    # uses 키워드로 Action을 불러올 수 있습니다.
    steps:
      # 레포지토리에 접근하여 CI서버로 코드를 내려받는 과정입니다.
      - name: checkout Github Action
        uses: actions/checkout@v3

      # workflow가 실행될 때 필요한 파일 중에서 거의 바뀌지 않는 파일들을 GitHub의 캐시에 올려놓고 CI 서버로 내려받습니다.
      # 프로젝트에서 자주 바뀌지 않는 수많은 패키지를 매번 다운받아 올리면 시간도 오래걸리고 네트워크 대역폭을 많이 사용하게됩니다.
      - name: Get npm cache directory
        id: npm-cache-dir
        run: |
          echo "::set-output name=dir::$(npm config get cache)"
      - uses: actions/cache@v3
        id: npm-cache
        with:
          path: ${{ steps.npm-cache-dir.outputs.dir }}
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # npm 패키지들을 설치합니다.
      - name: install npm dependencies
        run: npm install

      # Next.js 애플리케이션을 빌드합니다.
      - name: Build Next.js application
        run: npm run build

      # aws에 접근하기 위한 권한을 받아옵니다.
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_ACCESS_KEY_ID }}
          aws-region: ap-northeast-2

      # S3에 build 파일을 올립니다.
      - name: Upload to S3
        env:
          BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}}
        run: |
          aws s3 sync \
            ./out s3://$BUCKET_NAME \
            --delete

      # cloudfront로 배포되는 파일은 기본설정 상 24시간동안 캐시가 유지됩니다.
      # 배포 후 S3에는 최신 정적리소스가 올라가있지만 엣지로케이션엔 이전 파일이 올라가있는 상태라는 의미입니다.
      # 바로 변화가 반영되길 바란다면 invalidation을 해주면 됩니다.
      - name: CloudFront Invalidation
        env:
          CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}}
        run: |
          aws cloudfront create-invalidation \
            --distribution-id $CLOUD_FRONT_ID --paths "/*"

---

이제 지정한 브랜치에 액션을 일으켜 테스트를 해봅시다. 실제로 워크플로우가 잘 돌아갔는지는 레포지토리의 Actions 탭에서 확인이 가능합니다.

????

왜 실패했을까요? 개인이 소유한 레포지토리였다면 문제가 없었을 겁니다. 발생한 에러는 권한 문제입니다.

외전: 조직이 소유한 레포지토리의 깃허브 액션 권한 문제

위 yaml 스크립트에서 actions/checkout@v3, actions/cache@v3, aws-actions/configure-aws-credentials@v1을 사용했습니다. 이들은 외부 워크플로우입니다. 조직이 소유한 레포지토리에서는 조직이 소유한 워크플로우만을 사용할 수 있습니다. 그렇다면 액션 권한을 수정해서 해결해볼까요?

조직 레포지토리에서는 외부 워크플로우 허용이 불가능합니다.

저는 이 지점에서 그냥 젠킨스 파이프라인을 새로 구축해서 사용하기로 마음먹었습니다. 프론트 CICD 깃허브 액션으로 하고싶어서 굳이 조직 레포지토리를 늘리고 싶진 않았습니다. 허허

깃허브 액션을 사용하실거라면 조직 레포지토리로 외부 워크플로우를 푸쉬해서 사용하시면 됩니다.

참고한 글들

https://www.reddit.com/r/github/comments/19dgen9/actions_are_not_allowed/

Actions in this workflow must be: within a repository owned by · community · Discussion #26609

Forking actions/checkout@v2 at organization level to be used repo's github actions