PR

【第5回】デプロイと収益化編：AWS/VercelへのデプロイとStripe連携

【第5回】デプロイと収益化編：AWS/VercelへのデプロイとStripe連携

はじめに：あなたのサービスを、世界に公開する日

第4回まで、本当にお疲れ様でした。私たちは、独自の知識を持ち、外部ツールを使いこなすAIエージェントのバックエンドと、快適なチャットUIを持つフロントエンドを開発してきました。ローカル環境では、もうあなたのアプリケーションは完璧に動作しているはずです。

シリーズ最終回となる今回は、このアプリケーションに命を吹き込む最後の、そして最もエキサイティングなステップです。開発したサービスを世界中に公開（デプロイ）し、収益化の仕組み（サブスクリプション決済）を組み込んでいきます。

具体的には、以下のモダンなサーバーレス構成を採用します。

  • フロントエンド (Next.js): Vercelにデプロイ
  • バックエンド (FastAPI): AWS Lambdaにデプロイ
  • 決済: Stripeと連携

この最終回を乗り越えれば、あなたは単なる開発者ではなく、自らの手でサービスを収益化できる「プロダクト開発者」へと進化を遂げます。さあ、始めましょう。

1. フロントエンドのデプロイ：Vercelで世界に公開（所要時間5分）

Next.jsで開発されたフロントエンドのデプロイは、開発元であるVercelを使えば驚くほど簡単です。

  1. GitHubにリポジトリを作成: フロントエンドのコードをGitHubにプッシュします。
  2. Vercelにサインアップ: GitHubアカウントでサインアップします。
  3. プロジェクトのインポート: Vercelのダッシュボードから、先ほど作成したGitHubリポジトリをインポートします。
  4. 環境変数の設定: バックエンドAPIのURLなど、必要な環境変数をVercelのプロジェクト設定画面で入力します。
  5. デプロイ！: インポートが完了すると、Vercelは自動でビルドとデプロイを開始します。数分後には、https://your-project-name.vercel.app のようなURLであなたのアプリケーションが世界中に公開されます。

これだけです。Vercelは、GitHubのmainブランチにプッシュがあるたびに、自動で再デプロイを行ってくれます。

2. バックエンドのデプロイ：Serverless FrameworkでAWS Lambdaへ

FastAPIで構築したバックエンドは、AWS Lambdaにデプロイします。リクエストに応じて起動するため、コストを最小限に抑えられます。ここでは、設定ファイルベースでインフラを管理できるServerless Frameworkを利用します。

Step 1: Serverless Frameworkのセットアップ

# Serverless Frameworkをインストール
npm install -g serverless
# AWSの認証情報を設定 (IAMユーザーの作成と設定が必要です)
serverless config credentials --provider aws --key YOUR_ACCESS_KEY --secret YOUR_SECRET_KEY

Step 2: serverless.yml の作成

プロジェクトのルートに、Lambdaの構成を定義するserverless.ymlを作成します。

# serverless.yml
service: llm-rag-api
frameworkVersion: '3'
provider:
  name: aws
  runtime: python3.11
  region: ap-northeast-1 # 東京リージョン
functions:
  main:
    handler: main.handler # main.pyのappインスタンスをhandlerとして指定
    url: true # Lambda Function URLを有効にする
    events:
      - httpApi: '*',
plugins:
  - serverless-python-requirements
  - serverless-wsgi
custom:
  wsgi:
    app: main.app

Step 3: デプロイ

準備が整ったら、コマンド一発でデプロイします。

sls deploy

デプロイが完了すると、ターミナルにAPIのエンドポイントURLが出力されます。このURLを、Vercelの環境変数に設定すれば、フロントエンドとバックエンドの連携は完了です。

3. Stripe連携：サブスクリプション決済を組み込む

最後に、収益化の要であるStripe決済を組み込みます。

  1. Stripeで商品と価格を登録:
    • Stripeのダッシュボードにログインし、「商品」メニューから新しい商品を作成します。
    • 「価格設定モデル」で「標準の価格設定（サブスクリプション）」を選択し、月額料金（例: 980円/月）を設定します。作成された価格ID（price_...）を控えておきます。
  2. バックエンドの実装:
    • 第4回で作成したバックエンドに、Stripe Checkoutセッションを作成するエンドポイントと、決済完了を通知するWebhookエンドポイントを実装します。（コードは第4回の記事を参照）
  3. フロントエンドの実装:
    • ユーザーが「登録」ボタンをクリックしたら、バックエンドの/api/create-checkout-sessionを呼び出し、返されたURLにリダイレクトさせます。
  4. Webhookの設定:
    • Stripeのダッシュボードで、バックエンドに作成したWebhookエンドポイントのURLを登録します。これにより、決済が成功するとStripeからLambdaに通知が届き、ユーザーの権限を更新できます。

まとめ：あなたはもう「プロダクト開発者」だ

全5回にわたる長い旅、お疲れ様でした。このシリーズを通じて、あなたは単なるアイデアを、モダンな技術スタックを使って形にし、世界に公開し、そして収益化するまでの全工程を経験しました。

  • 全体像を理解し、技術選定を行った（第1回）
  • RAGによる知識を持つバックエンドを構築した（第2回）
  • Vercel AI SDKで快適なフロントエンドを構築した（第3回）
  • Function Callingで行動できるエージェントに進化した（第4回）
  • サービスを世界に公開し、収益化の仕組みを実装した（今回）

あなたはもう、仕様書通りにコードを書くだけのエンジニアではありません。自らの手で価値を創造し、それをビジネスに変える力を持った「プロダクト開発者」です。

このシリーズで得た知識と経験を元に、ぜひあなたのオリジナルなアイデアを形にし、新たな挑戦を始めてみてください。あなたの成功を心から応援しています。

関連記事
– 【第4回】Function Calling実践編：外部APIと連携する自律型AIエージェント
– 副業で始める「SaaS開発」：アイデア検証からMVP構築、収益化までのロードマップ

コメント

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