Zenn
💭

Serverless Next.jsをAWS CDKで立ち上げるサンプル

2021/08/09に公開
Next.js
AWS CDK
tech

できれば公式のExampleに持っていきたいので、PRたててリクエスト中。
https://github.com/serverless-nextjs/serverless-next.js/pull/1522

マージされたらそっちベースにちゃんとした記事書き直す予定。

Serverless Next.jsでAWS CDK

Serverless Next.jsといえば、Serverless Componentを使う印象でした。が、最近CDK版も出たみたいです。

定義イメージ

import * as cdk from '@aws-cdk/core';
import { NextJSLambdaEdge } from "@sls-next/cdk-construct";

export class ServerlessNextjsCdkExampleStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const app = new NextJSLambdaEdge(this, "NextJsApp", {
      serverlessBuildOutDir: "./build"
    });
    new cdk.CfnOutput(this, 'Domain', {
      value: app.distribution.domainName,
      description: 'CloudFrontDomain'
    })
    new cdk.CfnOutput(this, 'ID', {
      value: app.distribution.distributionId,
      description: 'DistributionID',
    })
  }
}

NextJSLambdaEdgeの戻り値でCloudFrontやLambdaなどのリソースにアクセスできるので、プラスアルファでAWSリソースを立てたい場合はServerless Componentより良さそうです。

作ったテンプレート

https://github.com/hideokamoto/serverless-nextjs-cdk-example

create-next-appをベースに、CDK系のリソースをcdkにまとめたものです。

monorepoにするほどでもないけど、設定ファイル系を共用するのがなんとなく嫌だったので、そのへんも多少調整しています。

使い方

create-next-appの--exampleでまとめて持っていってください。

$ yarn create next-app --example https://github.com/hideokamoto/serverless-nextjs-cdk-example

Next.js同様yarn devでローカルサーバーが立ち上がりますし、AWS CDK同様yarn build && yarn cdk deployでAWSにデプロイできます。

Q: AWS Amplify使えば楽じゃね？

CloudFrontに手を入れる気満々なので、AmplifyはNoなのです。

Discussion