試験合格の知識を即実践！アラフォーエンジニアがレガシーを脱して挑戦するS3+CloudFront+Next.jsブログ構築記
🎉 はじめに
先日、AWS SAA（ソリューションアーキテクト アソシエイト）試験に合格しました！
私はこれまでLaravelでのフルスタック開発を中心に、EC2やECS、RDSといったIaaS/コンテナ基盤を使ったAWS環境の構築・運用を実務で行ってきました。しかし、キャリアの大半がPM（プロジェクトマネージャー）やPL（プロジェクトリーダー）業となり、管理がメインになったことで技術的なスキルが落ちていることを強く実感していました。
SAAの勉強を通して、自分が「普段使わないサービス」の広大さに気づき、モダンな構成への知見が不足していることを痛感しました。
現在36歳。キャリアの後半戦を見据え、「知っているAWS」から「使えるAWS」の領域を広げるため、この資格取得を機に、実践の場としてこのブログを立ち上げました。
💡 このブログの目的
このブログは、従来のインフラ構築経験を持つエンジニアが、サーバーレスやモダンなアーキテクチャにどうシフトしていくかを記録する場と位置づけます。
- AWSの「使える」知識をシェア: SAAで学んだ新領域の知識（サーバーレス、マネージドサービス）を、実践的なアーキテクチャとして構築し、試行錯誤のプロセスを共有します。
- 徹底した低コスト運用: ECS/EC2インスタンスのような固定費を排除し、AWSの無料枠を最大限に活用。
- エンジニアリングの学習ログ: 新しい技術や挑戦したことのリアルな記録（従来の構成との比較やメリット・デメリットを深く考察）。
- キャリアと技術の考察: 30代のエンジニアとしてのキャリアパスや、今後身につけるべき技術への考察。
🏗️ 今回の構成
今回のブログ構成は、私がこれまで主戦場としてきたEC2 + ALB + RDSといった構成とは全く異なります。「サーバーを持たないモダンな構成」を意識して採用しました。
- S3: 静的ファイルのホスティング（S3はRoute53/CloudFront連携で実務経験あり）
- CloudFront: CDNによる高速配信（WAF連携含め実務経験あり）
- Next.js: 静的サイト生成（SSG）
- Markdown: 記事の執筆
S3とCloudFrontは実務経験があるサービスですが、今回はNext.jsを組み合わせることで、その運用方法やベストプラクティスをアップデートすることが目的です。
構成の技術的なポイント
実際にこのブログを構築する中で意識した設定や学びを簡単にまとめます。
S3 静的ホスティング
- バケットの「静的ウェブサイトホスティング」は有効にせず、CloudFront経由のみでアクセスさせる構成を採用しました。S3バケットはパブリックアクセスを完全にブロックし、OAC（Origin Access Control）でCloudFrontからのみ読み取りを許可しています。従来のOAI（Origin Access Identity）より新しい推奨方式です。
CloudFront のキャッシュ戦略
- HTMLファイルは短めのTTL、CSS/JS/画像などの静的アセットは長めのTTLに設定しています。Next.jsの静的エクスポートでは
_next/static/配下にハッシュ付きファイル名で出力されるため、アセットには積極的にキャッシュを効かせることができます。デプロイ時にはCloudFrontのキャッシュ無効化（Invalidation）を実行して、最新のHTMLが即座に反映されるようにしています。
Next.js 静的エクスポート（SSG）
next.config.mjsでoutput: 'export'を指定し、npm run buildで/out/ディレクトリに完全な静的HTMLを出力しています。この構成ではAPI RoutesやServer Actions、middlewareなどのサーバーサイド機能は使えませんが、ブログ用途には十分です。Markdownファイルから記事を読み込み、ビルド時に全ページを生成するシンプルな設計にしています。
コスト感
- S3のストレージ料金とCloudFrontの転送量が主なコストですが、個人ブログ程度のアクセス量であればAWSの無料枠の範囲内で収まっています。EC2インスタンスのような月額固定費が発生しないのは精神的にも大きなメリットです。
🎯 なぜこの構成にしたか
🔄 技術のアップデートと脱「レガシー」
- 従来の構成の固定費と運用負荷からの脱却: EC2/ECS、VPC、ALBといった固定費や管理が必要な要素を極力排除し、運用負荷の少ないモダンな構成を体験します。
- サーバーレス/JAMstackへのシフト: SAAで学んだ、FargateやLambdaなどのサーバーレス技術へのスムーズな移行のための足がかりとします。
- 静的サイト最適化: S3/CloudFrontの既存知識を活かしつつ、Next.jsのSSGを組み合わせることで、世界水準の配信速度とコスト効率を追求します。
📊 従来構成との比較
実際に両方の構成を経験した立場から、簡単に比較してみます。
| 観点 | EC2/ECS + ALB + RDS | S3 + CloudFront + SSG |
|---|---|---|
| 月額コスト | 最低でも数千円〜（EC2 t3.micro + RDS等） | 無料枠内で運用可能 |
| 運用負荷 | OS/ミドルウェアのパッチ適用、監視が必要 | ほぼゼロ（マネージドサービスに委任） |
| スケーラビリティ | ALB + Auto Scaling の設計が必要 | CloudFrontが自動でグローバル配信 |
| 表示速度 | サーバー処理時間 + ネットワーク遅延 | エッジキャッシュから配信、極めて高速 |
| 柔軟性 | サーバーサイド処理が自由自在 | 静的コンテンツに限定（動的処理は別途Lambda等が必要） |
ブログのような「読み取りがメインで、更新頻度が低いコンテンツ」には、S3 + CloudFront構成が圧倒的にコストパフォーマンスが良いことを実感しています。
📚 新しい技術領域への挑戦
- SAAで「知った」Lambda、DynamoDB、Cognitoなどのサービスを、次は「使える」に変えるための環境構築です。
- Next.jsというモダンな技術選定により、フロントエンドの最新トレンドも並行して追うことができます。
🛠️ 構築でハマったポイント
実装自体は、無料プランのAI（ChatGPT、Gemini）を使いながら半日かからない程度で一通りの構成ができました。ただし、いくつか詰まったポイントがあったので記録しておきます。
OAC（Origin Access Control）の設定
S3バケットはパブリック公開せず、CloudFront経由でのみアクセスを許可するのがセキュリティ面でのベストプラクティスです。これを実現するのがOAC。以前のOAI（Origin Access Identity）からの置き換えで、2022年以降はOACが推奨されています。
ただしOACは「S3バケットポリシー側でCloudFrontからのアクセスを明示的に許可する」必要があり、片方だけ設定するとアクセスできません。初回はこの連携に気づかず「403 Forbiddenしか返ってこない」状態にハマりました。
App Router + CloudFrontでの末尾スラッシュ問題
これが一番ハマった箇所です。Next.js 16のApp Routerでは、各ページが /posts/[slug]/index.html のようにディレクトリ + index.htmlで出力されます。next.config.mjs に trailingSlash: true を設定するとURLに末尾スラッシュがつく形になります。
ところが、CloudFront経由でアクセスすると末尾スラッシュの有無で挙動が変わる:
/posts/first-post/→ 200 OK（正常表示）/posts/first-post→ 403 Forbidden（末尾スラッシュなし）
ローカル（npm run dev）では両方とも問題なく動くため、デプロイ後に初めて気づきました。CloudFront Functionsで末尾スラッシュを付与するリダイレクトを挟むなどの対応が必要になります。
この末尾スラッシュ問題は
sitemap.xmlにも波及しました。sitemap内のURLも全て末尾スラッシュ付きに揃えないと、Google Search Consoleで「代替ページ」「検出-未登録」扱いになります。
学び
- 静的エクスポート = 単純ではない。CloudFront側の挙動を理解していないと詰まる
- ローカルで動いてもデプロイ後に動くとは限らない。特にルーティングとキャッシュ周りは本番環境で必ず確認する
- 公式ドキュメントよりも、実装してみて生じた問題を記録する方が次回以降の役に立つ
💰 構築後の運用実績
数ヶ月運用してみて、実際の数字はこのくらいです。
| 項目 | 実績値 |
|---|---|
| 月額AWS費用 | 約 $0.6（ほぼ無料枠内） |
| 月間PV | 約 1,000件（1日30〜40件前後） |
| 初期セットアップ時間 | 半日以下 |
| 利用AIツール（初期） | ChatGPT無料プラン + Gemini無料プラン |
$0.6 = 約90円（1ドル150円換算）。年間でも1,000円ちょっと。ドメイン代（年1,500円程度）の方がむしろ高いくらいです。
PV数は個人ブログとしては控えめですが、「月1,000PVで$1未満の運用コスト」という実績が出ている点は、「静的サイト + CloudFront」の費用対効果の良さを示す具体例になると思います。EC2で同じPV数を扱えば、t3.microでも月$10前後は覚悟する必要があります。
🚀 これからやりたいこと
このブログを「サーバーレス開発の実験場」として位置づけ、積極的に新しい技術を試していきます。特に、実務で触れてこなかったサービスを優先的に取り入れます。
- 本格的なサーバーレスバックエンド: API Gateway + Lambdaを組み込み、本格的なサーバーレス開発に移行する。
- NoSQLへの挑戦: DynamoDBを使い、RDS/Aurora以外のデータストアの設計思想と運用を学ぶ。
- 認証機能の導入: Cognitoを使い、モダンな認証・認可の仕組みを構築する。
- CI/CDパイプラインの洗練: CodePipelineやGitHub Actionsを活用し、開発フローを自動化する。
最終的には、従来のEC2/ECSの知見と、新たに獲得したサーバーレス技術を融合させ、ハイブリッドな最適なアーキテクチャを提案できるエンジニアを目指します。
✍️ 更新頻度について
仕事や家庭との両立の中で、勉強がてらの運営となるため、更新頻度は不定期になると思います。
しかし、このブログ自体が私自身のスキルアップの証となるよう、継続的に更新していくことをお約束します！
🌟 まとめ
AWS SAA合格は、PM/PL業で技術から離れていた私の技術的な停滞を打破する、大きなきっかけとなりました。
これまでの実務経験を土台としつつ、このブログを通じて新しいAWSの領域に踏み込んでいきます。同じようにスキルアップデートを目指すエンジニアの方々の参考になるよう、失敗も含めて正直に記録していきます。
まずはこのブログのサーバーレス構成を極めることから。「習うより慣れろ」の精神で、楽しみながら実践的な技術力を磨いていきます。
それでは、これからよろしくお願いします！