AWS無料枠でポートフォリオを作る方法

結論

AWSでポートフォリオを作るなら、最初はサーバーレス構成がおすすめです。

理由は、常時起動サーバーを持たずに済むため、個人開発でもコストを抑えやすいからです。

このサイトでは、次のような構成を想定しています。

この構成は、Cloud PractitionerやSAAの学習内容とも相性がよいです。

AWS無料枠で作れる構成

初心者がポートフォリオを作るときに避けたいのは、固定費が発生しやすい構成です。

たとえば、EC2を起動しっぱなしにしたり、RDSを立てっぱなしにしたりすると、学習用途でも料金が発生しやすくなります。

そのため、最初は以下の方針で作ります。

使うサービス

Amazon S3

S3は、静的ファイルを保存するために使います。

Next.jsを静的出力すると、HTML、CSS、JavaScript、画像が生成されます。

それらをS3に配置することで、Webサイトのファイル置き場として使えます。

ただし、S3バケットを直接公開するのは避けます。

このサイトでは、CloudFront経由で配信する前提です。

Amazon CloudFront

CloudFrontは、ユーザーにサイトを高速配信するためのCDNです。

CloudFrontを使うと、以下のメリットがあります。

AWS Lambda

Lambdaは、問い合わせフォームの処理に使います。

サーバーを常時起動せず、リクエストが来たときだけ処理が実行されます。

個人開発の問い合わせフォームのように、アクセス頻度が低い処理と相性がよいです。

Amazon API Gateway

API Gatewayは、フロントエンドからLambdaを呼び出す入口です。

問い合わせフォームで送信ボタンを押すと、フロントエンドからAPI GatewayへPOSTリクエストを送ります。

API GatewayがLambdaを呼び出し、LambdaがDynamoDBへ保存します。

Amazon DynamoDB

DynamoDBは、問い合わせデータを保存するために使います。

今回のMVPでは、複雑なリレーションを扱いません。

名前、メールアドレス、件名、本文、作成日時を保存できれば十分です。

そのため、RDSではなくDynamoDBを選びます。

課金リスクがあるサービス

AWS無料枠を使う場合でも、課金リスクはゼロではありません。

特に初心者は、以下のサービスに注意してください。

今回のMVPでは、EC2、RDS、NAT Gateway、ALBは使いません。

実装ステップ

実装の流れは以下です。

1. Next.jsで静的サイトを作る
2. npm run build で静的ファイルを生成する
3. S3バケットを作成する
4. S3へ静的ファイルをアップロードする
5. CloudFront Distributionを作成する
6. CloudFront OACでS3を非公開にする
7. 問い合わせ用にAPI Gateway、Lambda、DynamoDBを作る
8. AWS Budgetsで課金アラートを設定する
9. READMEに構成図と設計意図を書く

この流れで作れば、単なる画面だけのポートフォリオではなく、AWS構成まで説明できる作品になります。

ポートフォリオとして見せるポイント

採用担当者や面接官に見せるときは、画面だけを見せても弱いです。

次の観点まで説明できると評価されやすいです。

まとめ

AWS無料枠でポートフォリオを作るなら、S3 + CloudFrontの静的サイト構成から始めるのが現実的です。

動的処理は、問い合わせフォームのように小さく始めます。

API Gateway、Lambda、DynamoDBを組み合わせれば、サーバーレスAPIも学べます。

この構成なら、Cloud Practitionerの知識を実装に変換しながら、SAAにつながる設計力も身につけられます。