AWS App Runner にSSRありの Next.js アプリをデプロイする(ソースコードデプロイ)

2 min read読了の目安(約2600字

AWS App Runner がリリースされましたね。VPC を作成することなく、アプリケーションコンテナをデプロイ・実行できるサービスです。GCP の Cloud Run に近いでしょうか。

Next.js アプリをデプロイする

実は2021年5月19日(水)、もうひとつリリースがありました。それが AWS Amplify の server-side rendering support です。どちらかというとこちらのリリースのほうが Next.js ユーザー向けだと思います。ただ、Next.js をコンテナアプリケーションとして GCP や Fargate にデプロイするパターンもあると思い、今回は AWS App Runner へデプロイしてみることにしました。選択肢が多くて悪いことはないですしね。

SSR ありの Next.js アプリを用意する

公式のブログサンプルを create-next-app して少々改変し使うことにします。App Runner へデプロイする方法は大きく二通りあります。

  • ECR(Elastic Container Registry)にアップロードされたコンテナイメージからデプロイする
  • ソースコードからデプロイする。設定で、Node.js12 か Python3のベースコンテナを選びます

今回はソースコードからデプロイするのですが、そのためにはGitHubで自分のアカウント上のリポジトリを指定できる必要があります。サンプル用のリポジトリを作成したので fork して使ってください。

https://github.com/cm-wada-yusuke/apprunner-nextjs-ssr

App Runner の画面へ

Create an App Runner service とします

Source and deployment

Source code repository を選択。その後 Add new を押下。

Connection name は任意のもので、Insttall another で GitHub と接続します。単一リポジトリとつなぐほうがまずは安全そうです。

このような状態になればOKです。 Next とします。

Configure build

  • ランタイムは Nodejs 12
  • ビルドコマンドは yarn install && yarn build としました
  • 開始コマンドは yarn start としました
  • ポートは Next.js デフォルトの 3000 です

Configure service

vCPU の設定などできるようですが、今回は Service name だけ next-ssr-blog とし、あとはデフォルトのまま進めました。オートスケーリングの設定もここでできるみたいですね。次の画面は Confirm なので確認後、Create & deploy とします。おおよそ10分ほど待ちます。

サービスが立ち上がったらアクセス

Services の画面で確認します。Status が Running になったらアクセスしてみましょう。

どうやら無事に動いているようです。もとは SSG のサンプルだったのですが、記事のページを改変してSSRにしています。 「preview という文字列が slug に入っていたらプライベートコンテンツにする」というロジックを getServersideProps に入れているのですが…

SSRのロジックも問題なく動いているようでした。

まとめ

リリースされた App Runner を早速使ってみました。Amplify Console の機能追加とあわせて、Next.js をAWS環境へデプロイする選択肢が一気に広がりましたね。記事内で実施したように、App Runner はソースコードからもデプロイできるので、ちょっとしたWebアプリケーションをデプロイする先として重宝しそうです。

App Runner は IAM ロールも設定できるため、次段は、App Runner の Webアプリケーションから各種 AWS サービスへアクセスすることも試してみたいです。 getServersideProps 内で AWS SDK から直接 DynamoDB とデータのやりとりをする…なんてことが可能なんでしょうか🤔 楽しみですね。