1. 概要
個人開発でNext.jsを使っている方には、
「とにかくランニングコストを抑えたい」 「でも、表示スピード（パフォーマンス）は落としたくない」 「AWS Amplifyの無料枠がもうない」
といった事情により悩まれているかたもいらっしゃるかと思います。
そこで、
・Vercel ＋ AWS SDK ＋ DynamoDB
を選定しました。理由として、
VercelのHobbyプランなら期限なく無料で、かつ強力なキャッシュ機能（ISR）を前段に挟むことで、バックエンドであるAWS（DynamoDB）へリクエストが飛ぶ回数を劇的に減らし、AWS側の課金も原則無料枠内に安全に抑え込むことができると考えたためです。
本ブログでは前段で必要となるAWS 周りの初期環境構築を中心に解説していきます。
実際へのVercelへの設定等は次回ブログにて記載予定ですのでご了承ください。
システム構成図(スマホ版を現在考慮してないなど実際との差異有り)
2. 前提条件、注意事項
- WSL2：Windows10以降
詳細な条件はWSL 2 の実行に関する要件を確認する をご確認ください。 - Ubuntu：Ubuntuを入手する をご確認ください。
- AWSの個人アカウントを取得済みであること。
【AWS】AWSアカウントを作成し、マネジメントコンソールにサインインする をご確認ください。 - Git hubの個人アカウントを取得済みであること。
【Git】②GitHub アカウント作成 をご確認ください。 - Vercelの個人アカウントを取得済みであること。
下に参考文献として載せております。 - 既にローカルPCで Next.js のプロジェクトが作成されており、DynamoDBへのアクセスできるメソッドも用意されていること
→本ブログはVercelやAWSの構築方法を中心に行っているため、PG内容自体には原則触れておりません
※上記について単独完遂することができるジュニアPG以上を前提に以降のブログを記載しております。
課金について: 本記事は個人開発を想定し、Vercelの無料枠（Hobbyプラン）およびAWSの無料利用枠、または極低コストでの運用（キャッシュを活用したアクセス削減）を前提とした設計になっています。しかし、想定外のアクセス急増や設定ミスによって課金が発生する可能性があります。各サービスの利用および管理は自己責任で行い、定期的にVercelの「Usage」やAWSの「請求ダッシュボード」を確認するようにしてください。
3. IAMユーザー（アクセスキー）の作成
（Vercel）からAWSへアクセスするための「アクセスキー」を作ります。 万が一鍵が漏れても被害が出ないよう、DynamoDBとS3だけを操作できる専用ユーザーを作ります。
3.1 rootユーザーでログイン後、AWSコンソールから「IAM」リンクを押下しアクセスします。
3.2 「IAMユーザー」リンクを押下し「ユーザーの作成」ボタンを押下します。
3.3 任意のユーザー名を記載して「次へ」ボタンを押下します。
3.4 許可を設定から「ポリシーを直接アタッチする」を選択して、検索窓で以下の2つを検索し、チェックを入れます。
AmazonDynamoDBFullAccessAmazonS3FullAccess
問題無ければ、「次へ」ボタンを押下します。
3.5 設定した内容が正しいか確認して「ユーザーの作成」ボタンを押下します。
3.6 作成したユーザー名のリンクを押下します。
3.7 「アクセスキーを作成」リンクを押下します。
3.8 「AWS外で実行されるアプリケーション」を選択して「次へ」ボタンを押下します。
3.9 必要に応じて説明タグ値を設定して、「アクセスキーを作成」を押下します。
3.10 表示される 「アクセスキー」 と 「シークレットアクセスキー」 を手元のメモ帳などにコピーして保存してください。
※シークレットキーは本画面以降二度と確認できない為、控えを忘れないようにしてください。
※必要に応じてcsvファイルのダウンロードを進めます。
4. DynamoDBテーブルの作成
4.1 AWSコンソールから「DynamoDB」リンクを押下し、
表示された画面から「テーブルの作成」ボタンを押下します。
4.2 テーブルを以下の赤枠の通りに作成します。
※赤枠で指定した箇所以外はすべてデフォルトとしました。
→作成されているProjectに応じてテーブル名やパーティションキーの設定をしてください。
4.3 作成されたテーブルのリンクを押下します。
4.4 「テーブルアイテムの探索」ボタンを押下します。
4.5 「項目を作成」ボタンを押下します。
4.6 DynamoDB JSONをオフにする(トグルスイッチをクリックして【オフ】（黒色）)にして、データを貼り付けます。
「項目を作成」ボタンを押下します。
※今回は筆者の贔屓にしているアーティストのアルバムとその曲順を想定したデータとしていますが、ここは作成されているデータに応じて実データを投入してください。
{
"id": "20260513001",
"year": 2026,
"artist": "HYDE",
"album,": "JEKYLL",
"date": "2026/05/13",
"isChecked": false,
"setlist": [
{ "songOrder": 1, "songTitle": "DIE HAPPILY" },
{ "songOrder": 2, "songTitle": "SSS (Sending Secret Signals)" },
{ "songOrder": 3, "songTitle": "MAISIE" },
{ "songOrder": 4, "songTitle": "FINAL PIECE" },
{ "songOrder": 5, "songTitle": "SO DREAMY" },
{ "songOrder": 6, "songTitle": "THE ABYSS" },
{ "songOrder": 7, "songTitle": "TATTOO" },
{ "songOrder": 8, "songTitle": "NOSTALGIC" },
{ "songOrder": 9, "songTitle": "SMILING" },
{ "songOrder": 10, "songTitle": "FADING OUT" }
]
}
4.7 想定通りのレコードが作成されていればOKです。
5. AWS SDKのインストール
5.1 お使いのエディタから以下のコマンドをプロジェクト直下で実施します。
npm install @aws-sdk/client-dynamodb @aws-sdk/util-dynamodb上記を行うことで関数一つで簡単にPGからDynamoDBへアクセス可能になります。
6. あとがき
今回はVercelとAWSを連携させると冒頭に記載しましたが、事前に必要なAWS周りの設定を中心に記載いたしました。
IAMとDynamoDB、AWS SDKに留めましたが次回はS3やCloudFrontの設定について記載予定です。
7. 参考
投稿者プロフィール
