0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【API Gateway + Lambda】でLIFFアプリを公開する(AWSコンソールから手動)

0
Posted at

はじめに

今回は、こちらの記事で作成したフロントエンドアプリケーションに、

バックエンド(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のみ(最小限)

インフラ構成図

infra.png

操作の流れ

  1. ローカルでビルド成果物をzip化する
  2. IAM Roleを作成(Lambda実行用)
  3. Lambda関数を作成
  4. コードをアップロード(Lambda)
  5. 環境変数を設定(Lambda)
  6. 一般設定の編集(Lambda)
  7. API Gateway HTTP APIを作成
  8. CloudFrontにAPI Gatewayを追加

1. ローカルでビルド成果物をzip化する

プロジェクトのルートディレクトリに移動し、以下のコマンドを実行して依存関係をインストールします。

zsh
pnpm install --frozen-lockfile

今回はserver側が必要なので、package.jsonscripts.buildを実行します。

zsh
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」を選択します。
④ 「次へ」を押します。

SCR-20260521-pohb.png

① 許可ポリシーの検索ボックスにAWSLambdaBasicExecutionRoleと入力します。
※このポリシーはCloudWatch Logsにログを書き込めるようにするための基本的な設定のされたAWS 管理ポリシーです
② 「AWSLambdaBasicExecutionRole」を選択します。
③ 「次へ」を押します。

SCR-20260521-ppcs.png

ロール名(例:<project-name-liff-bff-lambda-role>
とタグを追加して「ロールを作成」を押します。

3. Lambda関数を作成

AWSコンソール >> Lambda >> 関数 >> 「関数を作成」を押します。

① 「一から作成」を選択します。
② 「関数名」を入力します(例:<project-name>-liff-bff
③ 「ランタイム」を選択します。

SCR-20260521-ptyr.png

「カスタム設定」>>「その他の設定」にて、
① ARM64 アーキテクチャをONにします。
② カスタム実行ロールをONにし、先程作成したロールを選択します。
③ タグを追加します。
「関数を作成」を押します。

SCR-20260521-puqx.png

4. コードをアップロード(Lambda)

作成したLambda関数にて、「アップロード元」>>「.zip ファイル」を選択します。

SCR-20260521-pwct.png

作成したzipファイルをアップロードします。

SCR-20260521-pwvl.png

5. 環境変数を設定(Lambda)

作成したLambda関数にて、
「設定」>>「環境変数」>>「編集」を押します。

SCR-20260521-pxso.png

「環境変数の追加」を押し、

  • NUXT_LINE_LOGIN_CHANNEL_ID:
  • NODE_ENV: production

を設定します。

SCR-20260521-pyyb.png

6. 一般設定の編集(Lambda)

作成したLambda関数にて、
「設定」>>「一般設定」>>「編集」を押します。

メモリを128MB→256MBに増やします。
(メモリを増やすことでCPU性能が上がり、処理時間が短くなるためコスト効率も良くなります)

タイムアウトを3秒→10秒に増やします。
(JWKSフェッチが遅くても足りる値で、API Gateway側の上限30秒以下に設定します)

SCR-20260521-qcen.png

7. API Gateway HTTP APIを作成

AWSコンソール >> API Gateway >> API >> 「APIを作成」を押します。

「API タイプ」は「HTTP API」を選択します。

SCR-20260521-qdth.png

① 「API 名」を入力します(例:<project-name>-liff-bff-api
② 「IP アドレスのタイプ」は「デュアルスタック」を選択します。
③ 「統合」で「Lambda」を選択します。
④ 「AWS リージョン」を選択します。
⑤ 作成したLambda関数を選択します。
⑥ バージョンは「2.0」を選択します。
⑦ 「次へ」を押します。

SCR-20260521-qfbo.png

ルートを設定にて、
① 「メソッド」は「ANY」を選択します。
② 「リソースパス」は/{proxy+}を入力します。
{proxy+}とすることで/api/users/me/api/healthも将来追加するエンドポイントも全部Lambda側(Nitroルーター)でハンドリングできるようになります。
③ 「統合ターゲット」は作成したLambda関数を選択します。
④ 「次へ」を押します。

SCR-20260521-qgts.png

「ステージを定義 - オプション」はデフォルトのまま「次へ」を押します。
$defaultステージにするとURLに/dev/のようなプレフィックスが入らなくなります。

SCR-20260521-qiae.png

今回はCloudFront経由で同一オリジン扱いになるためCORS設定は不要です。
(直接API Gatewayを叩いて検証する場合のみ別途設定)

SCR-20260521-qiow.png

必要に応じて、AWSコンソール >> API Gateway >> 作成したAPI >> Protect >> Throttling
からスロットリング設定を行います。

8. CloudFrontにAPI Gatewayを追加

既存のDistributionにOriginとBehaviorを1つずつ足していきます。

CloudFront >> ディストリビューション >> 既存のDistribution画面から、
「オリジン」>>「オリジンを作成」を押します。

SCR-20260521-qrhx.png

「Origin domain」は作成したAPI Gatewayを選択します。
わかりやすい名前を設定します。
その他の設定はデフォルトのまま「オリジンを作成」を押します。

SCR-20260521-qtdv.png

CloudFront >> ディストリビューション >> 既存のDistribution画面から、
「ビヘイビア」>>「ビヘイビアを作成」を押します。

SCR-20260521-qufo.png

① 「パスパターン」に「/api/*」を選択します。
② 「オリジンとオリジングループ」には、先程作成したオリジンを指定します。

SCR-20260521-qvkh.png

「オリジンリクエストポリシー」に「AllViewerExceptHostHeader」を設定します。
(Hostをそのまま渡すことによるエラー:custom domain mismatchなどを防ぎます)
その他はデフォルトのまま「Create behavior」を押します。

SCR-20260521-qwbf.png

「/api/」のパスパターンがデフォルト「」よりも上にあることを確認します。

SCR-20260521-qxqo.png

ディストリビューションのデプロイが完了するのを待ちます。

動作確認

ディストリビューションのurl(~.cloudfront.net)をエンドポイントURLに設定したLIFF URL(例:https://liff.line.me/2001234567-asdfghjk)にアクセスし、LINE_USER_IDが表示されていれば成功です!

バックエンドの更新(手動)

ソースコードを更新後、再度pnpm buildした後zipファイルを生成し、アップロードすれば完了です。
通常は数秒程度で反映されますが、実務では「Lambdaエイリアス」による切り替えが推奨されているため、それを踏まえて次回の記事でIaC化してみたいと思います。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?