NextJs 정적페이지 배포 [S3 + IAM + Github Action][3]

BBAKJUN·2022년 1월 26일

TIL devops nextjs

Devops

목록 보기

3/3

S3을 설정해보자

내 포스팅을 보고있는 개발자분들이라면,,, AWS 계정 하나씩은 있을것이라고 생각해보고 회원가입 가이드는 사뿐히 무시하겠음

본인은 한번 연습해보고 한거기에 이미 버킷 및 설정이 다 되어있습니다.

버킷만들기를 눌러줍니다

버킷이름을 지어야하는데
본인은 bbakjun-github-action-tutorial로 했으나
버킷이름은 유니크해야하기에 각자 모두 달라야합니다.

그러고 바로 버킷만들기 버튼 눌러주세요

이 탭중 속성을 눌러주고 아래 로 내려오면

정적 웹사이트 호스팅이 있을텐데

정적 웹사이트 호스팅 -> 활성화
호스팅유형 -> 정적 웹사이트 호스팅
인덱스 문서 -> index.html
오류 문서 -> index.html

설정해줍시다

여기서 권한으로 들어가서

모든 퍼블릭 액세스 차단 을 해제해줍니다

그리고 버킷정책 Json파일을

{
    "Version": "2012-10-17",
    "Id": "Policy1546336529826",
    "Statement": [
        {
            "Sid": "Stmt1546336528005",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bbakjun-github-action-tutorial/*"
        }
    ]
}

라고 작성합니다

Statement 의 Resource는 눈치껏 본인 S3 버킷이름으로 바꾸기!

AWS CLI 권한 생성

터미널 CLI로 버킷에 접근권한을 부여하는 방법이다

IAM 서비스로 접근하자

사용자 추가 버튼을 눌러 추가해주며
사용자이름은 github-action-s3로 설정해주었다.

넘기면 기존 정책 직접 연결에서 AmazonS3FullAccess를 선택해주고 계속 넘겨주자

계속 넘기면 csv파일을 다운받아야하는데
이파일은 외부에 유출하지말자 하지말라면 하지말자

GitHub settings

깃헙 레포로 돌아와서 secretes탭을 열어주자

방금 받았던 csv파일을 열어보면 두개의 키값이 보일텐데 new repository secret 버튼을 눌러서 설정해준다

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
이 두개의 이름을 맞춰주자

workflow 재설정

워크플로우 파일에서 달라진점이 있다

- name: Deploy # S3에 배포하기
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            out s3://bbakjun-github-action-tutorial

Deploy Step이 추가되었다는것인데

방금 깃헙 secrets에 키를 넣어준값이 저기에서 들어가는것이다

맨아래 out s3://본인S3버킷이름으로 넣으면 된다!