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
と入力データの{}
は適時変更してください。
{ "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をいじる必要はありません。
デバッグ時のブレークポイントを試したいので、タイムスタンプを取得する処理を追加しておきます。
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のファイルの場合は下記2つを設定するとVSCodeでデバッグできます。
tsconfig.json
でsourcemap
をtrue
にする- VSCodeのデバッグ設定で下記を設定する
{ // 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" ] } ] }
{ // 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のファイル上で今、実行されている箇所やブレークポイントの当該箇所を見つけるという仕組みだと思われます。