VSCodeでServerless Framework(AWS×TypeScript)をデバッグするまでの手順

## 概要
本記事ではServerless Framework(AWS Lambda × TypeScript)のテンプレートを作成し、
VSCodeでデバッグするまでの手順を躓いた点を含めて書いていきます。
※`serverless`のバージョン：`2.16.1`

## AWS Lambda × TypeScriptのテンプレート作成

##### 1. serverlessのインストール
npmで`serverless`をグローバルインストールします。

```
npm i -g serverless
```
`sls -v`でバージョン情報が表示されたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/25febfcc-00c2-4341-63ea-ccab59c0d5e2.png)

##### 2. serverless templateの作成
`aws-nodejs-typescript`のテンプレートを作成します。
今回は適当にプロジェクト名を`sls-debug-test`とでもしておきます。

`-t`:  テンプレート形式の指定
`-p`:  プロジェクト名の指定（プロジェクト名でフォルダが作成されます）

```
sls create -t aws-nodejs-typescript -p sls-debug-test
```
成功するとこんな感じのメッセージが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/895c80aa-1b00-838f-db2e-cde87a83c6b2.png)

`cd sls-debug-test`し、作成されたテンプレートの中身を確認してみます。
`.vscode`フォルダが生成されていますね。推奨エディタなのかな？
また、`serverless.yml`ではなく`serverless.ts`が作成されていますね。
serverlessフレームワークのバージョンが`2.16.1`だと`.ts`で出力されるのかしら？
serverlessの型定義を見ることができるのでymlより結構書きやすいかもしれないですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/50d68616-46b1-d155-5bc6-730b2daaf738.png)

しかし、`serverless.ts`を確認すると早速エラーが出ています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/98dad235-1ad7-3788-517c-7541a2fcdc45.png)

型定義ファイルが無いっぽいのでとりあえず、`npm install`します。が、まだエラーが消えないです。
どうやら、テンプレートの初期状態では`package.json`にserverlessの型定義ファイルが無いようですので、追加でインストールします。

```
npm i -D @types/serverless
```

これでエラーが消えて準備が整いました！
（`sls deploy`すれば、デプロイできますが、今回はやりません）

## VSCodeでServerless Frameworkをデバッグする手順
テンプレートが自動生成した`.vscode`フォルダを確認してみます。
親切に`launch.json`が生成されていますね！
どうやら実行するとserverless offlineが起動するようですね。
もしかして特に何もしなくてもこのままデバッグできるのでしょうか（淡い期待）？

```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"
    }
  ]
}

```
`handler.ts`にデバッグ用に`console.log`を追加し、ブレイクポイントを張りました。
さっそくF5キーを押して実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/4658498c-af85-c9e2-ea7c-538437ec6a56.png)

が、エラーが起きちゃいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/fd0ba863-d383-6ba3-4b20-7a342f056a8c.png)
どうやら`serverless`をローカルインストールしていないので追加する必要があるっぽいですね。
(※`launch.json`の`program`のパスを`npm bin -g`以下のserverlessフォルダに書き換えるのでもよいですが、環境によってパスが変わっちゃうのが嫌なので今回はローカルインストールすることにします。)

`npm i -D serverless`して、再度F5で実行してみます。
が、またもや失敗。`offline`コマンドが無いと怒られています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/30063218-180e-5cf6-bdfa-207ecf5ae94a.png)

確認すると、package.jsonにserverless-offlineがありませんね。
どうやらserverless-offlineプラグインは自分で追加する必要があるようです。
ローカルインストールして、

```
npm i -D serverless-offline
```
`plugins`に'serverless-offline'を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/51f52786-f6b9-3512-d24a-0647771e532e.png)

再度F5を押すとどうやら成功したようです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/adf6098f-5204-c2e9-5a6a-8829e1f11660.png)

http://localhost:3000/dev/hello にアクセスしてみます。
デバッグができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469607/2b5390a1-eb55-6baf-dfb8-63c71f81f84c.png)

## まとめ
`aws-nodejs-typescript`テンプレート作成後、VSCodeでserverlessをデバッグするまでの手順(※sls -v 2.16.1)
1. `npm i -D serverless`
2. `npm i -D serverless-offline`
3. `serverless.ts`の`plugins`の配列に`'serverless-offline'`を追加

予想より簡単にデバッグすることができました!