AWS AmplifyでNext.jsのSSRアプリケーションをデプロイ

はじめに

AWS Amplifyは、ウェブおよびモバイルアプリケーションの開発を加速するためのプラットフォームです。

フロントエンドとバックエンドの両方で機能を提供し、開発者が簡単にセットアップできるように設計されています。

サーバーサイドレンダリング(SSR)でビルドしているNext.jsアプリケーションをAmplifyでデプロイする場合は注意が必要です。

静的サイトやクライアントサイドレンダリングのアプリケーションとは異なり、適切なホスティング設定とバックエンド構成が必要になります。

そのため、AmplifyでNext.jsのSSRアプリケーションをデプロイする際には、SSR特有の設定を適切に行う必要があります。

Amplify による Next.js SSR アプリケーションのデプロイ手順

Amplifyコンソールへのアクセス

AWS Management Consoleにログインします。

上部の「サービス」から「Amplify」を選択します。

新しいアプリの作成

Amplifyコンソールの右上にある「新しいアプリケーション」をクリックします。そこで、ウェブアプリケーションを選択し、次に進みます。

リポジトリの設定

リポジトリの設定画面で、GitHubリポジトリを選択します。

リポジトリとデプロイするブランチを選択します。

このとき、リポジトリのアクセス権を許可するために、GitHubの認証を行います。

また、リポジトリへの管理者権限をもっていなければなりません。

monorepoを採用している場合は、monorepoを接続しますか？と表示されているチェックボックスにチェックをいれ、ディレクトリを指定します。

その後、「次へ」をクリックします。

詳細設定

アプリケーションの名前を入力します。

環境変数を入力し、IAMロールを選択してください。

最後にAmplifyへのアクセスを許可するために、Amplifyへのアクセス権のあるIAMロールを選択します。

もし、IAMロールがない場合は、新しいIAMロールを作成してください。

https://console.aws.amazon.com/iam/home?#/roles から「ロールの作成」を選択
画面下部の「サービスを選択してユースケースを表示します」となっているところで「Amplify」があるのでそれを選択

デプロイ

最後に設定を確認し、デプロイを開始します。

このとき、以下の2点を確認してください。

アプリの設定にてフレームワークがNext.js - SSR
プラットフォームがウェブコンピューティング

そうでない場合はデプロイ後に以下のコマンドで変更可能です。

aws --profile {AWS_PROFILE} amplify update-branch --app-id {APPLICATION_ID}  --branch-name develop --framework 'Next.js - SSR' --region ap-northeast-1
aws --profile {AWS_PROFILE} amplify update-app --app-id {APPLICATION_ID} --platform WEB_COMPUTE --region ap-northeast-1

「保存してデプロイ」をクリックすると、Amplifyがデプロイを開始します。

デプロイが完了すると、AmplifyのURLにアクセスすることで、デプロイされたアプリケーションを確認できます。

その他機能

Amplifyには、便利な機能が多数用意されています。

自動デプロイ

Amplifyは、GitHubやGitLabなどのリポジトリに対して、自動デプロイ機能を提供しています。

対象のリポジトリにコードの変更があった場合、自動的にビルドとデプロイを行うことができます。

構築時に設定する場合は、リポジトリの設定画面で「自動デプロイ」を有効にします。

構築後に変更する場合は、アプリの設定タブの環境変数のAMPLIFY_DIFF_DEPLOYをtrueに設定することで、自動デプロイを有効にすることができます。

プレビュー機能

Amplifyには、プレビュー機能があります。この機能は、コードの変更がリアルタイムでどのように影響するかを確認しながら、開発を進めることができます。プルリクエストやブランチごとに独立したデプロイ環境を自動的に作成し、変更前と変更後のアプリケーションを比較検討することが可能になります。

Amplify Consoleにプロジェクトを設定: Amplify Consoleでプロジェクトを設定し、ソースコードリポジトリとの連携を行います
プレビュー設定の構成: プレビュー機能を有効にし、どのブランチやプルリクエストでプレビューを生成するかを指定します
コード変更のプッシュ: 変更を含む新しいブランチをリポジトリにプッシュするか、既存のブランチに対してプルリクエストを作成します
プレビューリンクの確認: Amplifyは自動的にプレビュー環境を作成し、プルリクエスト内にプレビューリンクをコメントにて表示します

まとめ

Amplifyを使用してNext.jsのSSRアプリケーションをデプロイする際には、適切な設定が必要です。

デプロイを開始する前に、リポジトリの設定や環境変数の入力、IAMロールの選択など、必要な設定項目を一つひとつ確認していくことが必要です。特に、フレームワークが「Next.js - SSR」に設定されているか、プラットフォームが「ウェブコンピューティング」になっているかは、SSRアプリケーションを正しくデプロイするために重要です。

また、Amplifyの自動デプロイ機能やプレビュー機能を活用することで、開発を効率化することができます。

Amplifyを使ってNext.jsのSSRアプリケーションをデプロイする際には、上記の手順を参考にしてみてください。

参考

備考

Hakky ではデータ基盤の構築を行うエンジニアを募集中です！まずは話してみたいなどでも構いませんので、ぜひお気軽に採用ページからお問い合わせくださいませ。