Zenn
🚁

AWS App Runner で Next.js をデプロイしてみよう

2021/06/05に公開
AWS
Next.js
React
tech

こんにちは。

米国時間2021年5月18日、AWSから AWS App Runner という、なんかめちゃめちゃ凄そうなサービスがローンチされました。

普段、フロントエンドをメインに開発している者としてはインフラをよしなにやってくれるなんて、なんとありがたいのでしょうか 😉

AWS App Runner

AWS App Runner は、コンテナ化されたウェブアプリケーションや API を開発者が簡単かつ迅速にデプロイできるフルマネージド型サービスです。大規模に、しかも事前のインフラ経験を必要とせずにデプロイすることができます。ソースコードからでも、コンテナイメージからでも始められます。App Runner がウェブアプリケーションを自動的にビルドおよびデプロイし、暗号化しつつトラフィックのロードバランスを実行します。また App Runner は、トラフィックのニーズに応じて自動的にスケールアップまたはスケールダウンします。App Runner を使用すれば、サーバーやスケーリングについて煩わされることもなく、アプリケーションに集中できる時間が増えます。
引用: https://aws.amazon.com/jp/apprunner/?nc1=h_ls

AWS公式サイトでも紹介されているように、AWS App Runner はコンテナおよびソースコードから用意にデプロイできサービスを始められる特徴があります。

フロントエンドの開発をしている筆者にとって、GUIからリソースを選択し、ボタンをポチればデプロイでき、トラフィックが増えたら自動的にスケーリングし、SSL通信までしれくれるありがたいサービスです。

リリース当初は英語版でしたが、現在では日本語に翻訳されていますね。

ユースケース

  1. フロントエンドとバックエンドのウェブアプリケーション
  2. マイクロサービスと API
  3. 迅速な本番デプロイ

はじめる

Amazon ECR パブリックリポジトリのイメージをデプロイする

それでは、早速 AWS App Runner を使ってみたいと思います！

上記は2通りのデプロイ方法があると述べましたが、まずは、パブリックレジストリからデプロイしてみたいと思います。

「サービスの作成」ボタンを押下します。

デプロイ方法の選択

リポジトリタイプ「コンテナレジストリ」を選択、プロバイダーは「Amazon ECR パブリック」を選択します。コンテナイメージの URI はこちらを参照すると使用できるイメージがリストで表示されると思います。
今回は nginx を使用したいと思いますので、こちらを選んでみます。そうすると、URI が記載されていますのでこちらをコピって貼り付けます。

public.ecr.aws/nginx/nginx:latest

デプロイトリガーは新しいプッシュされる度に自動的にデプロイすることができますが、今回はひとまず手動で問題ないかと思います。

サービスを設定

次に、各設定をしていきます。
特にこだわりが無ければデフォルトでいけます。サービス名だけは必須なので適当なものを入力しておきます。ポートは80を設定します。Auto Scallingやヘルスチェックの設定もここで行います。

最後に設定したものの確認と、問題無ければ「作成とデプロイ」を押下して完了です。
デプロイが完了するまでには5分程時間がかかるようなので気長に待ちましょ〜。
デプロイ中は In progress のステータスとなります。

完了すると下記のようにステータスがSucceededになります。

成功！

デフォルトドメインに記載されているURLにアクセスしてwelcomeページが表示されたら成功です！

ソースコードからデプロイする

次に、ソースコードからデプロイしてみたいと思います。
今回は React.js のフレームワークでおなじみ、Next.js をデプロイしてみます！
特に Next.js の説明はしませんが、気になる方はこちらからどうぞ。

上記の例ではコンテナレジストリを選択しましたが、今回はソースコードレジストリを選択します。
なお、Github に接続しておく必要があるのであらかじめ設定をしておきましょう。

Next.js は様々なテンプレートが公開されていますので、そちらをデプロイの対象としてみるのも良いかもしれないですね！

次に、構築の設定を行います。
今回は ここですべての設定を構成する を選択します。
別途設定ファイルを使用したい場合は apprunner.yaml を読み取れば良いようです。
ランタイムは Nodejs 12、構築コマンドは yarn install && yarn build を入力します。開始コマンドは yarn start にします。こちらは各フレームワークの設定に従ってください。ポートは3000です。

(2023/02/08 記事更新時点)

本記事の初稿では Node.js 12 および Python 2.7 のみでしたが、それぞれ Node.js 16 と Python 3.1 が利用できるようになってます。
それ以外にも、 Go 1, Corretto 8,11 などにも対応しているみたいですね。

今後紹介する予定の Next.js 製のアプリケーションも Node.js 16 のランタイム環境にデプロイしているので、問題なく使えてそうです。

その後の作業は上記と同様にサービスを設定で任意でサービス名を設定して、必要に応じて Auto Scaling やヘルスチェックの設定をして次に進みます。
最後の確認して問題が無ければ作成とデプロイを押下してデプロイしましょう！

デプロイまで完了したらデフォルトドメインにアクセスして画面が表示されたら完了です！！

削除

削除する際はアクションタブから削除を選択すればおｋです。

まとめ

以上のように簡単にデプロイすることができましたね！
通常であれば、各リソースを準備して構築する必要があるのですが、このサービスではその手間を省力できる点でかなりメリットがありそうです！
始めたてのサービスやイベントの告知サイト、開発用など幅広いシーンで利用できそうです！

以上

Discussion