Open Next SST 3 업데이트 대응하기

작성일 : 2024. 10. 07

Open Next 는 Vercel 을 사용하지 않고 Next.js 를 서버리스로 배포할 때 가장 좋은 대안입니다.

Open Next 는 SST 를 기반으로 하고 있는데, 최근 SST 가 2에서 3으로 메이저 업데이트가 있었습니다. 업데이트에 대한 자세한 내용은 [링크]SST 블로그에서 확인하실 수 있습니다. 이 포스트에서는 주요 업데이트에 대한 이야기를 나눠보려고 합니다.

속도 향상

기존 v2 에서는 Cloud Formation 을 이용하고 있었는데, 스택이나 리소스 제한 같은 문제를 차지하고라도 속도에 대한 문제가 있었습니다. 최초 배포시 시간이 걸리는 건 어쩔 수 없다고 해도 업데이트를 할 때 마다 최소 4~5분씩 걸리기 때문에, 긴급 업데이트를 한다든가 하는 상황에서는 마음이 초조해지는 일이 생기곤 했죠.

v3 에서는 Cloud Formation 이 더 이상 사용되지 않습니다. 테스트 해보니 Next.js 배포는 최대 20~30초 정도로 빨라졌습니다. 실제 배포는 GitHub Actions 등으로 배포되는 걸 고려해도 간단한 배포는 1~2분 이내에 가능할 것으로 보입니다.

Cloudflare 지원

기존에 사용하던 Cloud Formation 과 CDK 는 모두 AWS 에서 제공하는 기술이라 배포 가능한 클라우드가 AWS 하나 뿐이었습니다. v3 에서는 Cloud Formation 대신 Terraform 을 사용하면서 플랫폼 제약이 사라졌습니다. SST 에서는 150개 이상의 서비스를 지원하고, Open Next 는 AWS 외에 Cloudflare 를 추가로 지원하기 시작했습니다.

다만 Cloudflare 는 아직 Next.js 의 전체 기능을 지원하지는 않습니다. [링크]Open Next Cloudflare Supported Next.js features 서버 컴포넌트 같은 최신 기능부터 우선적으로 지원되고 있어 활용하기 좋을 것 같습니다. 이미지 최적화나 미들웨어 같은 부분들은 빨리 업데이트 되면 좋겠네요.

v2 지원

v2에 대한 지원은 계속 이어질거라고 합니다. [링크] v2 마이그레이션 가이드 다만 새로운 기능 추가 등은 없을 거라고 하네요.

실습

실제 Next.js 프로젝트를 생성하고 배포까지 해보도록 하겠습니다.

준비사항

Node.js LTS (현재 20)
AWS CLI

Next.js 생성

npx create-next-app@latest

Open Next 설정

생성된 Next.js 프로젝트 내에서 Open Next 설정 파일을 생성합니다.

npx sst@latest init
# 패키지 설치는 자동으로 되지 않으므로 직접 수행해줘야 합니다.
npm install

sst.config.ts 설정

간단한 테스트를 하기 위해서는 기본 설정으로도 충분하지만, 앱 이름 정도는 변경해 주는 것이 좋습니다.

export default $config({
app(input) {
  return {
    name: "project-name", // 앱 이름을 지정합니다. 보통 package.json 을 참조해 기본으로 들어가 있습니다
    removal: input?.stage === "production" ? "retain" : "remove",
    home: "aws",
  };
},
async run() {
  new sst.aws.Nextjs("project-name"); // MyWeb 이라는 이름으로 되어 있으므로 변경해줍니다.
});

배포

npx sst deploy
# stage 를 지정할 수 있습니다.
# production, dev 두가지가 기본으로 사용되지만 커스텀 스테이지를 지정할 수 있습니다.
npx sst deploy --stage production

도메인 설정

기본 배포는 cloudfront 주소로 배포가 생성되기 때문에, 직접 도메인을 설정하려면 추가 설정이 필요합니다.

도메인 자체를 AWS 에서 신규로 구매하고 아무 설정도 안된 상태라면 모든 설정을 SST 에 위임할 수 있습니다.

async run() {
  new sst.aws.Nextjs("project-name", {
    domain: {
      name: "domain.com",
    },
  });
};

이미 Route53, CertificateManager 등을 설정해서 사용중이라면 위와 같이 설정해서는 오류가 납니다. 이 경우엔 Route53 의 Zone 과 CM 의 인증서 arn 을 직접 복사해서 넣어줘야 합니다.

async run() {
  new sst.aws.Nextjs("project-name", {
    domain: {
      name: "domain.com",
      dns: sst.aws.dns({
        zone: "ZONE_ID",
      }),
      cert: "arn:aws:acm:us-east-1:arn-id-here",
    },
  });
};

Route53 대신 다른 네임서버를 사용하고 있다면 dns 를 false 로 설정합니다. CloudFront 가 CM 의 인증서를 사용하므로 CM에 SSL 인증서는 등록 해야 합니다.

async run() {
  new sst.aws.Nextjs("project-name", {
    domain: {
      name: "domain.com",
      dns: false,
      cert: "arn:aws:acm:us-east-1:arn-id-here",
    },
  });
};

마무리

SST 3 이 도입되면서 Open Next의 배포 속도가 Vercel에 거의 근접하게 빨라졌습니다. AWS 인프라를 이용중이신 분이라면 한번쯤 사용을 고려해보시는 것도 좋을 것 같습니다.

이 블로그는 댓글 기능이 없습니다.
이 게시물에 대한 의견이 있으시면 i.am@naram.kim 으로 메일을 남겨주세요.