🏃‍♂️

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

2021/05/19に公開

AWS

Next.js

tech

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 して使ってください。

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 とデータのやりとりをする…なんてことが可能なんでしょうか🤔 楽しみですね。