[CloudFront, Lambda@Edge] Next를 serverless하게 배포하기

NextJS Serverless Component

기존의 방식 (9.0 이전)

기존에는 Next를 구동하려면 AEC2같은 항상 실행중인 서버가 필요했습니다. 어떻게 하면 서버리스하게 만들 수 있을까? 라는 생각에서 serverless-nextjs-plugin같은 패키지들이 만들어지기도 했죠.

---

하지만 플러그인을 사용하는 방식은 번거롭고 람다 핸들러 스타일의 코드를 추가로 작성해야하는 문제점이 있습니다.

// Lambda Handler Style...
const compat = require("next-aws-lambda");
const page = require(".next/serverless/pages/somePage.js");

module.exports.render = (event, context, callback) => {
    compat(page)(event, context, callback);
};

---

현재의 방식 (9.0 이후)

이런 사용자들의 니즈를 알아챈 NextJS는 Serverless-Componenet라는 이름으로 아예 빌트인시켜 버립니다. 기존 코드에서 아무런 수정없이 serverless.yml만 작성하고 다음의 마법같은 명령어를 입력하면 끝이죠. 😙

$ serverless

---

하지만 이 방법은 9.0 이후 버전에서만 사용할 수 있습니다. 부득이하게 이전 버전에서 진행해야 한다면 기존의 방식을 사용해주세요.

---

배경

Serverless Component는 이런 마법같은 일을 3가지 서비스를 통해 구현합니다.

S3

NextJS가 Production모드로 생성한 파일들을 저장합니다. 리전이 버지니아 북부로 되어있지만 다음에서 설명할 서비스인 CloudFront를 통해 엣지 로케이션으로 전파되기 때문에 리전은 어디라도 괜찮습니다.

---

CloudFront

S3에 저장된 파일들을 각 엣지 로케이션에 캐싱합니다. 유저가 웹서비스에 접근하면 가장 가까운 엣지 로케이션에서 캐싱된 파일을 가져오기 때문에 응답시간을 최소화할 수 있습니다.

---

Lambda@Edge

NextJS는 서버 사이드 렌더링이기 때문에 Lambda를 통해 렌더링을 진행합니다. 하지만 Lambda는 특정 리전에 종속적이기 때문에 CloudFront에서 파일만 빨리 가져와도 의미가 없죠... 😭

---

그래서 아마존에서는 Lambda@Edge라는 기능을 출시했으며, 주요기능은 다음과 같습니다.

• 가장 가까운 엣지 로케이션에서 람다를 실행
• 사용자의 요청헤더를 변조할 수 있음

---

눈치채셨나요? 가장 가까운 엣지 로케이션에서 렌더링을 진행함으로써 CloudFront와 시너지를 발휘할 수 있습니다!

Lambda@Edge는 프리티어에 포함되지 않습니다.

---

시작하기

여기서는 최소한의 옵션으로 진행합니다. 자세한 기능은 공식 도큐먼트를 참조해주세요.

---

서버리스 설정파일 생성

프로젝트 루트에 serverless.yml 파일을 작성합니다.

myNextApplication:
    component: serverless-next.js

---

보안자격 환경변수 세팅

아마존 서비스에 배포하기 때문에 공개키와 비밀키가 필요합니다. 프로젝트 루트에 다음처럼 .env 파일을 작성하거나 직접 환경변수를 세팅해주세요.

AWS_ACCESS_KEY_ID=xxx
AWS_SECRET_ACCESS_KEY=xxx

---

넥스트 빌드타겟 세팅

넥스트를 서버리스로 빌드하겠다고 알려주기 위해 프로젝트 루트에 다음처럼 next.config.js 파일을 작성합니다.

module.exports = {
    target: "serverless"
};

---

서버리스로 배포하기

거의 끝났습니다! 한 줄만 더 입력하세요 🤗

$ serverless

배포가 완료된 모습

---

확인하기

위에서 출력된 URL을 통해 서비스를 확인할 수 있습니다.

---

개인 도메인 사용하기

위에서 얻은 주소에 .을 붙이고 CNAME 레코드로 등록하면 개인 도메인에 붙일 수 있습니다.

---

다만 개인 도메인을 사용하려면 SSL 인증서를 CloudFront에 설정하는 작업을 진행해야 합니다! CloudFront 콘솔에서 다음 버튼을 차례로 눌러주세요.

---

배포 설정

---

수정

---

SSL Certificate 항목에서 해당 도메인에 일치하는 SSL 인증서를 클릭하고 저장합니다. 만약 SSL 인증서가 없다면 아래의 버튼을 눌러주세요. 인증서 무료 생성 페이지로 이동할 수 있습니다.