フロントエンド入門：Webサイトの新着情報をS3とLambdaで自動反映できるか考察

はじめに

この記事は、AWSのS3とLambdaを使って、Webサイトのトップ画面の「新着情報」に自動で記事を反映させる仕組みを作れるか？という個人の備忘録です。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

まだ検証や実装は行っていないアイディア段階の内容です。

書こうと思ったきっかけ

静的なWebサイトをS3上で運用している中で、「新着記事や活動記録をアップしたら、トップ画面にも自動で反映されてほしいな」と思ったのがきっかけです。

DBは使いたくなかったため、S3とLambdaのみで完結する軽量な構成ができないかを考えました。

内容の説明（想定している構成）

実現したいこと

• S3に記事をアップロード（例：MarkdownやHTMLファイル）
• そのタイミングでLambdaを実行
• Lambdaが記事情報を読み取り、新着情報一覧（latest.json）を更新
• フロントはそのlatest.jsonを読み込んでトップに表示

使用するAWSサービス

• S3：記事ファイルや最新情報JSONの保存先
• Lambda：S3へのアップロードイベントをトリガーに起動し、latest.jsonを更新
• latest.json：新着記事の一覧をJSONで保持（例：最大10件）

フロントの実装イメージ（静的HTML）

fetch('https://my-bucket.s3.amazonaws.com/latest.json')
  .then(response => response.json())
  .then(data => {
    // 新着情報として表示
    data.forEach(item => {
      console.log(item.title, item.date, item.url);
    });
  });

Lambdaで作成するlatest.jsonの例

[
  {
    "title": "My Article",
    "date": "2025-03-25",
    "url": "https://my-bucket.s3.amazonaws.com/posts/2025-03-25-my-article.md"
  },
  {
    "title": "Another Post",
    "date": "2025-03-20",
    "url": "https://my-bucket.s3.amazonaws.com/posts/2025-03-20-another-post.md"
  }
]

Lambda関数の想定処理

1. S3イベントで新規ファイル名を取得
2. ファイル名からタイトルや日付を抽出
3. 既存のlatest.jsonをS3から取得
4. 先頭に新しい記事を追加して、最大10件に制限
5. 更新後のlatest.jsonをS3に保存

まとめ（雑感）

• DBレスで構築可能な点が魅力
• LambdaにS3読み書きの権限が必要
• S3バケットポリシーの公開設定にも注意
• CloudFrontでのキャッシュ問題はあとで検討が必要かも

今回はあくまで「こんな構成できそう！」という個人メモです。

もし実装がうまくいったら、そのときは検証済みとして別記事にまとめようと思います！笑