Next.js) Next.js SST 이용하여 AWS에 배포하기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

 

 

이전 아티클에서 @sls-next/serverless-component 로 Next.js를 배포하려했다가 버전 호환이 안되어 실패했었던 경험을 기록했었다.

그렇다면 Next.js를 AWS에 배포하려면 어떻게 해야할까?

 

SST를 이용하여 쉽게 배포할 수 있었다.

(이전 아티클 https://chanychu.tistory.com/528)

 

---

SST

• Next.js Svelte, Remix, Astro, Solid와 같은 프레임워크를 쉽게 배포할 수 있도록 도와줌

 

사용되는 AWS 서비스

• S3
  • 클라이언트 자산 위치
• Cloudfront
  • 빠른 컨텐츠 전송을 위해 사용
• Lambda
  • app server와 api 기능 배포
  • edge 플래그 활성화 시, Lambda@Edge에 배포

 

참고 사이트

* https://velog.io/@becoding96/Next.js-13-%EB%B2%84%EC%A0%84-Serverless-%EB%B0%B0%ED%8F%AC-SST-Route-53
* https://www.freecodecamp.org/news/how-to-deploy-a-next-js-app-with-custom-domain-on-aws-using-sst
* https://morioh.com/a/3ec8c7c4f5b4/deploy-your-nextjs-app-on-aws-with-custom-domain-and-sst

 

1. 배포 환경 만들기

✅ Node.js 18 이상

✅ npm 7 이상

 

2. AWS admin 계정 액세스 키 생성하기

• IAM → 사용자 → 보안 자격 증명 → 액세스 키 만들기

 

 3. AWS 자격 증명 설정

Profile 추가하기

$ aws configure --profile 프로필명

AWS Access Key ID: 발급 받은 AccessKey ID
AWS Secret Access Key: 발급 받은 AccessKey

• region, output format은 입력하지 않으면 default 값으로 설정

 

Profile 생성 확인하기

$ cd ~/.aws
$ ls
$ vim credentials

• 설정한 프로필명으로 자격 증명이 잘 생성되었는지 확인한다.

여기까지는 dev와 prod 버전의 AWS 배포환경을 달리하기 위해 설정한 것으로, 건너뛰어도 된다.

 

4. SST 설치하기

$ yarn create sst

• 이미 생성된 Next.js 프로젝트가 있는 경우, drop-in 모드로 세팅할거냐는 메세지가 뜨는데 y를 눌러서 넘어가주면 된다.
  • drop-in 모드 → 기존 Next.js 프로젝트에 배포만 하고 싶은 경우를 의미
• set-end.d.ts, sst.config.ts 파일 자동 생성

 

5. SST 파일 설정하기

sst.config.ts

import { NextjsSite } from "sst/constructs";

export default {
    config(_input) {
        return {
            name: "sample",
            region: "ap-northeast-2",
        };
    },
    stacks(app) {
        app.stack(function Site({ stack }) {
            const site = new NextjsSite(stack, "site", {
                typesPath: "./src/types",
                customDomain: "sample.dev",
            });

            stack.addOutputs({
                SiteUrl: site.customDomainUrl || site.url,
            });
        });
    },
} satisfies SSTConfig;

 

6. 실행

$ yarn dev

• Please enter a name you’d like to use for your personal stage. Or hit enter to use …: dev로 설정
• sst를 설치하면 package.json에 dev 명령어가 "sst bind next dev"로 바뀌어있는 것을 확인 했을거다.
• 로컬 개발 환경을 시작한 적이 없다면 한 번은 실행해줘야 한다.
  • 필요한 리소스가 자동으로 클라우드에 배포되기 때문에 실행 후 배포해야 한다. (부트스트래핑)
  • AWS profile를 설정했으므로, yarn dev 명령어를 "sst bind next dev --profile=설정한 프로필명"으로 변경 후 사용하면 해당 AWS 계정에 부트스트래핑이 진행될 것이다.

7. 배포

$ yarn deploy

• 기본적으로 앱을 먼저 빌드한 후 배포하므로 yarn build는 별도로 실행하지 않았다.
• customDomain을 설정했을 때, 배포 시 빌드를 두 번하는 경우
  • 이는 사용자 지정 도메인에 대한 Route53 호스팅 영역 데이터를 조회하여 cdk.context.json에 저장하게 되는데,
    → 만일 해당 파일이 존재하지 않으면 파일 생성 후 재빌드
    → 따라서 매번 배포 시 빌드를 두 번 진행하지 않으려면, cdk.context.json 파일을 git에 커밋해줘야 한다.