この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも!大阪オフィスの西村祐二です。
最近、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のファイルの場合は下記2つを設定すると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のファイル上で今、実行されている箇所やブレークポイントの当該箇所を見つけるという仕組みだと思われます。