Next.jsのアプリをAppRunnerで動かす

はじめに

いつかAppRunnerの素振りをしようとずっと思っていたのですが、いい加減やってみましたのでNext.jsのアプリをAppRunnerで構築する方法を紹介します。

Mono Repo の構築

lernaを使って、モノリポジトリを作成します。

npx lerna init

"npmClient"を追記して、npmクライアントをyarnに変更します。

/lerna.json

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useWorkspaces": true,
  "version": "0.0.0",
  "npmClient": "yarn"
}

Next.jsのpackageを作成します。

(cd packages && yarn create next-app --typescript)

CDKでAppRunnerを構築するpackageを作成します。

(mkdir packages/cdk && cd packages/cdk && npx cdk init app --language typescript)

cleanとstartのscriptを追加します。

/package.json

@@ -7,7 +7,9 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "build": "lerna run build",
-    "test": "lerna run test"
+    "test": "lerna run test",
+    "clean": "lerna clean",
+    "start": "lerna run start --scope=app"
   },
   "devDependencies": {
     "lerna": "^6.5.1"

とりあえずここまでできたらパッケージをインストールしておきましょう。

yarn install
yarn clean
yarn bootstrap

CDKでAppRunnerを構築する

l2 constructを使って、AppRunnerを構築します。現時点(2023/04/16)ではalpha版なので、@aws-cdk/aws-apprunner-alphaをインストールします。

yarn lerna add @aws-cdk/aws-apprunner-alpha --scope=cdk
yarn bootstrap

今回はGitHubのレポジトリからデプロイを行いたかったのでStackは以下のようにしました。

/packages/cdk/lib/cdk-stack.ts

import * as cdk from 'aws-cdk-lib';
import {Construct} from 'constructs';
import * as apprunner from "@aws-cdk/aws-apprunner-alpha";
import {ConfigurationSourceType} from "@aws-cdk/aws-apprunner-alpha";

export class CdkStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    new apprunner.Service(this, 'Service', {
      source: apprunner.Source.fromGitHub({
        configurationSource: ConfigurationSourceType.API,
        connection: apprunner.GitHubConnection.fromConnectionArn('YOUR_CONNECTION_ARN'),
        repositoryUrl: 'https://github.com/kexi/nextjs-on-apprunner',
        branch: 'main',
        codeConfigurationValues: {
          runtime: apprunner.Runtime.NODEJS_16,
          port: '3000',
          startCommand: 'yarn start',
          buildCommand: 'yarn install && yarn bootstrap && yarn build',
        }
      }),
    });
  }
}

以下を実行して、Stackをデプロイします。

(cd packages/cdk && yarn cdk deploy)

以上でAppRunnerの構築は完了です。所定のurlにアクセスすれば、Next.jsのアプリが表示されます。

おわりに

まだWAFが刺せなかったり、l2 constructがalpha版だったりするのですが今後のアップデートで使いやすくなると思います。