VSCodeを使って、Azure Functions 関数作成～デプロイまでやってみた。

# はじめに
<font color="orange">__最近話題沸騰中!?__</font>の```#VSCode```をインストールしたので、
以下内容を実現できるようにしたい。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/VSCode?src=hash&amp;ref_src=twsrc%5Etfw">#VSCode</a> Installed.<br>Vim Extension入れるだけで、すぐに使える！<br>なぜ今まで使わなかったのかｗ <a href="https://t.co/SGixeLEKBh">pic.twitter.com/SGixeLEKBh</a></p>&mdash; 堀尾 風仁 (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1107241275856584705?ref_src=twsrc%5Etfw">2019年3月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 実現したいこと

<font color="black">__ローカル環境__</font> ( ```#VSCode``` ) で、
1.  Azure Functions 関数を```作成```し、```デプロイ```したい。
2.  Azure Functions 関数の```テスト```を実行したい。 

# 実現方法
以下、```VSCode``` 拡張機能 [ __Azure Functions__ (<font color="red"> __Preview__ </font>) ] を使用すると、実現可能。

__【 VSCode | Marketplace 】__ Azure > [Azure Functions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions)

<img width="800" alt="AzureFunctions" src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/4a152910-67c7-49cb-a7da-e6beecbaf9c2.PNG">



> __MEMO ( 2019/03/19 )__
現在、この拡張機能では、C#、JavaScript ( TypeScript )、Java 関数を完全にサポート ( GA )、
Python のサポートは、プレビュー段階 ( Preview ) です。




# 導入環境 ( 前提条件 )
- Windows 10 (  ```Surface Book 2``` )
- VSCode (  ```1.32.1``` )
- __Azure アカウント__ ( ```発行済み``` )

# 導入手順 ( 目次 )
- __導入編__
 - VSCode 拡張機能 __[ Azure Functions ]__ をインストール
 - VSCode __サイドバー__ より、拡張機能 __[ Azure Functions ]__  を開く
 - Azure Functions __プロジェクトの新規作成__ する ( 拡張機能 )
 - Azure Functions __関数の新規作成__ する ( 拡張機能 )

- __テスト編__
 - ローカル環境で__関数を実行__する

- __デプロイ編__
 - ローカルから__Azureへデプロイ__ する  


# 導入手順 ( 詳細 )
## 1. VSCode Extensions [ Azure Functions ( <font color="red">Preview</font> ) ] をインストール
<img src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/6a0097f6-62fa-495e-b43e-6a9072de71db.gif" width="800">

※ インストール完了後、VSCodeを再起動します。( 変更内容、反映のため )

## 2. VSCode サイドバーより、拡張機能 __Azure Functions__  を開く
<img width="800" alt="AzureFunctions" src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/1cb8bcce-3469-42e1-aded-592fa0796b69.PNG">


## 3. Azure Functions プロジェクトを作成する ( 拡張機能 )

#### 1. 新規プロジェクト作成ボタンを押下します。  
<img width="400" alt="AzureFunctions" src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/639ace0c-4b9c-4a91-a257-0948a7f6f0cd.png">



#### 2. プロジェクトディレクトリを指定します。  
<img width="800" src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/1994bfc3-654c-45ed-8bda-714cf621d5ed.png">


#### 3. プロジェクトの「__使用言語__」を選択します。 
__[ JavaScript ]__ を選択。  
<img width="800" alt="AzureFunctions" src="https://img.esa.io/uploads/production/attachments/3505/2019/03/19/10862/4a4f0c5e-9e44-44c5-a1f8-004704eb4bab.PNG">

#### 3. プロジェクトの「__ランタイム__」を選択します。 
__[ Azure Functions v2 ]__ を選択。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/0fed569e-6c5d-58c1-c106-76b58add2e94.png" width="800">

#### 3. プロジェクトの「__確認方法__」を選択します。 
__[ Add to workplace ]__ を選択。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/007c8ad4-98da-44f6-0894-13528f647453.png" width="800">

これにて、Azure Functions 新規プロジェクトの作成は完了です。

以下のように、自分のWorkplaceに、Azure Functionsプロジェクトが作成されていることが確認できます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/4e01e33b-c579-7b3c-6584-e27c219d9766.png" width="800">

---

## 4. Azure Functions __関数の新規作成__ する ( 拡張機能 )
#### 1. 新規関数を作成するプロジェクトを指定します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/131a2bf6-1d91-1ad7-1ebc-6116961e1058.png" width="800">

#### 2. 関数テンプレートを指定します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/6b69fed9-cfe4-12c1-f904-10d7d6c0bc73.png" width="800">

#### 3. 関数名を入力します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/25bcb258-2712-e7c4-e625-854e78ffce20.png" width="800">

#### 4. 関数の実行レベルを指定します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/9f8fdf89-543b-1dd0-c316-8308e74aa9cb.png" width="800">

これにて、関数の新規作成は完了です。
Workplaceに戻って確認してみると、関数が作成されていることが確認できます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/608da938-9ad9-6920-af95-e390ec54b802.png" width="800">

## 5. ローカル環境で関数を実行する
Azure Functionsをローカルで実行するためには、以下を用意する必要があります。

- [__必要なツール群__](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local)
 - __Windows 用 .NET Core 2.x SDK__
 - __Node.js__ ( ※8.5以上推奨 )  
 ※ ランタイム v2を使用する場合は、node.js v8.5以上が必要となるため。
 - __Azure Functions Core Tools__ ( npm install )

上記ツール群をインストールした後、VSCode上で```F5```を押下すると、関数が実行される。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/1c2a969f-e217-1c22-23d1-359db83e9238.png">

```http://localhost:7071/api/QiitaTest?name=World!``` を実行してみると、、。

<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/813f0ed5-9b82-2f0f-b18e-427dd0d8432c.png">

無事、ローカルでテストを実行することができました！

## 6. ローカルからAzureへデプロイする 
#### 1. Azureにサインインする。
<img src="https://qiita-image-store.s3.amazonaws.com/0/180432/78f58121-7bc0-1ea7-4075-e4fb625eefca.png" width="400">

ポータル画面が開き、サインインが完了すると、下記画面が表示されます。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/40b68b3b-4a7d-9e7d-e76d-bcc8ec3b644a.png">

#### 2.VSCode上のDeployボタンを押下する。
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/180432/1dfede40-4ed0-273e-7a1c-82203713c8db.png">

#### 3. デプロイする関数名 ( Azure上 ) を定義する。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/d7c186f3-2dff-05fd-2d86-ddd8f16ecc81.png">

#### 4. リソースグループを選択する。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/61497a18-5c3c-e7b7-6f8b-e7b3fb13a8d8.png">

#### 5. ランタイムを選択する。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/cc5cea4f-5615-618c-cdc4-a15c86960768.png">

#### 6. ストレージを選択する。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/c4325053-8e43-5bac-fa1c-d8f81928a612.png">

#### 7. デプロイ先のリージョンを選択する。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/411b45c1-3732-57f9-3c7a-697cc8650372.png">

上記の選択が終了すると、デプロイが開始します。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/36a6e55f-c048-4ada-5d1b-362639fbef59.png">

#### 8. ログ(デプロイ先)を確認する。

デプロイが完了すると、画面右下に下記メッセージが表示されるので、
「__View Output__」を選択します。

<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/e1687152-5667-cea4-2165-7ad174519fda.png">

ログ上に、デプロイ先(URL)が表示されるので、Webブラウザ上で確認します。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/86889fe6-8a5a-f7a5-1b5e-dceb51425cae.png">


#### 9. Azure Functions ( GETリクエスト ) を試してみる。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/180432/b5e90c10-9cb8-b4c2-37b0-e9ebfd9eda19.png">

動きましたー！感動！
環境を作ってしまえば、AWS Lambdaより開発しやすいかも(個人的な見解)

# 終わりに
一度手を動かして、流れを理解してしまいさえすれば、
次からはかなり簡単に、Azure Functionsの開発ができそう！
とにかくやってみる。手を動かして、試してみるの重要性を感じた一日でした。

最後までお読みいただき、ありがとうございました！

##  公式ドキュメント ( Microsoft )
- [Visual Studio Code を使用した初めての関数の作成](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-first-function-vs-code)
- [Microsoft Azure プレビュー使用条件 ( Preview ) ](https://azure.microsoft.com/ja-jp/support/legal/preview-supplemental-terms/)

## MEMO
- GDPR ( General Data Protection Regulation )
  - [EU一般データ保護規則](https://ja.wikipedia.org/wiki/EU%E4%B8%80%E8%88%AC%E3%83%87%E3%83%BC%E3%82%BF%E4%BF%9D%E8%AD%B7%E8%A6%8F%E5%89%87) ( = GDPR )