リセット状態の Windows から Visual Studio Code + Azure Functions を確実に動かす手順

Azure Functions のクイックスタートが動かない

最近のクラウドはサーバーレスが主流になってきて
クラウドを使い始めるハードルが低くなってきたと思います。
サーバーレスとはクラウドにサーバーを構築しなくても、
関数のコードとそれに関わる設定をアップロードするだけで
クラウドでプログラムが実行できるというサービスです。
具体的には、3大クラウド ベンダーでいえば、以下のサービスです。

• aws の Lambda
• Azure の Azure Functions ← 今回の対象
• GCP の Cloud Functions

どのクラウド ベンダーも公式のクイックスタートやチュートリアルが充実しており、
ネットや公式サポートを検索する環境も整ってきています。

ならばといざチュートリアルを試してみようと書いてある通りにやっても
上手くいかないといった経験がよくあると思います。
なかなかハードルは下がらないという印象です。

ケースを絞り、前提条件をなくす

動かない原因は、
古いバージョンの情報だったり、
前提条件を満たしていなかったり、
チュートリアルがいろいろなケースに対応しているために
どのケースを選ぶべきか分からなかったりと
いろいろあります。

そこで、本記事では、特定のケースについて絞り込んで、具体的に説明していきたいと思います。
また、前提条件をなくすために、Windows をリセットした状態から始めて確認しています。
チュートリアルを試すみなさんはリセット状態にしなくてもいいと思います。
開発環境はいろいろありますが最も使いやすいと思っているものを選びました。

対象システム

あらかじめ用意する必要があるのは、以下のとおりです。

• Windows 10 2004 64bit （多少古くてもよい）
• Microsoft アカウント →アカウント作成ページ(Microsoft)

以下の手順でインストールするものは、以下のとおりです。
すべてのバージョンは、執筆時点の最新版です。
この記事が古くなったら、以下で説明する手順では失敗するかもしれませんがご了承ください。

• Azure Functions 3.1
• Azure Functions Core Tools
• Azure CLI 2.12.1
• .NET Core SDK 3.1
• Visual Studio Code 1.50.0
• C#

これらを使って、クラウド上で C# 言語の関数を動かしてみます。

最後にデバッグ方法も説明します。

手順

手順は多いですが、とくに前提とする知識や考慮すべきことはないので、そのまま進めていくことができます。

Visual Studio Code をインストールします

https://code.visualstudio.com/
をブラウザーで開き、ダウンロードして、実行します。

インストール オプションはすべてデフォルトで構いません。

インストールが完了したら、Visual Studio Code を起動して
タスクバーにピン止めすることをオススメします。

開発に使う PC で Azure Portal にサインインします

Azure Portal (https://portal.azure.com/)
をブラウザーで開き、サインインして、サインインの状態を維持するように設定します。

ホーム（Azure サービス）に入ることができたら、ブラウザーを閉じます。

ようこそ！のページになったときは、またサブスクリプションを持っていない状態です。
そのときは、無料使用版を開始してください。

下記のようにクイック スタートのページになったら、ホーム（左上）を押すと上記のホームになります。

Azure CLI をインストールします

少し下へスクロールして [ Microsoft Installer (MSI) ] タブを選び、
[ Azure CLI current version ] ボタンを押します。
ダウンロードが完了したら、実行してインストールします。

.NET Core SDK をインストールします

[v3.1.x] の [ Build apps - SDK ] の列の中にある表の
[ Windows ] の行、[ Installers ] の列の [ x64 ]
をクリックしてダウンロード、実行します。

Azure Functions Core Tools をインストールします

[ Installing ] の [ v3 ] の [ Windows 64-bit ] をクリックしてダウンロードし、実行します。

Visual Studio Code を閉じます

Visual Studio Code が開いていたら閉じます。

（メモ）次の手順でインストール後に開きなおすことで、
いままでにインストールしたパッケージを認識するのだと思います。

（メモ）今回の手順では必要ありませんが、もし今回作成するプロジェクトがすでにあるときは、
以下の手順をします。

1. Project/bin フォルダーと Project/obj フォルダーが存在していれば削除します。 なお、 Project は .csproj ファイルがあるフォルダーのパスです。
2. Visuatl Studio Code を開きます
3. .cproj ファイルがあるフォルダーを開きます（[File >> Open Folder] メニュー）
4. しばらく待って、recommended extensions のインストールを勧められてもインストールしない （してもよい場合もある）
5. 「Restore」ボタンが右下に表示されたら押す

拡張機能をインストールします

Visuatl Studio Code の拡張機能を次の手順でインストールします。

1. Visuatl Studio Code を開きます（タスクバーにピン留めしたアイコンや、スタート メニューから開きます）
2. Visuatl Studio Code の拡張機能のボタンを押し、検索ボックスをクリックします
3. 検索ボックスを使って、以下の拡張機能をインストールします
   • Azure Tools
   • C#

公式ドキュメントで「拡張機能」といえば Visual Studio Code エクステンションのことです。

Visual Studio Code から Azure へ再度サインインします

Visual Studio Code の Azure ボタン（左）を押し、
Sign in to Azure をクリックします。
Sign in to Azure はいくつもありますがどれでも構いません。
クリックしたらブラウザーが開くので、アカウントを選んでください。

You are signed in now and can close this page.
と表示されるので、ブラウザーを閉じます。

以下のようにサブスクリプション名が表示されたら成功です。

（メモ）もし、以下のように Select Subscriptionns と表示されたら失敗です。
次の手順を試すと直るかもしれません。

1. Visual Studio Code で F1 キーをおして Azure: Sign Out を実行する
2. 問題が起きている PC で、 https://portal.azure.com/ に入れることを確認する
3. サブスクリプションを持っていることを確認する
4. 参考: （公式）Azure portal または Azure アカウント センターにおける「サブスクリプションが見つかりません」のサインイン エラー

ローカル プロジェクトと最初の関数を作成します

プロジェクトのフォルダーを作ります。
たとえば、デスクトップに try_Azure_functions_cs という名前のフォルダーを作ります。

プロジェクトのフォルダーを Visual Studio Code で開きます（[ File >> Open Folder ] メニュー）

Azure ボタン（左） を押して、Functions の右にマウス カーソルを動かし、
Create New Project（フォルダーのアイコン）を押します。

対話式に質問されるので、以下のように入力します。

• ProjectFolder: ProjectFolder
• Language: C#
• Template: HttpTrigger
• FunctionName: FunctionName
• NameSpace: NameSpace
• AccessRights: Anonymous （あまりセキュアではないので注意）

上記の一部はプロジェクトに応じてよく変更する部分です。
今回の手順では、下記のように置き換えてください。
- ProjectFolder: try_Azure_functions_cs
- FunctionName: HttpTriggerCShap1
- NameSpace: Company.Function

参考: （公式）ローカル プロジェクトを作成する

関数をローカルで実行します

F5 キーを押します。
F5 キーを押すと、C# のコードをビルドして、デバッガーと接続した状態の Web サーバーを
ローカルで起動します。

初回のみ、ファイアーウォールから警告されますが、そのまま「アクセスを許可」して構いません。

成功したら TERMINAL ビューにデバッグ実行中の Web サーバーの URL が緑色で表示されます。

Web サーバーの URL を開く（Ctrl キーを押しながら URL をクリックする）と
関数がコールバックされます。
ブラウザーで表示される内容は、コールバックされた関数の中で作成された内容です。

HttpTriggerCSharp1.cs ファイルの Run 関数の中に、ブレークポイントを設定して、Web サーバーの URL を開く（Ctrl キーを押しながら URL をクリックする）と、ブレークします（実行がそこで一時停止します）

Web サーバーの実行を終了するには、TERMINAL ビューで [Ctrl]+[C] を押します。
コードの内容を変更したときは、Web サーバーの再起動が必要です。

以上で関数を実行できましたが、まだクラウド上では実行していません。
通常、ローカルで関数が完全に動くようにしてから、その関数をクラウド上にデプロイします。

クラウドにデプロイします

今回の場合のデプロイとは、ローカルで実行した関数を Azure の「関数アプリ」
にアップロードすることです。 関数アプリとは、Azure Functions の関数を
REST API で HTTP アクセスできるようにする Azure のリソースです。

Azure ボタン（左） を押して、Functions の右にマウス カーソルを動かし、
Deploy to Function App ボタン（上向き矢印のアイコン）を押します。

対話式に質問されるので、以下のように入力します。

• TargetFunctionApp: Create new Function App in Azure
• FunctionAppName: FunctionAppName
• Location: Japan East

上記の一部は Azure 全体で唯一の名前に変更する部分です。
以下の例は参考のために書いていますが使えません。
- FunctionAppName: my-function-cs-01234

デプロイが完了するまで、約3分かかります。

参考: （公式）Azure にプロジェクトを発行する

クラウド上で関数を実行します

デプロイした関数を呼び出します。

Azure ボタン（左） を押して、Functions ビューのサブスクリプション名（例：無料試用版）
の中にある関数名（例：HttpTargetCSharp1）を右クリックして [ Copy Function URL ]。

ブラウザーでコピーした URL を開きます。
- URLの例： https://my-function-cs-01234.azurewebsites.net/api/HttpTriggerCSharp1

ローカルで実行したときと同じ内容が表示されます。
クラウド上で実行しているので、スマホのブラウザーなどで同じ内容を見ることもできます。

以上で、クラウド上で関数を動かすことができました。

参考: （公式）Azure で関数を実行する

クラウドで実行した関数をデバッグします

クラウド上で実行した場合、デバッガーには接続できません。
ローカルで実行したときに問題なかったのにクラウド上で問題が発生したときは、
log.LogInformation 関数でログを出力しながら解析することになります。

以下の手順でログのモニターを開いてから関数を実行すると、log.LogInformation 関数の出力内容が
ほぼリアルタイムで表示されます。

Azure Portal >> 関数アプリ >> （アプリ名 FunctionAppName） >> 関数 >>
（関数名 FunctionName） >> モニター >> ログ(タブ)