はじめに
最近話題沸騰中!?の#VSCode
をインストールしたので、
以下内容を実現できるようにしたい。
#VSCode Installed.
— 堀尾 風仁 (@Futo_Horio) 2019年3月17日
Vim Extension入れるだけで、すぐに使える!
なぜ今まで使わなかったのかw pic.twitter.com/SGixeLEKBh
実現したいこと
ローカル環境 ( #VSCode
) で、
- Azure Functions 関数を
作成
し、デプロイ
したい。 - Azure Functions 関数の
テスト
を実行したい。
実現方法
以下、VSCode
拡張機能 [ Azure Functions ( Preview ) ] を使用すると、実現可能。
【 VSCode | Marketplace 】 Azure > Azure Functions
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 ( Preview ) ] をインストール
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3505%2F2019%2F03%2F19%2F10862%2F6a0097f6-62fa-495e-b43e-6a9072de71db.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e050683b3ebd4c8fd88be4e9068eea60)
※ インストール完了後、VSCodeを再起動します。( 変更内容、反映のため )
2. VSCode サイドバーより、拡張機能 Azure Functions を開く
3. Azure Functions プロジェクトを作成する ( 拡張機能 )
1. 新規プロジェクト作成ボタンを押下します。
![AzureFunctions](https://qiita-user-contents.imgix.net/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3505%2F2019%2F03%2F19%2F10862%2F639ace0c-4b9c-4a91-a257-0948a7f6f0cd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dade62af8e921d3e39ba429e631e0fd6)
2. プロジェクトディレクトリを指定します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3505%2F2019%2F03%2F19%2F10862%2F1994bfc3-654c-45ed-8bda-714cf621d5ed.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=301eb11214cb2dce2167cc2ce2aaf67b)
3. プロジェクトの「使用言語」を選択します。
3. プロジェクトの「ランタイム」を選択します。
3. プロジェクトの「確認方法」を選択します。
これにて、Azure Functions 新規プロジェクトの作成は完了です。
以下のように、自分のWorkplaceに、Azure Functionsプロジェクトが作成されていることが確認できます。
4. Azure Functions 関数の新規作成 する ( 拡張機能 )
1. 新規関数を作成するプロジェクトを指定します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F131a2bf6-1d91-1ad7-1ebc-6116961e1058.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7d8a6d70cbd15172681be2bfc5a64cfd)
2. 関数テンプレートを指定します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F6b69fed9-cfe4-12c1-f904-10d7d6c0bc73.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3e2dc7702d23adb2cf4471489de3a0a5)
3. 関数名を入力します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F25bcb258-2712-e7c4-e625-854e78ffce20.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=aca06b976b0349603b18a7df9982c719)
4. 関数の実行レベルを指定します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F9f8fdf89-543b-1dd0-c316-8308e74aa9cb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=53f2de9e9eb6fc62c88430986aafcfd9)
これにて、関数の新規作成は完了です。
Workplaceに戻って確認してみると、関数が作成されていることが確認できます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F608da938-9ad9-6920-af95-e390ec54b802.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e57ac39d39c705722d352423ac0216a7)
5. ローカル環境で関数を実行する
Azure Functionsをローカルで実行するためには、以下を用意する必要があります。
- 必要なツール群
- Windows 用 .NET Core 2.x SDK
-
Node.js ( ※8.5以上推奨 )
※ ランタイム v2を使用する場合は、node.js v8.5以上が必要となるため。 - Azure Functions Core Tools ( npm install )
上記ツール群をインストールした後、VSCode上でF5
を押下すると、関数が実行される。
http://localhost:7071/api/QiitaTest?name=World!
を実行してみると、、。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F813f0ed5-9b82-2f0f-b18e-427dd0d8432c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=49da5b0d036ca32ae1922e4d081fa26f)
無事、ローカルでテストを実行することができました!
6. ローカルからAzureへデプロイする
1. Azureにサインインする。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F78f58121-7bc0-1ea7-4075-e4fb625eefca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f54ba42740a056052ded8ff15546ab31)
ポータル画面が開き、サインインが完了すると、下記画面が表示されます。
2.VSCode上のDeployボタンを押下する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F1dfede40-4ed0-273e-7a1c-82203713c8db.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e57edde0317ba6827762cfe3019c54b5)
3. デプロイする関数名 ( Azure上 ) を定義する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2Fd7c186f3-2dff-05fd-2d86-ddd8f16ecc81.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=783adcc55d45f0fe8e5a1953390707b9)
4. リソースグループを選択する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F61497a18-5c3c-e7b7-6f8b-e7b3fb13a8d8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=45395e289fed69ebdcbab4c942b98f79)
5. ランタイムを選択する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2Fcc5cea4f-5615-618c-cdc4-a15c86960768.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fe296835cfe8191b4d7172a0497a7245)
6. ストレージを選択する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2Fc4325053-8e43-5bac-fa1c-d8f81928a612.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b37be35b2f7e3b0affb7ef1b4b00c83d)
7. デプロイ先のリージョンを選択する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2F411b45c1-3732-57f9-3c7a-697cc8650372.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=58cda144862ea781b2dab7e43341b209)
8. ログ(デプロイ先)を確認する。
デプロイが完了すると、画面右下に下記メッセージが表示されるので、
「View Output」を選択します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2Fe1687152-5667-cea4-2165-7ad174519fda.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c7f200aca412ef6dd2e8ce9a69c2583e)
ログ上に、デプロイ先(URL)が表示されるので、Webブラウザ上で確認します。
9. Azure Functions ( GETリクエスト ) を試してみる。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F180432%2Fb5e90c10-9cb8-b4c2-37b0-e9ebfd9eda19.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=46367013f03c06bde9d801d864aa276e)
動きましたー!感動!
環境を作ってしまえば、AWS Lambdaより開発しやすいかも(個人的な見解)
終わりに
一度手を動かして、流れを理解してしまいさえすれば、
次からはかなり簡単に、Azure Functionsの開発ができそう!
とにかくやってみる。手を動かして、試してみるの重要性を感じた一日でした。
最後までお読みいただき、ありがとうございました!
公式ドキュメント ( Microsoft )
MEMO
- GDPR ( General Data Protection Regulation )
- EU一般データ保護規則 ( = GDPR )