Webブログ開発 - 機能設計編

AWS
api
Lambda
DynamoDB
機能設計
サーバーサイド

Webブログの機能設計フェーズについて、API設計やLambda関数の詳細を交えて詳しく解説します

Webブログ開発 - 機能設計編

📚 Webブログ開発シリーズ

  1. システム要件編
  2. システム設計編
  3. 機能設計編 ← 現在の記事
  4. Lambda実装編
  5. 運用設計編
  6. フロントエンド編
  7. 監視・通知編

システム設計フェーズで決定したアーキテクチャを基に、機能設計フェーズでは各機能の詳細な実装方法を設計します。

このフェーズでは、API設計、Lambda関数の詳細仕様、データフローを具体的に定義します。

API概要

基本情報

  • API Gateway: REST API
  • プロトコル: HTTPS/TLS 1.2
  • データ形式: JSON
  • 文字エンコーディング: UTF-8

エンドポイント構成

https://{api-id}.execute-api.ap-northeast-1.amazonaws.com/{stage}/contact

特に言う事なし。

お問い合わせ作成API

エンドポイント詳細

基本情報

  • パス: /contact
  • メソッド: POST
  • CORS: 有効

お問い合わせ機能の詳細仕様を定義し、バリデーションとエラーハンドリングを明確にしています。

リクエスト仕様

Content-Type: application/json

リクエストボディ:

{
  "name": "string (必須)",
  "email": "string (必須)",
  "subject": "string (オプション)",
  "message": "string (必須)",
  "recaptchaToken": "string (オプション)"
}

フィールド詳細:

  • name: お名前（1-100文字）
  • email: メールアドレス（有効な形式）
  • subject: 件名（0-200文字、オプション）
  • message: メッセージ内容（1-2000文字）

レスポンス仕様

レスポンスはシンプルに以下の通りに設計します。

成功時（201 Created）:

{
  "success": true,
  "message": "Contact created successfully",
  "id": "2025-01-XX-XXXXXXXXX"
}

バリデーションエラー（400 Bad Request）:

{
  "success": false,
  "error": "Name, email, and message are required"
}

Lambda関数概要

実装するLambda関数

  1. API Handler Lambda: お問い合わせデータの受信・保存
  2. Notification Processor Lambda: 非同期通知処理
  3. Error Notification Lambda: エラー監視・通知

共通仕様

  • ランタイム: Node.js 20.x
  • ログ: CloudWatch Logs

詳細な実装は別記事「Lambda関数実装詳細」で解説

記事データ取得

実装方式

  • 静的JSONファイル: /latest-articles.json
  • 取得方法: フロントエンドから直接fetch
  • データ形式: Article[]配列

静的JSONファイルを活用した記事取得を実施し、CDNによる配信でパフォーマンスを最適化しています。

記事データ取得の実装方式

静的JSONファイルによる記事データ取得の仕組み。フロントエンドから直接fetchすることで、CDNによる高速配信を実現しています。

データ構造

interface Article {
  slug: string;
  title: string;
  date: string;
  tags: string[];
  description: string;
  thumbnail?: string;
  content: string;
  category: "portfolio" | "life";
}

お問い合わせ機能の実装

お問い合わせフォームの設計

お問い合わせ機能は、ユーザーが簡単に連絡を取れるように設計されています。

お問い合わせフォームの実装

お問い合わせフォームの実装。バリデーション機能とエラーハンドリングを組み合わせて、ユーザーフレンドリーな体験を提供しています。

機能設計の特徴

1. 非同期処理

  • 高速レスポンス: ユーザーへの即座のレスポンス
  • バックグラウンド処理: 通知処理の非同期実行
  • エラー分離: 通知処理の失敗がユーザー体験に影響しない

疎結合な設計にする事で、それぞれの処理に影響しないようにしています。

2. スケーラビリティ

  • サーバーレス: トラフィックに応じた自動スケール
  • 並行処理: 複数の通知処理を並行実行
  • リソース最適化: 使用量に応じた課金

なるべくお金をかけないようにサーバーレスに設計。

3. 監視・アラート

  • 統合監視: CloudWatchによる統合監視
  • リアルタイム通知: Discord Webhookによる即座の通知
  • 詳細ログ: 問題の早期発見と迅速な対応

詳細な実装と監視システムは別記事で解説

次のステップ

機能設計が完了したら、次のフェーズである運用設計に進みます。

運用設計では、デプロイ手順、監視設定、運用プロセスを具体的に定義していきます。

機能設計フェーズで意識したことは、料金と運用のコストを最低限にしつつ、堅牢でスケーラブルな機能を設計することです。

本当はユーザー目線でエクスペリエンスの良いものにしたかったのですが、個人運営なので妥協しちゃっています。