Visual Studio CodeによるAzure Functionsの開発

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【3/22開催】テックブログを書こう!アウトプットのススメ
1年で100本ブログを出した新米エンジニアがPV数が伸びなくてもTech Blogを書き続ける理由とは?
https://tech-lab.connpass.com/event/312805/

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

サイオステクノロジー技術部 武井です。今回は、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 https://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 '{}' 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倍になること間違いなしですので、是非試してみて下さい。

アバター画像
About 武井 宜行 267 Articles
Microsoft MVP for Azure🌟「最新の技術を楽しくわかりやすく」をモットーにブログtech-lab.sios.jp)で情報を発信🎤得意分野はAzureによるクラウドネイティブな開発(Javaなど)💻「世界一わかりみの深いクラウドネイティブ on Azure」の動画を配信中📹 https://t.co/OMaJYb3pRN
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる