[Next.js] 13 버전 Serverless 배포 (SST, Route 53)

베코딩·2023년 9월 12일

SST와 Amazon Route53을 이용한 Next.js 13 버전의 Serverless 배포 과정을 담았습니다.
(Window 기준)

Serverless

Serverless 배포는 애플리케이션을 실행하기 위해 서버 인프라를 직접 관리하지 않고, 클라우드 서비스 제공 업체가 자동으로 인프라를 관리하는 컴퓨팅 모델. 애플리케이션 코드가 실행될 때만 리소스가 할당되며, 비활성 상태에서는 비용이 발생하지 않는다.

SST

https://sst.dev/
AWS에서 Serverless 풀스택 애플리케이션을 복잡한 설정 없이, 쉽게 구축할 수 있도록 도와주는 프레임워크. Serverless Next.js, Svelte 등의 앱을 AWS 계정에 배포할 수 있다.

Amazon Route 53

Amazon Route 53은 도메인 이름을 관리하고, DNS 쿼리에 대한 응답을 제공하는 클라우드 기반의 도메인 이름 시스템 서비스이다. 이 서비스를 사용하여 도메인 이름을 등록하고 관리하며, 애플리케이션 및 웹 서비스의 DNS 라우팅을 구성하고 모니터링할 수 있다.

📌 배포 과정

준비물

AWS 계정
Node.js 16.6 ↑
npm 7 ↑
Python 2.65 ↑ 또는 3.3 ↑

1. AWS - I AM 사용자 생성

AWS에 회원가입 후 I AM을 검색한다.

메뉴의 사용자를 누르고 사용자 생성을 클릭한다.

AWS Management Console에 대한 사용자 액세스 권한 제공: 체크 불필요
권한 옵션 - 직접 정책 연결 - AdministratorAccess 체크

생성한 사용자를 클릭하고 보안 자격 증명에 들어간다.

액세스 키 생성 → 기타 → 설명 태그 설정 불필요 → 생성

이후 액세스 키와 액세스 비밀 키를 따로 저장해둔다.

2. AWS 자격 증명 설정

pip를 통해 awscli를 설치한다.

$ pip install awscli

AWS 자격 증명 설정

$ aws configure

이후 안내에 따라 입력한다.

액세스 키, 액세스 비밀 키 입력
Default region name: AWS 리소스에 접근할 지역 설정 (서울은 ap-northeast-2 입력), 미입력 시 Default 값
Default output format: AWS CLI 명령 실행 시 출력 형식, 미입력 시 Default 값

3. SST 설치

배포할 프로젝트 루트 폴더에서 다음 명령어를 입력한다.

# npm
$ npx create-sst@latest

# yarn
$ yarn create sst

설치 후 npm install이나 yarn 실행

4. Aamzon Route 53 구매 (선택)

https://aws.amazon.com/ko/route53/

위 링크에서 도메인을 구매한다. 결제 후 이메일 인증을 꼭 거쳐야 한다.

5. sst.config.ts 세팅

import { SSTConfig } from "sst";
import { Bucket, NextjsSite } from "sst/constructs";

export default {
  config(_input) {
    return {
      name: "프로젝트 이름",
      region: "ap-northeast-2" // 서울,
    };
  },
  stacks(app) {
    app.stack(function Site({ stack }) {
      const site = new NextjsSite(stack, "site", {
        edge: true,
        customDomain: "www.example.com" // 구매한 경우 도메인 주소,
      });

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

edge: true로 설정 시 "middleware," "SSR functions," "API routes"이 "edge"로 배포되어 사용자에게 물리적으로 더 가까운 위치에서 실행된다.

자세한 세팅법은 아래 링크 참조
https://docs.sst.dev/start/nextjs
https://docs.sst.dev/constructs/NextjsSite

6. 부트스트랩 리소스 생성

npx sst dev, yarn sst dev: SST의 로컬 개발 환경을 시작하는 명령. 부트스트랩 리소스를 생성해주기 때문에 한 번은 실행시켜야 한다. AWS 리소스에 원격으로 호출되는 동안 로컬에서 Lambda 함수를 디버그하고 테스트할 수 있게 해준다.

Lambda 함수: AWS Lambda는 코드를 실행하는 서비스로, 클라우드 환경에서 실행되는 Serverless 함수. 이 함수는 AWS 서버에서 실행되며 일반적으로 웹 애플리케이션의 백엔드 로직을 처리하는 데 사용된다.

npm run dev, yarn run dev or yarn dev: 일반적인 로컬 실행

7. 배포

# npm
npx sst deploy --stage prod

# yarn
yarn sst deploy --stage prod

베코딩

이전 포스트