1
0

More than 3 years have passed since last update.

ServerlessFrameworkを利用したLambdaでデバッグを実施する。

Posted at

記事作成に当たって

最近、Serverless Frameworkを利用してLambdaにNode.jsをデプロイしている。Serverless Frameworkはテンプレートも充実してるし、CI/CDの面でも優れているのでなかなか便利。だけど、デバッグのやり方がわからなくて困っていた。どうにか、簡単にデバッグをできないかなぁと思って、試行錯誤する中でデバッグ環境ができあがったので、記事にして共有します。

構築時の環境情報

端末:Mac
エディタ:VsCode
node:v14.17.4(versionが古いと)
npm:7.20.5

パッケージの環境構築

packageのインストール
~/develop/study/serverless $ serverless create -t aws-nodejs-typescript -n debug_lambda -p debug_lambda
Serverless: Generating boilerplate...
Serverless: Generating boilerplate in "/Users/kawamurakouji/develop/study/serverless/debug_lambda"
 _______                             __
|   _   .-----.----.--.--.-----.----|  .-----.-----.-----.
|   |___|  -__|   _|  |  |  -__|   _|  |  -__|__ --|__ --|
|____   |_____|__|  \___/|_____|__| |__|_____|_____|_____|
|   |   |             The Serverless Application Framework
|       |                           serverless.com, v2.53.0
 -------'

Serverless: Successfully generated boilerplate for template: "aws-nodejs-typescript"
~/develop/study/serverless $ cd debug_lambda 
~/develop/study/serverless/debug_lambda $ yarn add serverless-offline

serverless.tsにpluginを追加
  plugins: ['serverless-webpack','serverless-offline'],

vscodeの設定変更

.vscodeのディレクトリ配下にlaunch.jsonを作成する。

launch.jsonの追加
~/develop/study/serverless/debug_lambda $ mkdir .vscode
~/develop/study/serverless/debug_lambda $ cd .vscode 
~/develop/study/serverless/debug_lambda/.vscode $ code  launch.json
~/develop/study/serverless/debug_lambda/.vscode $ ls
launch.json
launch.json
{
    "configurations": [
      {
        "name": "Lambda",
        "type": "node",
        "request": "launch",
        "runtimeArgs": ["--inspect", "--debug-port=9229"],
        "program": "${workspaceFolder}/node_modules/serverless/bin/serverless",
        "args": ["offline"],
        "port": 9229,
        "console": "integratedTerminal"
      }
    ]
}

ブレークポイントの作成

止めたい箇所の横にブレークポイントを設定する。

ブレークポイントの設定ができない場合

Code→基本設定→設定の順に押下する。
スクリーンショット 2021-08-06 20.50.10.png
「allowBreakpointsEverywhere」で検索する。
スクリーンショット 2021-08-06 20.51.31.png

デバッグ方法

スクリーンショット 2021-08-06 20.57.38.png

スクリーンショット 2021-08-06 21.12.14.png
サーバの待受状態が完了。ここで、curlコマンドを実行する。

デバッグが完了!!!格納された中身を確認することもできています。
スクリーンショット 2021-08-06 21.13.33.png

1
0
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
1
0