こんにちは。本記事では、AWS Amplifyを活用したNext.jsによるSSR（サーバーサイドレンダリング）開発の導入・運用について、実際のプロジェクト経験を基に解説します。Next.js 13以降で追加されたApp RouterやSSR開発を容易にする機能、そしてAmplifyの提供する利便性をバックエンドとフロントエンドの視点からどのように活用したのかを具体的に説明します。各プロセスで得られた学びや課題を共有することで、読者の皆様の開発に役立つ情報を提供したいと思います。Next.jsやAmplifyを初めて利用する方、または既に活用している方々にも有益な内容になると確信しています。
 

全体

SSRが必要だった

 
私たちがNext.jsを初めて導入したのはバージョン11の頃で、その際はCSR（クライアントサイドレンダリング）を活用したWEBサイト制作を行いました。SSG（静的サイト生成）によるビルドは比較的容易ですが、CI/CDやSEOの課題に悩まされることがありました。
 
そんな中、Next.js 13以降ではApp RouterやSSR開発を容易にする新機能が追加され、さらにAWS AmplifyがSSRに対応したホスティングを提供するようになりました。新規社内サービスを制作するにあたり、Next.jsを選択するならば、チーム内にSSRの知識を蓄積する必要があると判断し、SSRを採用しました。
 
当初、SSR対応のホスティングサービスはVercelが主流でしたが、AWS AmplifyがNext.jsを活用したSSR実装を容易にすることを知り、Amplifyを活用したSSRウェブサイト制作に挑戦しました。
 

バックエンド

Amplifyを使うようになった課程と手続き

AWS Amplifyで新しいリポジトリを作成する際、「新しいリポジトリを作成」を選択します。その後、ソースコードを保存するプラットフォームを選択する指示が表示されますが、この際、CodeCommitを選択しました。選択理由は以下の通りです。
 

会社で使用しているGitLabがエンタープライズバージョンであるためです。エンタープライズバージョンでは、URLが通常のGitLabとは異なります。さらに、AWS Amplifyでは既存のGitLabURLの変更をサポートしていません。

そのため、Jenkinsを用いてGitLabリポジトリをクローンし、それをCodeCommitに同期してプッシュする方式を採用しました。

CodeCommitを利用することでAWS上で一貫した管理が可能となり、異なるリポジトリの混在によるリスクを回避できました。

最終的にはGitHubに移行したことで当初の問題は解消されたため、現在はこのような形式は使用していません。

 
下記のイメージのようにAmplifyを作成しました。 フロントエンドに関連するリクエストがある場合は、Amplify Hostingのビルド設定でamplify.ymlファイルを編集し、適用する必要があります。

Create App 方法

projectを保存しているplattformを選択

 

 
名前とbranchを設定

 
AppのbuildSetting確認

 
Hosting 設定

appを作成すると基本AWSで提供するdomainが生成されるが、必要な場合ホスティング追加が可能

 
Router53に登録済みドメインの中から選択

ドメインがない場合は、お名前.comなどで購入後、Router53に登録

 
Branchによってドメイン設定も可能

 

 
ドメインを追加した後、DNS レコード確認して該当レコードをRoute53に登録すれば完了

 
上記のように行えばAmplifyの設定は終了になります。
 

Amplifyを使い感じたところ

AWS Amplifyは、バックエンド開発者が不在でもサーバーレス環境を構築できる強力なツールであると感じました。ただし、参照データが複雑になったり、トラフィックが増加した場合には、柔軟に対応するためのバックエンド開発者が必要になる可能性があるとも感じました。
 

フロントエンド

どう使うのか

App-hubプロジェクトでAWS Amplifyを活用してフロントエンド開発を進めました。 バックエンドチームでApplify環境設定と配布を担当したため、私が直接環境設定に関与したことはありませんが、Applifyで構成された環境で下記のような作業を行いました:
 
ホスティング環境でのテスト
 
Amplifyの自動化された配布パイプラインを通じてステージング及びプロダクション環境でリアルタイムで作業結果を確認しながらテストを進行しようとしましたが、現在社内で使用しているGitLabは社内専用なので連動が難しく、code commitは現在権限がないのでGitにコードをPUSHした後、Jenkinsを通じてcode commitに配布すると、Amplifyが自動的にcode commitのコードを配布する方式をしています。 しかし、今後はgithubでコード管理をして、Amplifyと連動してPUSHするだけでも、即時配布とテストが可能になる予定です。

( Code Commitは2024年7月サービス終了)

 

使ってみたらどうだったのか

AWS Amplifyはフロントエンドとバックエンドの連動作業を非常に簡単で効率的に作ってくれるツールという点で強力だと感じました。 特に、Applifyの主な機能を活用しながら次のような長所を経験しました。
 
1. 生産性向上
他のツールに比べてバックエンドの設定や複雑な配布過程を気にしなくて済むおかげで、フロントエンドの開発により多くの時間を割くことができました。
 
2. 自動化された配布
Applifyが提供するCI/CDパイプラインは配布過程を単純化し、環境設定やエラーを最小化するのに寄与しました。 コードPUSHだけで素早く結果を確認でき、効率的でした。
 
3. ドキュメントとコミュニティ
Amplifyのドキュメントは非常に整っており、機能の使い方をすぐに習得できました。また、コミュニティでも多くの問題解決方法を見つけることができました。これにより、初心者やチームでのコラボレーションにも適したツールだと感じました。
 

まとめ

AWS AmplifyとNext.jsを組み合わせたSSR開発は、効率的な開発プロセスと柔軟な環境構築を実現する強力な選択肢であることが分かりました。
 
一方で、複雑なデータ構造や高負荷なトラフィックに対しては、より高度なバックエンド開発の対応が必要であることも感じました。AWS Amplifyのシンプルさと拡張性を最大限活かしつつ、今後の課題に備えた技術力をさらに高めていくことが重要です。
 
この記事を通じて、AmplifyやSSR開発に関心をお持ちの方々の参考になれば幸いです。