S3 만으로 배포하기

3 minute read

2024-08-20

필요한 env

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
NEXT_PUBLIC_NAVER_MAP_CLIENT_ID=

위처럼 클라이언트에서 접근하는 환경 변수는 접두사로 NEXT_PUBLIC 를 붙여줘야 한다.

deploy.yml

on:
  push:
    branches: [main]
 
env:
  AWS_REGION: ap-northeast-2
  S3_BUCKET_NAME: s3-bucket-name   # TODO: 교체
 
permissions:
  contents: read
 
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Setup PNPM
        uses: pnpm/action-setup@v4
        with:
          version: 9
          run_install: true
 
      - name: Build
        env:
          NEXT_PUBLIC_NAVER_MAP_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_NAVER_MAP_CLIENT_ID }}
        run: 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: ${{ env.AWS_REGION }}
 
      - name: Upload to AWS S3
        run: |
          aws s3 sync out/ s3://${{ env.S3_BUCKET_NAME }}/
          # out 하위 내용물 모두를 버킷 최상단에 옮기기

s3 만들기

s3 생성하고 접근하기 위해서는 권한 과 퍼블릭 액세스를 풀어줘야한다. 그 다음 정적 웹사이트 호스팅을 진행하면 접근 가능해진다.

버킷 정책은 아래와 같이 지정해준다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::__버킷명__/*"
        }
    ]
}

정적 웹사이트 호스팅은 속성 탭 맨 아래에서 변경 가능하다.