サイオステクノロジー技術部 武井です。今回は、Visual Studio CodeでAzure Functionsを開発する方法について記載させていただきたいと思います。
Visual Studio Codeとは？
マイクロソフト社が開発したオープンソースのコードエディターです。標準でも十分な機能を持っていますが、拡張機能をインストールすることにより、さらに使いやすくすることが可能です。ダウンロードは以下のURLにてできます。
https://code.visualstudio.com/
なぜAzure FunctionsでVisual Studio Codeか？
標準で提供されているAzure Functionsの開発方法は、Webブラウザ(Azureポータル)からコードを入力する方法です。しかし、これでは、EclipseはVisual Studioに代表される高機能なIDEのように、入力を補助する機能や、デバッグ機能がないので、利便性で劣るのは言うまでもありません。この欠点を補うために、Visual Studio Codeに拡張機能をインストールすることにより、Azure Functionsの開発がググっと便利になります。
Azure Functionsの拡張機能をインストールすることにより、ローカルでのAzure Functionsの実行、ブレークポイントを付与してのデバッグ、さらには、Azure Functionsへのデプロイまで実施できるようになります。これはもう、使うしかない！！o(・`д・´｡)
ただし、Azure Functionsの拡張機能を利用するには、ランタイムのバージョンが2.0である必要があります。
開発環境の構築
では、Visual Studio CodeでAzure Functionsを開発できるようにするための環境構築方法をご説明致します。
Azure Functions Core Toolのインストール
ローカルな環境でAzure Functionsを動作させるための実行エンジンのようなものです。
※WindowsにはVisual Studioという強力なIDEが用意されていますので、今回のご説明はMacな環境を前提とさせて頂きます
以下のコマンドをターミナルから実行します。
# brew tap azure/functions # brew install azure-functions-core-tools
Azure Functions拡張機能のインストール
Visual Studio CodeにAzur Functionsの拡張機能をインストールします。
下図の左部にある一番下のアイコンをクリックして、テキストボックスに「Azure Functions」を入力します。すると「Azure Functions」というのが表示されますので、その近くにある「Install」をクリックします。しばらくすればインストールは完了です。拡張機能を有効にするために、Visual Studio Codeを再起動して下さい。
関数の作成
では、実際に関数を作成して、Azure Functionsにデプロイするところまでをやってみましょう。
まず、Azure にサインインします。Visual Studio Codeの左メニューにあるAzureのシンボルマークをクリックして下さい。
「Sign in to Azure…」をクリックします。
「Copy & Open」をクリックします。ブラウザが起動します。
先程表示されていたコードが入力された状態でブラウザが起動しますので、「Continue」をクリックします。
下記のような画面が表示されればOKです。Visual Studio Codeの画面に戻って下さい。
以下のようにサブスクリプション一覧が表示されればOKです。次に
をクリックします。
ファルダの選択画面が表示されます。事前に作成しておいた空のプロジェクトフォルダを選択します。すると以下のようなダイアログが出ますので、「Yes」をクリックします。
Azure Functionsで開発する任意のランタイムを選択します。
トリガーを選択します。
関数名を入力します。
認証レベルを選択します。
とりあえず「Add to workspace」を選択します。
以下のようなコードが自動生成されて関数の作成が完了します。
関数をAzureにデプロイします。メニュー右部の
をクリックしてからを
クリックします。
デプロイ先のサブスクリプションを選択します。
デプロイ先のAzure Functionsを選択します。
確認画面が表示されますので、恐れず「Deploy」をクリックします。
Azureポータルを確認すると、関数がデプロイできていると思います。
デバッグ
関数をデバッグしてみます。ブレークポイントを打つと、ステップ実行が可能です。
Java ScriptのAzure Functionsを実行する場合には、Node.jsが必要ですので、インストールします。
まず、node.jsのバージョンを管理するためのツールnodebrewをインストールします。
$ curl -L git.o/nodebrew | perl - setup $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
次に、node.jsをインストールします。現時点(2018年10月8日)で、Azure Functionsを動作させるための推奨バージョンは、v10.6.0です。
$ nodebrew install-binary v10.6.0
このバージョンのnode.jsを使いたいので、以下のように入力します。
$ nodebrew use v10.6.0
以下のようにブレークポイント(赤い丸)をコードの任意の部分にポチッとします。
「F5」をクリックします。するとデバッグモードになります。
※ ここで以下のようなエラーが出る場合があります。
LanguageWorkerConsoleLogYour Function App is currently set to use Node.js version v9.4.0, but the runtime requires an Active LTS or Current version (ex: 8.11.1 or 10.6.0).
この場合は、Azure FunctionsでJava Scriptを動かすために必要なNode.jsがインストールされてないことを意味します。メッセージに従って、適切なバージョンのNode.jsをインストールして下さい。上記のエラーメッセージの場合は、現環境に9.4.0がインストールされているので、先の手順に従い、10.6.0をインストールして下さい。
これで準備は完了です。ターミナルから以下のコマンドを打ってみます。
$ curl https://localhost:7071/api/HttpTriggerJS
※HttpTriggerJSは関数名ですので、環境に応じて適宜変更して下さい。
すると、関数が実行されて、ブレークポイントを打ったところで実行が止まります。変数にマウスオーバーすると、変数の中身を見ることもできます(๑•̀ㅂ•́)و✧
ところで、Timer TriggerのようなHTTPリクエストで呼び出される関数でないものは、デバッグ時は以下のように実行します。
$ curl --request POST -H "Content-Type:application/json" --data '{}' https://localhost:7071/admin/functions/TimerTriggerJS
Queue Triggerの場合は以下のようになります。JSONで渡すデータの形式を以下(フィールド名が「input」のJSON)のようにします。
$ curl --request POST -H "Content-Type:application/json" --data '{"input":"sample queue data"}' https://localhost:7071/admin/functions/QueueTriggerJS
まとめ
Visual Studio Codeは私が思うに、目下最強のコードエディターだと思っております。今回ご紹介したように、Visual Studio CodeにAzure Functions拡張機能をインストールすれば、コーディングのスピードが2倍3倍になること間違いなしですので、是非試してみて下さい。
