VSCodeでServerless FrameworkのAWS Lambda(TypeScript)をデバッグする

どうも！大阪オフィスの西村祐二です。

最近、AWS LambdaをTypeScriptで書く機会が増えてきました。

また、Serverless Frameworkを使う機会も個人的に多少あります。

そこで今回はそのVSCode上でAWS Lambda(TypeScript)をデバッグする方法を紹介したいと思います。

どうやるか

前提として、Serverless Frameworkのaws-nodejs-typescriptテンプレートで雛形を作成したとして進めていきます。

VSCodeのデバッグ設定で下記の設定をすることで、VSCode上で、Serverless FrameworkのAWS Lambda(TypeScript)をデバッグすることができます。

ポイントはsmartStepをtrueにしておくことです。そうしないと、ブレークポイントで止まらずに処理が終了してしまいます。

ファンクション名のhelloと入力データの{}は適時変更してください。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Serverless",
            "program": "${workspaceFolder}/node_modules/.bin/sls",
            "cwd": "${workspaceFolder}",
            "args": [
                "invoke",
                "local",
                "-f",
                "hello",
                "--data",
                "{}"
            ],
            "outFiles": [
                "${workspaceRoot}/.webpack/service/*"
            ],
            "smartStep": true
        }
    ]
}

試してみる

Serverless Frameworkを使ってLambda＋TypeScriptの雛形を作りVSCodeでデバッグしてみます。

$ npm install serverless
$ mkdir test-ts
$ cd test-ts
$ sls create -t aws-nodejs-typescript -n test-ts
Serverless: Generating boilerplate...
 _______                             __
|   _   .-----.----.--.--.-----.----|  .-----.-----.-----.
|   |___|  -__|   _|  |  |  -__|   _|  |  -__|__ --|__ --|
|____   |_____|__|  \___/|_____|__| |__|_____|_____|_____|
|   |   |             The Serverless Application Framework
|       |                           serverless.com, v1.46.1
 -------'

Serverless: Successfully generated boilerplate for template: "aws-nodejs-typescript"

$ npm install

デフォルトで"sourceMap": trueとなっているので、tsconfig.jsonやwebpackをいじる必要はありません。

デバッグ時のブレークポイントを試したいので、タイムスタンプを取得する処理を追加しておきます。

handler.ts

import { APIGatewayProxyHandler } from 'aws-lambda';
import 'source-map-support/register';

export const hello: APIGatewayProxyHandler = async (event, _context) => {
  const unixtime = new Date().getTime() / 1000;
  console.log(unixtime);
  return {
    statusCode: 200,
    body: JSON.stringify(
      {
        message:
          'Go Serverless Webpack (Typescript) v1.0! Your function executed successfully!',
        input: event,
        unixtime
      },
      null,
      2
    )
  };
};

これで準備完了です。

デバッグしてみる

下記のように動作します。

ブレークポイントもきちんと動作しています。

さいごに

VSCode上でServerless Frameworkを使ってLambda＋TypeScriptをデバッグする方法を紹介しました。

ブレークポイントも利用でき、設定も簡単なので試してみてはいかがでしょうか。

誰かの参考になれば幸いです。

おまけ

純粋なTypeScriptのファイルの場合は下記２つを設定するとVSCodeでデバッグできます。

• tsconfig.jsonでsourcemapをtrueにする
• VSCodeのデバッグ設定で下記を設定する

.vscode/tasks.json

{
// tasks.json 形式の詳細についての資料は、
    // https://go.microsoft.com/fwlink/?LinkId=733558 をご覧ください
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc: build - tsconfig.json",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ]
        }
    ]
}

.vscode/launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${relativeFile}",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/lib/**/*.js"
            ]
        }
    ]
}

SourceMapとは

コンパイル前のTypeScriptのファイルとコンパイル後のJavaScriptのファイルの対応関係を記したファイルです。

変換されたJavaScriptの記載内容が、TypeScriptのどこか箇所かわかるということになります。

TypeScriptはAltJSなので、内部ではJavaScriptに変換されてデバック実行されている（と思う）ので、 エディタ側では生成されたSourceMapを頼りに、TypeScriptのファイル上で今、実行されている箇所やブレークポイントの当該箇所を見つけるという仕組みだと思われます。