先日、 Azure Functions の公式ツイッターアカウントで、TypeScriptで書きたい人向けのパッケージのリリースアナウンスがあった。
⚡️⚡️⚡️Check out the new @azure/functions type definitions!!!⚡️⚡️⚡️https://t.co/plmpXd7U7v
— Azure Functions (@AzureFunctions) January 14, 2019
これは面白そうなので試してみようと思って探してみたら、さすがMSの人がQiitaに早速書いていた。
これを参考に、Visual Studio Code からローカル環境でAzure Functions を起動し、デバッグするところまで試してみた。 サンプルで作ったリポジトリは、こちら。
前提条件
- macOS 10.13.6
- node v10.6.0
- npm v6.1.0
- Visual Studio Code
- Azure Functions
Function の新規作成
参考のQiitaの記事の通りに、HttpTriggerのFunction を作成しましょう。
デバッグの準備
下記のようにHttpTriggerが存在することを前提に進めます。
./HttpTrigger/ ├── function.json ├── index.js ├── index.ts └── sample.dat
VS Codeの拡張 Azure Functionsを使って、必要なファイルを生成
Ctrl+Shift+P(Macなら⌘+Shift+P)から、「Initialize Project for Use With VS Code」コマンドを実行する。
ソースマップを生成
tsconfig.json
に、"sourceMap": true" を追加し、ビルド時にソースマップを生成させるようにする。ソースマップが無いと、ビルド後に生成された
index.js`上にしかブレークポイントを置けない。
{ "compilerOptions": { "target": "es2018", "module": "commonjs", "lib": ["es2018"], "sourceMap": true }, "include": [ "**/*.ts" ] }
TypeScriptをビルドするためのタスクを追加
package.json
に、以下のスクリプトを定義する。
"script": { "build": "tsc" },
下記のようにビルドが実行できることを確認。
$ npm run-script build
(オプション)デバッガ起動時にビルド
デバッガ起動時に、func extensions
コマンドが実行されるようにlaunch.json
が定義されています。
これに、tasks.json
に以下の設定を追加することで、同じタイミングで上で定義したTypeScriptのビルドを実行するようにしておきましょう。
{ "label": "buildTypeScript", "command": "npm run-script build", "type": "shell" }
デバッガを実行
まず、index.ts
ファイルを開き、コードの中でデバッグしたいところにブレークポイントを起きます。
その後、Ctrl+Shift+D(Macだと⌘+Shift+D)でデバッガサイドバーを開き、「Attache to JavaScript Functions」で起動します。
http://localhost:7071/api/HttpTrigger をブラウザで開くと、ブレークポイントに達したところで、Visual Studio Codeに移るはずです。
おー、デバッグできるー!
おわりに
Visual Studio CodeでTypeScriptで書いたAzure Functionsをビルドし、tsファイル上に置いたブレークポイントで止まるようにデバッガを設定、起動する方法を紹介しました。 あとは、デプロイも事前にビルドするようにCIを用意すれば、TypeScriptで開発できそう。