Visual Studio CodeによるAzure Functionsの開発

サイオステクノロジー技術部 武井です。今回は、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を再起動して下さい。

Screen Shot 2018-10-06 at 22.54.56

関数の作成

では、実際に関数を作成して、Azure Functionsにデプロイするところまでをやってみましょう。

まず、Azure にサインインします。Visual Studio Codeの左メニューにあるAzureのシンボルマークをクリックして下さい。

Screen Shot 2018-10-07 at 23.49.50

 

「Sign in to Azure…」をクリックします。

Screen Shot 2018-10-06 at 23.00.58

 

「Copy & Open」をクリックします。ブラウザが起動します。

Screen Shot 2018-10-07 at 23.54.40

 

先程表示されていたコードが入力された状態でブラウザが起動しますので、「Continue」をクリックします。

Screen Shot 2018-10-07 at 23.58.05

 

下記のような画面が表示されればOKです。Visual Studio Codeの画面に戻って下さい。

Screen Shot 2018-10-06 at 23.01.42

 

以下のようにサブスクリプション一覧が表示されればOKです。次にScreen Shot 2018-10-08 at 0.07.42をクリックします。

Screen Shot 2018-10-08 at 0.05.27

 

ファルダの選択画面が表示されます。事前に作成しておいた空のプロジェクトフォルダを選択します。すると以下のようなダイアログが出ますので、「Yes」をクリックします。Screen Shot 2018-10-08 at 0.14.05

 

Azure Functionsで開発する任意のランタイムを選択します。

Screen Shot 2018-10-08 at 0.14.54

 

トリガーを選択します。

Screen Shot 2018-10-08 at 0.15.06

 

関数名を入力します。

Screen Shot 2018-10-08 at 0.15.21

 

認証レベルを選択します。

Screen Shot 2018-10-08 at 0.15.30

 

とりあえず「Add to workspace」を選択します。

Screen Shot 2018-10-08 at 0.15.45

 

以下のようなコードが自動生成されて関数の作成が完了します。

Screen Shot 2018-10-08 at 0.35.07

 

関数をAzureにデプロイします。メニュー右部のScreen Shot 2018-10-08 at 0.28.21をクリックしてからをScreen Shot 2018-10-08 at 0.28.31クリックします。

Screen Shot 2018-10-08 at 0.05.27

 

デプロイ先のサブスクリプションを選択します。

Screen Shot 2018-10-08 at 0.34.08

 

デプロイ先のAzure Functionsを選択します。

Screen Shot 2018-10-08 at 0.31.20

 

確認画面が表示されますので、恐れず「Deploy」をクリックします。

Screen Shot 2018-10-08 at 0.31.34

 

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

 

以下のようにブレークポイント(赤い丸)をコードの任意の部分にポチッとします。

Screen Shot 2018-10-08 at 0.48.40

 

「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 http://localhost:7071/api/HttpTriggerJS

※HttpTriggerJSは関数名ですので、環境に応じて適宜変更して下さい。

 

すると、関数が実行されて、ブレークポイントを打ったところで実行が止まります。変数にマウスオーバーすると、変数の中身を見ることもできます(๑•̀ㅂ•́)و✧

Screen Shot 2018-10-08 at 0.55.43

 

ところで、Timer TriggerのようなHTTPリクエストで呼び出される関数でないものは、デバッグ時は以下のように実行します。

$ curl --request POST -H "Content-Type:application/json" --data '{}' http://localhost:7071/admin/functions/TimerTriggerJS

Queue Triggerの場合は以下のようになります。JSONで渡すデータの形式を以下(フィールド名が「input」のJSON)のようにします。

$ curl --request POST -H "Content-Type:application/json" --data '{"input":"sample queue data"}' http://localhost:7071/admin/functions/QueueTriggerJS

まとめ

Visual Studio Codeは私が思うに、目下最強のコードエディターだと思っております。今回ご紹介したように、Visual Studio CodeにAzure Functions拡張機能をインストールすれば、コーディングのスピードが2倍3倍になること間違いなしですので、是非試してみて下さい。

ご覧いただきありがとうございます! この投稿は役に立ちましたか? 役に立った 役に立たなかった

Be the first to comment

コメント投稿

Your email address will not be published.


*