AWS 인프라를 이용한 페이지 CI/CD 구축

 

github action -> s3

https://velog.io/@1nthek/GitHub-Action%EC%9C%BC%EB%A1%9C-AWS-S3%EC%97%90-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94

GitHub Action으로 AWS S3에 배포 자동화

 

https://weekwith.tistory.com/entry/Nextjs-AWS-S3%EB%A5%BC-%ED%86%B5%ED%95%9C-%EC%A0%95%EC%A0%81-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-GitHub-Actions%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%90%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%86%AB-CICD?fbclid=IwAR1PixbNRq78OZslbltE6AeMo3YwNSmvzUmb8W7TZPv7O6qAMeIdIykrto0 

[ Next.js ] AWS S3를 통한 정적 웹 사이트 배포 및 GitHub Actions를 통한 CI/CD

정적 사이트 호스팅

create-next-app 을 사용해 next 프로젝트를 생성합니다. 그 후, s3버킷에 호스팅합니다.

 

1.  S3 버킷 생성 및 정적 웹 사이트 호스팅 설정

- IAM 권한을 부여 후, 권한을 받은 사용자로 로그인하여 S3 버킷을 생성합니다.

- 생성한 버킷의 속성 탭에서 정적 웹 사이트 호스팅을 활성화 합니다.

- 

- 퍼블릭 액세스 차단을 풀고, 정책을 설정해 줍니다. s3:GetObject 권한을 허용하는 정책입니다. 정책 생성기로 생성했을 경우, 리소스 뒤에 /*를 붙여주어야 합니다. 그래야 이 버킷의 모든 객체에 해당 정책이 적용됩니다.

 

 

2. next 프로젝트 build && export 후 S3 업로드

- next export 명령어는 next 프로젝트를 정적 사이트로 export 해 줍니다(out 폴더).

- 정적 사이트로 export 시 Image optimization 과 같은 일부 기능은 제공되지 않습니다. 따라서 next/Image 를 사용했을 경우 에러가 발생할 수 있습니다. 콘솔에 몇 가지 해결책을 제시하니 그 중 하나를 선택해서 진행하시면 됩니다. 저는 일단 인프라 구축이 목표이므로, creat next app 의 메인페이지에 들어있는 Image 태그를 그냥 지워버리고 진행했습니다.

- https://nextjs.org/docs/advanced-features/static-html-export 

Advanced Features: Static HTML Export | Next.js

- out 폴더를 S3 버킷에 업로드 해 줍니다.

- 성공적으로 정적 사이트가 호스팅 된 것을 확인하실 수 있습니다.

github action 설정

다른 브랜치에서 main 브랜치로 merge 시 S3에 자동으로 파일을 배포하는 기능을 설정합니다.

 

1. workflow yml 작성

프로젝트 루트에 .github/workflows 폴더를 생성한 후, yml 파일을 생성합니다. github action은 이 yml 파일에 명시된 명령을 수행합니다.

# .github/workflows/deploy-work.yml
name: deploy

# releases 브랜치에 push 이벤트 발생 시 트리거
on:
  push:
    branches:
      - production

# 이벤트 트리거시 수행할 작업
jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      # https://github.com/actions/checkout
      # This action checks-out your repository under $GITHUB_WORKSPACE, so your workflow can access it.
      - name: Checkout branch
        uses: actions/checkout@v2
        with:
          repository: amuse1991/learn_FP
          ref: production
      # This action allows caching dependencies and build outputs to improve workflow execution time.
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install Dependencies
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: aws s3 cp --region ap-northeast-2 --recursive ./out s3://learnfp/

마지막 deploy 작업을 모시면 aws s3 cp 명령어를 이용해 ./out 폴터의 내용을 s3://버킷이름/ 으로 업로드 하는 것을 볼 수 있습니다.

AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY는 레포지토리의 setting에 들어가셔서 Actions에 저장하시면 yml 파일에서 secrets 로 접근할 수 있습니다. (절대 yml 파일에 직접 쓰시면 안됩니다.)



action이 정상적으로 수행되면 정적 페이지가 업데이트 된 것을 확인하실 수 있습니다.