はじめに
今回は、こちらの記事で作成したフロントエンドアプリケーションに、
バックエンド(API Gateway + Lambda)を追加でデプロイしていきたいと思います。
前回実装したバックエンドのソースコードはこちら。
今回新規作成するもの:
・IAM Role(Lambda実行用)
・Lambda関数
・API Gateway HTTP API
・CloudFrontのOrigin(API Gateway)+ Behavior(/api/*)
要件
HTTP API(v2): REST APIより低レイテンシ・低コスト
arm64/Graviton2: x86_64比で20%安価かつ高速
Node.js 22.x: 現行LTS、Lambda公式サポート最新
CachingDisabled policy: APIレスポンスはキャッシュしない
AllViewerExceptHostHeader origin request policy: Authorizationを含む全ヘッダを転送(Host だけは置換)
Lambda最小権限 IAM Role: CloudWatch Logs書き込みのみ
Lambda環境変数: NUXT_LINE_LOGIN_CHANNEL_IDのみ(最小限)
インフラ構成図
操作の流れ
- ローカルでビルド成果物をzip化する
- IAM Roleを作成(Lambda実行用)
- Lambda関数を作成
- コードをアップロード(Lambda)
- 環境変数を設定(Lambda)
- 一般設定の編集(Lambda)
- API Gateway HTTP APIを作成
- CloudFrontにAPI Gatewayを追加
1. ローカルでビルド成果物をzip化する
プロジェクトのルートディレクトリに移動し、以下のコマンドを実行して依存関係をインストールします。
pnpm install --frozen-lockfile
今回はserver側が必要なので、package.jsonのscripts.buildを実行します。
NUXT_PUBLIC_LIFF_ID=<LIFF_ID> pnpm build
.output/server/の中身をzip化します(フォルダごとではなく中身のみ)
以下のコマンドを順に実行します。
cd .output/server
# 現在ディレクトリの全ファイルを再帰的に圧縮し、「2階層上」にZIPを生成
zip -r ../../bff-lambda.zip .
cd ../..
# ZIPサイズ確認
ls -lh bff-lambda.zip
※Lambda ZIP upload制限である「50MB」以下であることを確認します。(解凍後250MB)
2. IAM Roleを作成(Lambda実行用)
今回作成するLambda関数は、外部AWSリソース(DynamoDB/S3/Secrets Manager等)にアクセスしないため、ログ出力用の「CloudWatch Logs」への書き込みだけ許可する最小権限ロールを作成します。
※将来DynamoDBを使うなら、その時点で別ポリシーを足す(最小権限の原則)
※LINE認証でのJWKSフェッチはhttps://api.line.meへのHTTPS外部通信のためIAM権限不要
AWSコンソール >> IAM >> アクセス管理 >> ロール >> 「ロールを作成」を押します。
① 「信頼されたエンティティタイプ」は「AWS のサービス」を選択します。
② 「サービスまたはユースケース」は「Lambda」を選択します。
③ 「ユースケース」は「Lambda」を選択します。
④ 「次へ」を押します。
① 許可ポリシーの検索ボックスにAWSLambdaBasicExecutionRoleと入力します。
※このポリシーはCloudWatch Logsにログを書き込めるようにするための基本的な設定のされたAWS 管理ポリシーです
② 「AWSLambdaBasicExecutionRole」を選択します。
③ 「次へ」を押します。
ロール名(例:<project-name-liff-bff-lambda-role>)
とタグを追加して「ロールを作成」を押します。
3. Lambda関数を作成
AWSコンソール >> Lambda >> 関数 >> 「関数を作成」を押します。
① 「一から作成」を選択します。
② 「関数名」を入力します(例:<project-name>-liff-bff)
③ 「ランタイム」を選択します。
「カスタム設定」>>「その他の設定」にて、
① ARM64 アーキテクチャをONにします。
② カスタム実行ロールをONにし、先程作成したロールを選択します。
③ タグを追加します。
「関数を作成」を押します。
4. コードをアップロード(Lambda)
作成したLambda関数にて、「アップロード元」>>「.zip ファイル」を選択します。
作成したzipファイルをアップロードします。
5. 環境変数を設定(Lambda)
作成したLambda関数にて、
「設定」>>「環境変数」>>「編集」を押します。
「環境変数の追加」を押し、
- NUXT_LINE_LOGIN_CHANNEL_ID:
- NODE_ENV: production
を設定します。
6. 一般設定の編集(Lambda)
作成したLambda関数にて、
「設定」>>「一般設定」>>「編集」を押します。
メモリを128MB→256MBに増やします。
(メモリを増やすことでCPU性能が上がり、処理時間が短くなるためコスト効率も良くなります)
タイムアウトを3秒→10秒に増やします。
(JWKSフェッチが遅くても足りる値で、API Gateway側の上限30秒以下に設定します)
7. API Gateway HTTP APIを作成
AWSコンソール >> API Gateway >> API >> 「APIを作成」を押します。
「API タイプ」は「HTTP API」を選択します。
① 「API 名」を入力します(例:<project-name>-liff-bff-api)
② 「IP アドレスのタイプ」は「デュアルスタック」を選択します。
③ 「統合」で「Lambda」を選択します。
④ 「AWS リージョン」を選択します。
⑤ 作成したLambda関数を選択します。
⑥ バージョンは「2.0」を選択します。
⑦ 「次へ」を押します。
ルートを設定にて、
① 「メソッド」は「ANY」を選択します。
② 「リソースパス」は/{proxy+}を入力します。
{proxy+}とすることで/api/users/meも/api/healthも将来追加するエンドポイントも全部Lambda側(Nitroルーター)でハンドリングできるようになります。
③ 「統合ターゲット」は作成したLambda関数を選択します。
④ 「次へ」を押します。
「ステージを定義 - オプション」はデフォルトのまま「次へ」を押します。
$defaultステージにするとURLに/dev/のようなプレフィックスが入らなくなります。
今回はCloudFront経由で同一オリジン扱いになるためCORS設定は不要です。
(直接API Gatewayを叩いて検証する場合のみ別途設定)
必要に応じて、AWSコンソール >> API Gateway >> 作成したAPI >> Protect >> Throttling
からスロットリング設定を行います。
8. CloudFrontにAPI Gatewayを追加
既存のDistributionにOriginとBehaviorを1つずつ足していきます。
CloudFront >> ディストリビューション >> 既存のDistribution画面から、
「オリジン」>>「オリジンを作成」を押します。
「Origin domain」は作成したAPI Gatewayを選択します。
わかりやすい名前を設定します。
その他の設定はデフォルトのまま「オリジンを作成」を押します。
CloudFront >> ディストリビューション >> 既存のDistribution画面から、
「ビヘイビア」>>「ビヘイビアを作成」を押します。
① 「パスパターン」に「/api/*」を選択します。
② 「オリジンとオリジングループ」には、先程作成したオリジンを指定します。
「オリジンリクエストポリシー」に「AllViewerExceptHostHeader」を設定します。
(Hostをそのまま渡すことによるエラー:custom domain mismatchなどを防ぎます)
その他はデフォルトのまま「Create behavior」を押します。
「/api/」のパスパターンがデフォルト「」よりも上にあることを確認します。
ディストリビューションのデプロイが完了するのを待ちます。
動作確認
ディストリビューションのurl(~.cloudfront.net)をエンドポイントURLに設定したLIFF URL(例:https://liff.line.me/2001234567-asdfghjk)にアクセスし、LINE_USER_IDが表示されていれば成功です!
バックエンドの更新(手動)
ソースコードを更新後、再度pnpm buildした後zipファイルを生成し、アップロードすれば完了です。
通常は数秒程度で反映されますが、実務では「Lambdaエイリアス」による切り替えが推奨されているため、それを踏まえて次回の記事でIaC化してみたいと思います。




















