Visual Studio Codeを使用してAzure Functionsの関数をデプロイ・実行

　Azure Functionsを使用するとサーバーレス環境でコードを実行できますが、
開発にあたり規模が大きくなるとポータル内だけでやるのは限界がありますよね。

　今回Windows10の端末でVisual Studio Codeを使い用意した関数を、Azure Functionsへデプロイ・実行する方法を記載します。もちろんMacでもVS Codeで同じことができます。

#### [ 全体の流れ ]
1.端末に必要なものをインストール
(Visual Studio Code,npm,Azure Functions Core Tools)
↓
2.Local Projectを作成
(関数も作成。今回はデフォルトのものを使用します。)
↓
3.Azure Functionsへデプロイ。関数実行。

## 1.端末に必要なものをインストール
まずVisual Studio Codeをインストールします。
https://code.visualstudio.com/ 

次にNode.jsをインストールします。
https://nodejs.org/en/download/

そしてコマンドプロンプトを開き、以下実行しAzure Functions Core Toolsをインストールします。

```
npm install -g azure-functions-core-tools
```

Macの場合はHomebrewでインストールします (MSのドキュメントより)。
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local

ブラウザで以下指定すると、

```
vscode:extension/ms-azuretools.vscode-azurefunctions
```

VS CodeのAzure Functions拡張機能を開くことができます。
<img width="323" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/896a2c86-8334-594f-ccc9-f0b49c99483c.png">

「インストール」を選択します。
<img width="458" alt="キャプチャ2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/4f8da06b-8de8-6994-7efb-8b5b5c997464.png">

VS Codeを再起動しAzureアイコンをクリックしてサインインしておきます。
<img width="441" alt="キャプチャ3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/8af1601f-0123-a0d1-2372-47c74cc0eab5.png">

## 2.Local Projectを作成
　端末内にFunctions開発用の任意のフォルダを作成しておきます。僕は「y-araki-project」というフォルダを作りました。

次にVS Code上でF1キーを押し、Azure Functions: Create new project... を検索して選択します。そして作成したフォルダを選択します。
<img width="350" alt="キャプチャ4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/f52dce78-35b8-24ea-3deb-5848a487c41b.png">

関数で使用する言語を選択します。今回はJavascriptにしました。
<img width="298" alt="キャプチャ5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/06c4c0a1-092a-f793-b273-b897234c9169.png">

テンプレートを選択します。今回はHttpTriggerにしました。
<img width="299" alt="キャプチャ6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/32c8582b-79d1-ef5d-bfd0-dd8c98014932.png">

関数名を入力します。今回はそのままHttpTriggerでEnterを押します。
<img width="298" alt="キャプチャ7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/e216455a-6f1d-527d-ad01-b53fbbc4ed3e.png">

ここではとりあえずFunctionを選択します。
<img width="299" alt="キャプチャ8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/5c17b074-12a1-4e24-317c-bcca31d6d1dd.png">

　するとLocal Projectが作成され、デフォルトのソースコードが表示されます。
今回既にy-araki-test01という関数アプリをAzureコンソール上で作成しているため、それも左上に表示されています。
<img width="528" alt="キャプチャ9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/25fa7d0c-43c0-1b44-c7c0-115a17c2421c.png">

## 3.Azure Functionsへデプロイ。関数実行。
　再びF1キーを押し、Azure Functions: Deploy to function app... を選択します。
既に作成した関数アプリのy-araki-test01を選択します。
「+ Create New Function App in Azure」でリソースグループなど選択していけば、
ここで関数アプリを作成することもできます。
<img width="296" alt="キャプチャ10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/1e859060-7af7-3658-a13a-1612988326da.png">

デプロイするのに上書きOKか聞かれるので「Deploy」をクリックします。
<img width="277" alt="キャプチャ11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/1fe42133-7bb9-5b21-48ac-93e3a27c1829.png">

デプロイが実行されます。下部TerminalにExecuting task～などと表示されます。
<img width="528" alt="キャプチャ12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/cc917a34-a480-0819-49a8-cf846a64e4c7.png">

完了するとAzureで作成した関数アプリ側にHttpTriggerが表示されています。
<img width="126" alt="キャプチャ13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/c87b954b-4655-d01d-bef2-1f5786ff4da2.png">

　HttpTriggerを右クリックし「Copy Function URL」を選択します。すると HTTPトリガーのURLがコピーされます。
テキストに貼り付けてみると以下のようになっています。

```
 http://<functionappname>.azurewebsites.net/api/<functionname>?code=<function_key>
```

僕の場合このようになっています。

```
https://y-araki-test01.azurewebsites.net/api/HttpTrigger&code=xxxxxxxxxxxxxxxxxxxxx
```

このURLに以下のようにクエリ文字列 ?name=araki を追加してから、関数を呼び出てみます(?name=の右の部分は何でもよいです)。

```
https://y-araki-test01.azurewebsites.net/api/HttpTrigger?name=araki&code=<function_key>
```

ブラウザで表示させてみると、

```
Hello araki
```

と表示されると思います。

　Visual Studio Codeを使用して、HTTPによってトリガーされる単純な関数を実行しました。
Local Projectのコードを編集し、再度デプロイすれば内容も変更できます。
VS Codeを使えばコードの管理もしやすくデバッグ機能など簡単に実行できます。

## 参考
[Visual Studio Code を使用した初めての関数の作成](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-first-function-vs-code)