【Azure Functions 入門】環境構築と VS Code 経由でデプロイする方法

【Azure Functions 入門】環境構築と VS Code 経由でデプロイする方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
本記事では Azure Functions の環境構築、また VS Code 経由でデプロイする方法を紹介します。

バージョン情報

  • azure-functions-core-tools:3.0.3477
  • node:14.15.5

環境構築

  1. Azure Portal から Functions のリソースを作成
  2. Azure Functions に必要なパッケージをインストール
  3. VS Code に Azure Functions の拡張機能をインストール
  4. Azure Functions 用のプロジェクト作成
  5. Node.js の仮想環境を構築

1. Azure Portal から Functions のリソースを作成

まず、Azure Portal に Functions のリソースを作成します。
下図のようにマーケットプレイスから関数アプリを検索し、クリックしてください。
azure_functions_1
続いて、関数アプリの作成ボタンをクリックしましょう。
azure_functions_2
次に、リソースグループや関数アプリ名など、必要な情報を入力します。本記事では Node.js で Azure Functions を動かすため、ランタイムスタックを Node.js としています。
地域は使用ユーザーの地域から近いほど、応答速度が速くなるため、Japan East / West を選択してください。
azure_functions_3
関数アプリの情報が確認できたら、作成ボタンをクリックしましょう。
azure_functions_4
しばらくすると、関数アプリの作成が完了します。
azure_functions_5

2. Azure Functions に必要なパッケージをインストール

次に Azure Functions で必要なパッケージをグローバルでインストールする必要があります
macOS の方は、Homebrew 経由でインストールできます。コマンドは以下の通りです。
# brew 経由 brew tap azure/functions brew install azure-functions-core-tools@3
Winwdow の方は公式ドキュメントから直接インストールしましょう。

3. VS Code に Azure Functions の拡張機能をインストール

VS Code に Azure Function の拡張機能をインストールします。Azure Function の拡張機能を使うことで、Azure との連携やデプロイが簡単になります。
azure_functions_vscode_ex_1
拡張機能をインストールした後、左サイドバーに Azure のアイコンが表示されれば成功です!
azure_functions_vscode_ex_2

4. Azure Functions 用のプロジェクト作成

Azure 上にリソースの受け皿自体は作られていますが、プロジェクトファイルの実態はありません
そのため、ローカル環境に Azure Function 用のプロジェクトを作成しましょう。最終的に、クラウド上にアップロードして、ローカルと同期させます。
手順は下図の通りです。
azure_functions_deploy_1
下図のように、Azure Functions 用のディレクトリを作成してください。
azure_functions_deploy_2
言語は各自お選びください。本記事では、TypeScript を選択します。
azure_functions_deploy_3
続いて、トリガーを選択します。本記事では、HTTP をベースに関数を呼び出す一般的な HTTP Trigger を選びます。
参考:Azure Functions の HTTP トリガー | Microsoft Docs
azure_functions_deploy_4
関数名は各自、入力してください。
azure_functions_deploy_5
最後に、Function を選択し、現在の VS Code の画面で開くようにすると、Azure Functions の雛形が作成されます。
azure_functions_deploy_6
azure_functions_deploy_7
azure_functions_deploy_8

5. Node.js の仮想環境を構築

作成した Azure Functions では、ランタイムで使用している Node.js のバージョンが 14 系でした。そのため、ローカル環境における Node.js のバージョンも 14 系に揃えましょう
以下コマンドを実行しし、Node.js のバージョンを確認してください。14 系であれば大丈夫です。
node -v # 実行結果 # OK:v14.**.** # NG:v14 以外
もし Node.js のバージョンが 14 系でない場合は nodenv など、Node.js のバージョンを管理できるパッケージで変更しましょう。fwywd チームでは、nodenv で Node.js のバージョンを管理しています。
参考:nodenv/nodenv: Manage multiple NodeJS versions.
参考までに、nodenv で Node.js のバージョンを 14 系の最新版に変更する方法を紹介します。コマンドは以下の通りです。
# Node.js 14 系の最新版をインストール nodenv install 14.15.5 # 新たに Node.js をインストールした時は rehash が必要 nodenv rehash # ローカル環境の Node.js のバージョンを 14 系に変更 nodenv local 14.15.5 # 念の為 Node.js のバージョンを確認 node -v # 実行結果 # v14.15.5

VS Code 経由でデプロイ

以上で、環境構築が完了です。ここから、Azure Functions を VS Code 経由でデプロイする方法を紹介します。
  1. ローカル環境で Azure Functions を実行
  2. VS Code 経由で、クラウドのリソースにデプロイ

1. ローカル環境で Azure Functions を実行

まず package.json で定義されているパッケージ一式を、インストールします。コマンドは以下の通りです。
npm install
Azure Functions の実行は、以下のコマンドで行います。
npm start # 実行結果 Azure Functions Core Tools Core Tools Version: 3.0.3477 Commit hash: 5fbb9a76fc00e4168f2cc90d6ff0afe5373afc6d (64-bit) Function Runtime Version: 3.0.15584.0 [2021-06-11T06:27:16.813Z] Cannot create directory for shared memory usage: /dev/shm/AzureFunctions [2021-06-11T06:27:16.816Z] System.IO.FileSystem: Access to the path '/dev/shm/AzureFunctions' is denied. Operation not permitted. [2021-06-11T06:27:18.794Z] Worker process started and initialized. Functions: HelloWorld: [GET,POST] http://localhost:7071/api/HelloWorld
与えられたローカルのアドレスへ、ブラウザでアクセスすると正常に動いていることが確認できます。
azure_functions_deploy_9
M1 Mac を使用している場合、Error: Cannot find module './Worker.js' という、エラーが表示される恐れがあります。2021/6/11 時点で、公式の Issue にも上がっています。
grpc モジュールを手動でインストールし、紐付けることで解決できますが、肝心の grpc が現在、インストールできなくなりました
参考:M1 Mac で Azure Functions Core Tools (Node.js 版)が動かない件 (※ワークアラウンド) - Qiita
現状、extention_binary.zip をダウンロードして、Azure Functions のディレクトリに配置し、以下コマンドを実行するしか、現状では解決策がありません。/opt 以降はバージョンを合わせましょう。
# M1 Mac 対応 ln -s `pwd`/extention_binary/node-v83-darwin-arm64-unknown /opt/homebrew/Cellar/azure-functions-core-tools@3/3.0.3477/workers/node/grpc/src/node/extension_binary

2. VS Code 経由で、クラウドのリソースにデプロイ

最後に、VS Code 経由で Azure Functions のプロジェクトをクラウドのリソースにデプロイします。
下図のように、アップロードのアイコンをクリックし、デプロイ先を選択するだけです(とっても簡単!
azure_functions_deploy_10
azure_functions_deploy_11
azure_functions_deploy_12
念の為、デプロイ後にもアクセスできるか、確認しましょう!手順は下図の通りです。
azure_functions_deploy_13
azure_functions_deploy_14
azure_functions_deploy_15
azure_functions_deploy_16
コピーした URL にブラウザでアクセスした時、下図のようにメッセージが画面に表示されれば成功になります!
azure_functions_deploy_17

最後に

以上になります。VS Code を使用することで、Azure Functions へのデプロイが GUI ベースで簡単にできました
ただし、最初はこのデプロイの方法が楽で良いですが、プロジェクトを簡単に上書きしてしまうため、チームで運用するときは注意が必要です。テストが通ったことを確認の上、デプロイしていくように CI / CD を構築するようにしましょう。
ここまでご覧いただき、ありがとうございました!

株式会社キカガク コンテンツマーケティング責任者
入田 / ぐるたか
twitter: @guru_taka

参考文献

RSS フィードで fwywd の技術記事を購読しよう

fwywd(フュード) のシェアボタンにある RSS フィードを利用すれば、新しい記事が出るたびに自動的に通知を無料で受け取ることができます。
Slack への連携はたったの5分で行うことができ、以下の記事でその手順を具体的に紹介しています。
ぜひ、fwywd(フュード) が日々更新する技術記事をキャッチアップしていただけると嬉しいです。
subscribe-rss-feed

fwywd では開発メンバーを募集しています

recruitment
fwywd では採用試験を無料で公開しています。
採用への応募の有無を問わず、Web アプリケーションの開発を学びたい多くの方にとって有益な試験内容となるように設計しています。 ぜひ、fwywd の面白い採用試験を覗いてみてください。