PR

AWS SAMでゼロから始めるフルスタックSaaS開発ガイド

2025.04.24

こんにちは！今回は、AWS Serverless Application Model (SAM) を使って、収益を生み出せるウェブサービスを構築する方法をご紹介します。特に「時間とコストを最小限に抑えながら最大の効果を得たい」という方に向けた内容です。

なぜAWS SAMのフルスタックテンプレートなのか？

AWS SAMのフルスタックテンプレートは、フロントエンドとバックエンドの両方を含む完全なウェブアプリケーションを簡単に構築できる優れた選択肢です。特に以下のメリットがあります：

  • サーバーレスでコスト効率が良い – 使った分だけ支払う料金体系
  • 自動スケーリング – トラフィックに応じて自動で拡張
  • 開発時間の短縮 – ボイラープレートコードが提供される
  • デプロイが簡単 – コマンド一つでデプロイ可能

始める前に準備するもの

  1. AWSアカウント
  2. AWS CLIのインストールと設定
  3. AWS SAM CLIのインストール
  4. Node.jsのインストール

ステップ1：プロジェクトの作成

まずはSAM CLIを使ってプロジェクトを作成します。ターミナルを開いて以下のコマンドを実行しましょう：

sam init

対話式の質問が表示されるので、以下のように選択します：

  1. テンプレートの選択: AWS Quick Start Templates
  2. テンプレートタイプ: 11 - Full Stack
  3. ランタイム: 2 - nodejs20.x

これで基本的なプロジェクト構造が生成されます。

ステップ2：プロジェクト構造を理解する

生成されたプロジェクトには以下のような構造があります：

your-project/
├── README.md
├── samconfig.toml       # SAMの設定ファイル
├── template.yaml        # インフラストラクチャの定義
├── frontend/            # フロントエンドコード
│   ├── package.json
│   └── src/
├── backend/             # バックエンドコード
│   ├── package.json
│   └── src/
└── events/              # テスト用イベント

ステップ3：バックエンドの開発

DynamoDBテーブルの設定

まずtemplate.yamlファイルを開き、データベースを定義します：

Resources:
  # ユーザーテーブルの定義
  UsersTable:
    Type: AWS::DynamoDB::Table
    Properties:
      BillingMode: PAY_PER_REQUEST  # 使用量に応じた課金
      AttributeDefinitions:
        - AttributeName: userId
          AttributeType: S
      KeySchema:
        - AttributeName: userId
          KeyType: HASH
      TableName: !Sub ${AWS::StackName}-Users

Lambda関数の開発

backend/srcディレクトリ内にAPIエンドポイントを作成します。例えば、ユーザー登録のLambda関数を作成しましょう：

// backend/src/register.js
const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();
const { v4: uuidv4 } = require('uuid');

exports.handler = async (event) => {
  try {
    const body = JSON.parse(event.body);
    const { email, name } = body;
    
    const userId = uuidv4();
    
    const params = {
      TableName: process.env.USERS_TABLE,
      Item: {
        userId,
        email,
        name,
        createdAt: new Date().toISOString()
      }
    };
    
    await dynamodb.put(params).promise();
    
    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'  // CORS対応
      },
      body: JSON.stringify({ userId, message: '登録成功！' })
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

ステップ4：フロントエンドの開発

フロントエンドはReactを使って開発します。まず必要なパッケージをインストールします：

cd frontend
npm install react react-dom react-router-dom axios

ユーザー登録フォームの作成

// frontend/src/components/RegisterForm.js
import React, { useState } from 'react';
import axios from 'axios';

function RegisterForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post(process.env.REACT_APP_API_URL + '/register', {
        email,
        name
      });
      setMessage('登録成功！ユーザーID: ' + response.data.userId);
      setEmail('');
      setName('');
    } catch (error) {
      setMessage('エラー: ' + error.message);
    }
  };
  
  return (
    <div className="register-form">
      <h2>新規ユーザー登録</h2>
      {message && <p className="message">{message}</p>}
      <form onSubmit={handleSubmit}>
        <div>
          <label>メールアドレス:</label>
          <input 
            type="email" 
            value={email} 
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label>名前:</label>
          <input 
            type="text" 
            value={name} 
            onChange={(e) => setName(e.target.value)}
            required
          />
        </div>
        <button type="submit">登録</button>
      </form>
    </div>
  );
}

export default RegisterForm;

ステップ5：APIエンドポイントの設定

template.yamlファイルにAPIエンドポイントを追加します：

  # API Gatewayの定義
  ApiGateway:
    Type: AWS::Serverless::Api
    Properties:
      StageName: prod
      Cors:
        AllowMethods: "'GET,POST,PUT,DELETE'"
        AllowHeaders: "'Content-Type'"
        AllowOrigin: "'*'"

  # 登録用Lambda関数
  RegisterFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: backend/
      Handler: src/register.handler
      Runtime: nodejs20.x
      Environment:
        Variables:
          USERS_TABLE: !Ref UsersTable
      Policies:
        - DynamoDBCrudPolicy:
            TableName: !Ref UsersTable
      Events:
        Register:
          Type: Api
          Properties:
            RestApiId: !Ref ApiGateway
            Path: /register
            Method: post

ステップ6：ビルドとデプロイ

プロジェクトをビルドしてデプロイします：

# プロジェクトのルートディレクトリに戻る
cd ..

# ビルド
sam build

# デプロイ（初回は--guidedオプションでウィザード形式で進める）
sam deploy --guided

デプロイが完了すると、APIのエンドポイントURLが表示されます。このURLをフロントエンドの環境変数として設定しましょう。

ステップ7：収益化モデルの実装

サービスに収益モデルを組み込むには、以下のような機能を追加します：

サブスクリプション管理システム

Stripeなどの決済サービスを統合して、月額課金モデルを実装できます。

// backend/src/createSubscription.js
const AWS = require('aws-sdk');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event) => {
  try {
    const body = JSON.parse(event.body);
    const { userId, paymentMethodId, planId } = body;
    
    // ユーザー情報の取得
    const userResult = await dynamodb.get({
      TableName: process.env.USERS_TABLE,
      Key: { userId }
    }).promise();
    
    const user = userResult.Item;
    
    // Stripeカスタマー作成または取得
    let customerId = user.stripeCustomerId;
    if (!customerId) {
      const customer = await stripe.customers.create({
        email: user.email,
        name: user.name,
        payment_method: paymentMethodId
      });
      customerId = customer.id;
      
      // ユーザー情報更新
      await dynamodb.update({
        TableName: process.env.USERS_TABLE,
        Key: { userId },
        UpdateExpression: 'set stripeCustomerId = :customerId',
        ExpressionAttributeValues: {
          ':customerId': customerId
        }
      }).promise();
    }
    
    // サブスクリプション作成
    const subscription = await stripe.subscriptions.create({
      customer: customerId,
      items: [{ plan: planId }],
      expand: ['latest_invoice.payment_intent']
    });
    
    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify({
        subscriptionId: subscription.id,
        status: subscription.status
      })
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

ステップ8：分析と改善

サービスの利用状況を分析するために、CloudWatchでログやメトリクスを設定することをお勧めします。これにより、ユーザー行動を理解し、サービスを改善できます。

収益化までのロードマップ

  1. 第1フェーズ (1-2ヶ月目)
    • MVPの開発とデプロイ
    • 初期ユーザーの獲得
    • フィードバックの収集
  2. 第2フェーズ (3-4ヶ月目)
    • 有料プランの導入
    • マーケティングの開始
    • 機能の追加と改善
  3. 第3フェーズ (5-6ヶ月目)
    • ユーザーベースの拡大
    • エンタープライズ向け機能の追加
    • アフィリエイトプログラムの開始
  4. 第4フェーズ (7-12ヶ月目)
    • APIマーケットプレイスの開設
    • ホワイトラベルソリューションの提供
    • 国際展開

コスト最適化のヒント

  1. Lambda関数の最適化
    • コールドスタート時間を短縮するために関数を軽量に保つ
    • メモリ設定を最適化する
  2. DynamoDBの効率的な利用
    • 適切なパーティションキーとソートキーの選択
    • GSIの使用を最小限に抑える
  3. キャッシュ戦略
    • CloudFrontを使ってフロントエンドをキャッシュ
    • API Gateway Response Cachingの活用

まとめ

AWS SAMのフルスタックテンプレートを使えば、初心者でも短期間で収益性のあるSaaSを構築できます。サーバーレスアーキテクチャの採用により、初期コストを抑えながらもスケーラブルなサービスを提供できるのが大きな魅力です。

このガイドを参考に、ぜひあなた自身のSaaSサービスを立ち上げてみてください。最初は小さく始めて、ユーザーの反応を見ながら段階的に成長させていくのがおすすめです。

何か質問や不明点があれば、コメント欄でお気軽にお聞きください！

参考リソース

コメント

タイトルとURLをコピーしました