블로그 배포 삽질기 (AWS S3 + CloudFront, Vercel)

블로그는 오래오래 유지할 예정이기에 비용이 적게 들도록 배포하고 싶어 S3 + CloudFront 정적배포를 시도했다가 완전 실패하고 Vercel로 돌아간 이야기.. 배포 자체는 성공적이였기에 도움이 될까 싶어 남겨둔다. (혹시 제가 해결하지 못한 에러를 해결하신 분이 있다면 꼭 댓글로 남겨주세요!!!)

S3 + CloudFront를 쓰려했던 이유

현재 블로그는 SSG 페이지들로 구성 되어있습니다. 정적 포스트를 보여줄 블로그에서 SSR 기능을 쓸 필요가 없죠. 그렇기에 프리티어 라는 메리트가 있는 S3 + CloudFront로 배포하고 싶었습니다. 물론 버셀을 이용할때 주어지는 편리함의 메리트도 크긴합니다!

Vercel 요금이 만만치 않다는 말을 많이 들었거든요. 오래오래 부담없이 이어가고 싶기에 저에게는 괜찮은 선택이라고 생각했습니다.

도메인 구매 및 등록

저는 가비아에서 도메인을 구매했습니다. AWS Route53쪽에서 구매가 가능하지만 이또한 가비아에서 구매하는게 더 저렴했어요!

• AWS를 통해 구매 시 보통 16달러쯤 하더라구요 첫구매 시 할인이 되기도 하고 사실 1년에 한번만 결제하면 되는 부분이기에 부담은 없지만 가비아를 이용해보고싶어 구매했습니다! 구매는 그냥 하면 되기에 건너가겠습니다. (링크)

• 도매인 구매를 완료했으면 AWS Route53에서 호스팅영역을 생성해줍니다. 생성 후 레코드를 살펴보면 네임서버가 생성이 되어있습니다.

• 이 네임서버를 가비아 내가 구매한 도메인 관리탭에서 네임서버에 전부 등록해주세요. 이때 주소 마지막에 붙은 .은 제거하셔야됩니다!
• 이러면 도메인 준비는 끝! 다음은 S3버킷을 생성해보겠습니다.

SSL 인증서 발급 (HTTPS)

• ACM(AWS Certificate Manager) 에서 간단하게 SSL 인증서를 발급받을 수 있으니 발급받아줍니다! 도메인은 두개를 넣어줬습니다. (서브도메인 고려)
• 등록하고나면 Route 53에서 레코드 생성 버튼을 눌러 레코드까지 생성해주세요.

AWS S3(Simple Storage Service)

S3는 이미지 같은 파일이나 데이터를 저장하는 용도로도 많이 사용하며, 정적인 웹 호스팅도 가능합니다.
저는 이 S3에 데이터를 저장하고 CloudFront를 통해 AWS 리전을 통한 CDN도 이용할 예정이기에 먼저 파일 저장부터 해두겠습니다!

• 웹 정적 배포용으로 사용할 S3니까 퍼블릭 엑세스를 해제해줬습니다. 나머지는 기본설정으로 생성!

AWS CloudFront

• CDN 서비스 이용과 대체도메인 등록을 위한 CloudFront도 생성해줍니다.

• WAF는 사용하지 않았습니다.

• 구매한 도메인으로 대체도메인 등록해주시고 아까 만든 SSL인증서도 등록해주세요. 단 저처럼 www. 같은 서브도메인을 붙인 주소를 메인으로 사용할 예정이시라면 S3, CloudFront도 하나씩 더 생성해야해요 (리다이렉트 시키기 위함)

• 마지막 설정으로 오류 페이지에 대한 응답을 설정한 후 클라우드 프론트용 레코드를 등록해주면 완료입니다.
• 만약 index.html을 인식하지 못한다면 만들어둔 CloudFront 설정 편집으로 들어가 Default root object를 index.html로 설정해주세요.

문제 발견

여기까지 완료했다면 첫 페이지 입장 시에는 문제가 없지만 새로고침 또는 URL PATH 마지막에 / 를 붙인다면 이런 에러를 마주하게 되는데요..
Next.js에서 제공하는 Static Exports 에서 제공하는 trailingSlash, skipTrailingSlashRedirect 옵션을 모두 테스트 해봤지만 여전히 라우팅단계에서의 문제가 발생하더라구요.. 특히 리다이렉팅 되는 비어있는 페이지가 있다면 더욱 문제가 되는거 같았습니다.
Routing쪽에 문제가 있다는건 이해했지만 공식 깃허브 이슈탭부터 GPT, 구글 서칭 모두 동원해봤지만 해당 이슈를 해결하지는 못했어요😂

• 아쉽지만 제 분야는 클라우드가 아닌 프론트기에,, 주말을 하얗게 불태우며 Vercel 배포로 변경하여 등록해두었습니다.
• Vercel 도메인 등록하는건 구글에 널려있기에 굳이 작성하지 않겠습니다! 필요하신분은 댓글에 남겨주시면 레퍼런스를 찾아드리거나 작성해드릴게요 :)

I AM 계정으로 GitHub Action 배포 자동화 (보너스)

• AWS I AM 계정을 생성하면 Public Key와 Secret Key를 받게되는데요 이 두가지 키를 Github에 Secret에 등록해줘야 합니다.
• AWS_DISTRIBUTION_ID는 생성한 CloudFront를 들어가면 좌측 상단에 나오는 ID입니다.

name: AWS CI CD
 
on:
  push:
    branches:
      - main
 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    env:
      AWS_ACCESS_KEY: '${{secrets.AWS_ACCESS_KEY}}'
      AWS_SECRET_KEY: '${{secrets.AWS_SECRET_KEY}}'
      BUCKET: 'blog-ycow'
      DIST: 'out'
      REGION: 'ap-northeast-2'
 
    steps:
      - name: git clone
        uses: actions/checkout@v4
 
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{secrets.AWS_ACCESS_KEY}} 
          aws-secret-access-key: ${{secrets.AWS_SECRET_KEY}}
          aws-region: ${{env.REGION}}
 
      - name: install node
        uses: actions/setup-node@v4
        with:
          node-version: 'latest'
   
      - name: Install dependencies
        run: yarn install
   
      - name: yarn build
        run: yarn build
   
      - name: Copy to S3
        run:
          aws s3 sync --delete ${{env.DIST}} s3://${{env.BUCKET}}
 
      - name: Invalidate CloudFront
        run: aws cloudfront create-invalidation --distribution-id ${{secrets.AWS_DISTRIBUTION_ID}} --paths "/*"

해당 코드를 복사해 env 내용만 본인 이름에 맞도록 변경해서 루트폴더 기준 .github > workflows > main.yml 파일로 넣어주면 잘 작동할겁니다 :)

이걸 만들면서 이미지를 찍어놨어야하는데 집중해서 막 시도하다가 삭제한것들이 많은데 돌아가서 다시 찾으려 하니 곤욕이네요ㅎㅎ,,
오랜만에 글을 쓰려니 뒤죽박죽인거 같네요,, 다음에 또 다른 서비스를 배포하게 된다면 작업별로 쪼개서 올려보겠습니다!