satoryuの日記

忘れっぽいから覚えてるうちに書いておかないと。

トップ > Azure > Azure Functions がTypeScriptでかけるようになったからVS Codeで試してみた。

Azure Functions がTypeScriptでかけるようになったからVS Codeで試してみた。

Azure

先日、 Azure Functions の公式ツイッターアカウントで、TypeScriptで書きたい人向けのパッケージのリリースアナウンスがあった。

これは面白そうなので試してみようと思って探してみたら、さすがMSの人がQiitaに早速書いていた。

qiita.com

これを参考に、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」コマンドを実行する。

f:id:satoryu:20190116153521p:plain

ソースマップを生成

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に移るはずです。

f:id:satoryu:20190116163046p:plain

おー、デバッグできるー！

おわりに

Visual Studio CodeでTypeScriptで書いたAzure Functionsをビルドし、tsファイル上に置いたブレークポイントで止まるようにデバッガを設定、起動する方法を紹介しました。 あとは、デプロイも事前にビルドするようにCIを用意すれば、TypeScriptで開発できそう。