このドキュメントは、BeanRatioをAWS Lambda + Lambda Function URLsでWebアプリとしてデプロイする手順を説明します。
┌──────────────┐
│ ユーザー │ (iPhone / Android / PC)
└──────┬───────┘
│ (Token認証)
┌──────▼────────────────────────┐
│ Lambda Function URL │
│ - 静的ファイル配信 (HTML/CSS/JS)│
│ - API処理 │
│ - トークン認証 │
└──────┬────────────────────────┘
│
┌──────▼────────┐
│ S3 (Data) │ beans.json, logs.json
└───────────────┘
- Lambda Function URLs: API Gateway不要でシンプル
- 全アクセス認証: 静的ファイル含め全てのリクエストでトークン認証
- 動的設定注入: 環境変数から設定を動的に注入
- モバイル対応: iPhone Safari / Android Chrome で動作確認済み
- すべてのリクエストにトークンが必須（HTML/CSS/JS含む）
- トークンはURLパラメータ:
?token=xxx - 環境変数で一元管理
- Lambda実行時に動的に設定を注入
BeanRatio/
├── beanratio/ # 既存のCLIアプリ
├── lambda/ # Lambda用コード
│ ├── functions/
│ │ └── api_handler.py # メインハンドラー
│ ├── shared/
│ │ ├── models.py # データモデル
│ │ └── storage_s3.py # S3ストレージ
│ ├── tmp/ # 静的ファイル（デプロイ時に生成）
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── app.js
│ │ └── favicon.svg
│ └── requirements.txt
├── web/ # フロントエンドソース（編集用）
│ ├── index.html
│ ├── style.css
│ ├── app.js # プレースホルダー（環境変数で置換）
│ └── favicon.svg
├── deploy/ # デプロイスクリプト
│ ├── deploy.sh # 初回デプロイ
│ ├── update-code.sh # コード更新
│ ├── enable-auth.sh # 認証有効化（手動実行用）
│ └── deployment-info.txt # デプロイ情報（.gitignore済み）
└── Taskfile.yml # タスクランナー設定
-
AWS CLI がインストールされている
aws --version
-
AWS認証情報が設定されている
aws configure list
-
必要な権限
- Lambda作成・更新（
lambda:CreateFunction,lambda:UpdateFunctionCode） - S3バケット作成・管理（
s3:CreateBucket,s3:PutObject,s3:GetObject） - IAM ロール作成（
iam:CreateRole,iam:AttachRolePolicy） - Lambda Function URL作成（
lambda:CreateFunctionUrlConfig）
- Lambda作成・更新（
-
Task コマンド（オプション）
# macOS/Linux brew install go-task/tap/go-task # または https://taskfile.dev/installation/
# Task使用の場合
task deploy
# または直接実行
bash deploy/deploy.sh実行すると以下が自動で行われます：
- データ保存用S3バケット作成 (
beanratio-data) - Lambda実行用IAMロール作成
- Lambda Layer作成（boto3依存関係）
- 静的ファイルを
web/からlambda/tmp/にコピー - Lambda関数デプロイ
- Lambda Function URL作成
- 環境変数設定（
FUNCTION_URL,AUTH_TOKEN）
デプロイ完了後、以下の情報が表示されます：
🌐 Web App URL:
https://xxxxx.lambda-url.ap-northeast-1.on.aws?token=your-token-here
🔐 Auth Token: your-token-here
ブラウザで表示されたURLを開きます。
- Safariで表示されたURLを開く
- 「共有」→「ホーム画面に追加」
- アプリのようにアクセス可能
- Chromeで表示されたURLを開く
- メニュー→「ホーム画面に追加」
Lambda関数やフロントエンドのコードを変更した場合：
# Task使用の場合
task deploy-update
# または直接実行
bash deploy/update-code.sh更新される内容：
web/→lambda/tmp/にコピー- Lambda関数コードを更新（function.zip）
- 既存の環境変数・認証設定は維持
-
web/ディレクトリのファイルを編集
# 例: JavaScriptを編集 vim web/app.js -
デプロイ
task deploy-update
-
動作確認 ブラウザでWebアプリをリロード
-
lambda/functions/ または lambda/shared/ を編集
# 例: APIハンドラーを編集 vim lambda/functions/api_handler.py -
デプロイ
task deploy-update
lambda/tmp/はデプロイ時に自動生成される- 編集しても上書きされるため、web/ を編集すること
deploy/deploy.sh と deploy/update-code.sh の以下の行を編集：
REGION="ap-northeast-1" # 東京リージョン（デフォルト）# 新しいトークンを生成
NEW_TOKEN=$(openssl rand -hex 16)
# Lambda環境変数を更新
aws lambda update-function-configuration \
--function-name beanratio-api \
--environment Variables="{S3_BUCKET_NAME=beanratio-data,AUTH_TOKEN=$NEW_TOKEN,FUNCTION_URL=https://your-function-url}" \
--region ap-northeast-1
# コードを再デプロイ（app.jsにトークンを注入）
task deploy-update-
ソースコード（web/app.js）
const API_BASE_URL = 'YOUR_LAMBDA_FUNCTION_URL'; const AUTH_TOKEN = 'YOUR_AUTH_TOKEN';
-
Lambda実行時
- Lambda関数が
app.jsを読み込む - 環境変数から値を取得
- プレースホルダーを置換
- ブラウザに返す
- Lambda関数が
-
ブラウザが受け取るコード
const API_BASE_URL = 'https://xxxxx.lambda-url.ap-northeast-1.on.aws'; const AUTH_TOKEN = 'your-token-here';
- ✅ ソースコードにトークンを書かない（セキュリティ）
- ✅ 環境変数を変更するだけで設定変更可能
- ✅ GitHubにコミット可能
すべてのリクエストに ?token=xxx パラメータが必要です。
GET /beans?token=xxx- 全ての豆を取得POST /beans?token=xxx- 新しい豆を追加GET /beans/{name}?token=xxx- 特定の豆の詳細を取得PUT /beans/{name}?token=xxx- 豆の情報を更新DELETE /beans/{name}?token=xxx- 豆を削除PUT /beans/{name}/favorite?token=xxx- お気に入りを設定
GET /logs?bean_name={name}&token=xxx- ログを取得POST /logs?token=xxx- 新しいログを追加DELETE /logs/{bean_name}/{datetime}?token=xxx- 特定のログを削除DELETE /logs?token=xxx- 全ログを削除
GET /recommend/{name}?water={ml}&token=xxx- 推奨レシオを取得
GET /?token=xxx- index.htmlGET /style.css?token=xxx- CSSGET /app.js?token=xxx- JavaScriptGET /favicon.svg?token=xxx- アイコン
# cURLでAPIを叩く
curl "https://xxxxx.lambda-url.ap-northeast-1.on.aws/beans?token=your-token-here"
# トークンなしだとエラー
curl "https://xxxxx.lambda-url.ap-northeast-1.on.aws/beans"
# => {"error": "Unauthorized: Invalid or missing authentication token"}既存のCLIアプリからWebアプリにデータを移行する場合：
# ローカルのデータをS3にアップロード
DATA_BUCKET="beanratio-data"
aws s3 cp data/beans.json s3://$DATA_BUCKET/beanratio/beans.json
aws s3 cp data/logs.json s3://$DATA_BUCKET/beanratio/logs.json個人使用の場合、完全無料で運用できます：
- Lambda: 月100万リクエスト + 40万GB秒まで無料
- Lambda Function URLs: 無料
- S3: 5GBまで無料
- データ転送: 月100GBまで無料
想定使用量（1日10回記録）：
- リクエスト: 約300回/月
- 実行時間: 約30秒/月
- ストレージ: < 1MB
- 月額コスト: $0.00
- すべてのリクエストでトークンをチェック
- 静的ファイル（HTML/CSS/JS）もトークン必須
- トークンなしは401エラー
- HTMLに含まれるリソースURLにも自動的にトークンを追加
- ✅
deployment-info.txtは.gitignore済み - ✅ ソースコードにはプレースホルダーのみ
- ✅ 環境変数で管理
⚠️ URLをブックマークする際は、誰にも共有しないこと
# 機密情報
deploy/deployment-info.txt # 認証トークン・URL
data/ # 個人データ
# ビルドアーティファクト
lambda/function.zip
lambda/layer.zip
lambda/layer/
lambda/tmp/
# ローカル設定
.claude/
原因: JavaScriptの互換性問題
解決済み: オプショナルチェイニング(?.)を削除し、古いiOSでも動作するように修正済み
原因: CSSが読み込まれていない
確認:
# CSSが正しく配信されているか確認
curl "https://your-url?token=xxx" | grep style.css
# => href="style.css?token=xxx" が含まれているか原因: 認証トークンが間違っている
解決:
deploy/deployment-info.txtでトークンを確認- URLに正しいトークンが含まれているか確認
aws lambda update-function-configuration \
--function-name beanratio-api \
--timeout 60 \
--region ap-northeast-1# 現在の環境変数を確認
aws lambda get-function-configuration \
--function-name beanratio-api \
--region ap-northeast-1 \
--query 'Environment.Variables'
# コードを再デプロイ
task deploy-update# デプロイ
task deploy # 初回デプロイ
task deploy-update # コード更新
task deploy-info # デプロイ情報表示
# ローカル開発（LocalStack使用）
task debug # デバッグサーバー起動
task debug-test # デバッグサーバーテスト
task debug-stop # デバッグサーバー停止
# CLI（既存機能）
task add-bean -- "豆の名前"
task log -- "豆の名前"
task list
task recommend -- "豆の名前" 250デプロイしたリソースを削除する場合：
FUNCTION_NAME="beanratio-api"
DATA_BUCKET="beanratio-data"
REGION="ap-northeast-1"
# Lambda関数削除（Function URLも自動削除）
aws lambda delete-function --function-name $FUNCTION_NAME --region $REGION
# S3バケット削除（データも削除されるので注意！）
aws s3 rb s3://$DATA_BUCKET --force
# Lambda Layer削除
LAYER_VERSION=$(aws lambda list-layer-versions \
--layer-name beanratio-dependencies \
--region $REGION \
--query 'LayerVersions[0].Version' \
--output text)
aws lambda delete-layer-version \
--layer-name beanratio-dependencies \
--version-number $LAYER_VERSION \
--region $REGION
# IAMロール削除
aws iam detach-role-policy --role-name beanratio-lambda-role \
--policy-arn arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
aws iam delete-role-policy --role-name beanratio-lambda-role --policy-name S3Access
aws iam delete-role --role-name beanratio-lambda-role既存のCLIアプリは影響を受けません：
- CLIアプリ:
data/ディレクトリのJSON使用 - Webアプリ: S3のJSON使用
両方を併用する場合は、データを手動で同期する必要があります。
- カスタムドメイン: Route 53でドメイン設定
- HTTPS対応: CloudFrontを追加（Function URLは既にHTTPS）
- PWA化: Service Workerでオフライン対応
- 通知機能: SNS/SESでリマインダー追加
問題が発生した場合は、以下を確認してください：
-
Lambda関数のログ
aws logs tail /aws/lambda/beanratio-api --follow --region ap-northeast-1
-
デプロイ情報
cat deploy/deployment-info.txt
-
環境変数
aws lambda get-function-configuration \ --function-name beanratio-api \ --region ap-northeast-1
-
動作確認
# トークン付きでアクセス curl "https://your-url?token=xxx"