【戦うサラリーマンSE】Azure Functions #1 はじめての関数作成

# 戦うサラリーマンSEシリーズについて
筆者であるKanachaneeは読んで字のごとく、いっぱい働くサラリーマンSE(笑)なのですが、
日々、技術や人と戦っています。そういった日々の戦いの記録や想い、時には戦う上で大事になる技術要素、
次のステップアップにつなげるために勉強したことの記録などを残していこうと考え、作成します。
ちなみにこのシリーズで取り上げる、技術要素の記事は深堀りしません。
ですので、オプション的な設定がどのような位置づけで存在しているのかなどの説明書きは期待しないでください。
ただ、私が実際に動かしたことの記録に基づいて記載していきます。

# この記事について
個人的にFaaS（Function as a Service）というのものが気になっておりまして、勉強しようと一念発起し、
別の記事でAWS Lambdaの記事を書いていますが、一方でAzureにもサービスがあるので、触ってみようと思った次第です。

# Azure Functionsについて
lambdaと同じですが、サーバーレス環境でコードを実行できるサービスということですね。
まだ、情報を集め始めたばかりなので、APIゲートウェイのようなものがあるかは分かりませんが、
TechNetの記事に従って学習を進めてみたいと思います。


>__Azure Portal で初めての関数を作成する__
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-first-azure-function

まずはAzureにログインして、Azureの基本である[リソースの作成]から行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/511ee475-6c12-d279-a341-f949a26f57b7.png)

↓のような感じでフィルターから[関数]で検索をかけると[関数アプリ]が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/9db2edc8-2b7a-935a-506c-19fef6c50219.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/5ded0aa0-b8f1-d934-461b-bb108f06e436.png)

関数アプリの画面で[追加]をクリックします。
まずは専用のリソースグループで管理しようと思いますので、新規で作成します。

ランタイムは[Python]、リージョンは[East Asia]にして、次へ進みます。
※Dockerコンテナはいまは触れません。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/545ae9df-b467-33d1-6b57-d84bb2c99712.png)

ストレージアカウントは新規で用意します。
理由は↓に記載されている通り、Azure Functionsを利用するにはBlobとかキュー、テーブルストレージを利用可能なアカウントが必要になるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/9b12cdb7-ff17-6e13-4b5c-3987006061af.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/aa30cb08-0128-0324-764c-d46e5267f5f5.png)

プランは従量課金で良いので、そのまま進みます。
説明は以下のように記載がありますが、いまのところ良く分かりませんので、とりあえず進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/c5b5983b-81a3-3936-7b76-20b7ff0d766a.png)

次も何もいじらずに次へ進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/9dbe40ca-cb86-1159-419b-0ea5bc1fcf3c.png)

Application Insightsというのは監視サービスの一種です。
以下に説明が記載されています。

>__Application Insights の使用量とコストを管理する__
https://docs.microsoft.com/ja-jp/azure/azure-monitor/app/pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/cff5146c-6eed-c8b8-0942-d3656318c3f7.png)

タグも不要なので、次へ進み、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/41c5196c-efdd-46d0-3df5-b0e14853069b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/09f0b329-ef09-faf4-e4c5-036b72afa7f7.png)

デプロイが終わりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/768efa9f-f74f-148c-46f3-fdfd91d08efd.png)

おー！なんかトップページはかっこいいですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/2a731ad6-fe31-e933-3884-9fd38c30f66e.png)

ではさっそく、「Hello World」していきますか。

## 関数の作成

新規作成をクリックすると↓のような画面に切り替わりました。
どうやら、エディタが必要なようです。私はVS Codeを選んで、続行を選択しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/300c1422-80f1-61c0-c2f4-4fcad4befe0a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/b045eedb-de30-644c-34ab-6fd59366afcf.png)

↓の感じでいろいろと注意文が表示されました。VSCodeのインストールが必要なこと、あとはNode.JSをインストールする必要もあるとのこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/139f645e-adf6-f1fa-2d95-796e746b0f53.png)

ということで、ローカル端末にNode.JSをインストールします。

>__Node.JSのダウンロードURL__
https://nodejs.org/en/download/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/b1ddde30-54be-392b-1a99-b928b371cfe6.png)

インストールが終わったら、コマンドを実行します。

```javascript:CoreToolsパッケージをインストール
npm install -g azure-functions-core-tools
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/51d7597a-9a19-8f91-b479-7865ec362c61.png)

終わると↓のような感じになるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/62d9ef15-5677-c226-f656-0f7eae438d2a.png)

次にVSCode側の操作になります。
先ほどのAzure Functions内の案内に記載されていたリンクに従い、ダウンロード/インストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/728fee44-2872-7c7a-85af-9a69bafaf9f9.png)

VSCode上で拡張機能が表示されるので、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/7cd2856c-ccf9-53fc-f93e-8a3b4af141ae.png)

インストールが終わったら、アクティビティバーのAzureロゴをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/d5f1d567-6103-8855-0985-9baf2c6db32c.png)

[Sign in to Azure]を選択し、ログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/8e067b25-0151-4aa0-0d8e-675b894c405c.png)

ログインが終わると↓のようなページが表示されるので、画面を閉じます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/eacbdd37-b2f0-6a95-29b3-c7af37cda190.png)

するとVSCode上に以下のような形で左側のツリーメニューにAzure Functionsポータル上と同じメニューが表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/d665c220-a778-e2b6-a32c-e52a9d0606c6.png)

あとはVSCode上で操作ができるようになります。
まずはフォルダマークの[Create New project]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/9fea5edb-97c4-587e-8d47-82b329ce34ee.png)

するとブラウザを選択できますので、とりあえず空のフォルダ１個を用意しておきます。
空のフォルダを用意したら、次に言語の種類を選択します。ここでは[Python]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/9d2b68e1-8ff1-c795-f84b-769155dfd320.png)

Pythonのエイリアスとか仮想環境を指定しろ、と書いておりますが、ひとまずここはスキップして先に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/d67eaed3-ae9b-90b0-f96f-902550e150f5.png)

次は記事に従って、[HTTP trigger]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/1aab7113-634e-b7e5-1484-3362deca2cc8.png)

関数名は適当に名付けて、Enterを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/d855a436-4a9b-af05-248a-74c03e345add.png)

承認レベルは関数を作成したいからという理由で[Function]を選択します。
※この時点では他の選択肢が何を意味するかは特に調べません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/7f3853d6-147f-2b2a-6486-f4baec9b26c5.png)

画面をどう開くかみたいな話なので、[Open in current window]を選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/66858469-1aed-4b51-8964-aff3c0c9f04c.png)

おー！ひとまず土台は整ったっぽいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/fe56e27c-3c45-cc4c-1eae-9d3d788999ae.png)

書かれているPythonのコード内容からして、ユーザー名を引数として、与えてやれば、「Hello,ユーザー名」的な感じに表示されるっぽいですね。

```python:サンプルコード
import logging

import azure.functions as func


def main(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    name = req.params.get('name')
    if not name:
        try:
            req_body = req.get_json()
        except ValueError:
            pass
        else:
            name = req_body.get('name')

    if name:
        return func.HttpResponse(f"Hello, {name}. This HTTP triggered function executed successfully.")
    else:
        return func.HttpResponse(
             "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.",
             status_code=200
        )
```

学習ページには一切情報が書かれておらず、不親切だなぁという感じなのですが、先ほどテストで作成した関数をデプロイするにはVSCode上でテスト関数名を右クリックすることでデプロイのメニューを表示させることが可能でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/ee59d47a-adb6-9878-39ea-dd1547066b90.png)

何やら、警告が表示されますが、構わず、[Don't warn again]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/842dd030-5eb7-432a-edd6-057c5b0accc9.png)

すると画面上のほうにnew Function App in Azureの項目が表示されるので、適当に追加する関数アプリの名前を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/32b7fd83-ad36-abcf-84ce-4e9cca6aa713.png)

Pythonのランタイムが選べるので、3.7.xを選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/6938c503-b3fa-bbb7-463c-648307e41fbb.png)

ロケーションは[East Aaia]を選択しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/c36c54ef-569d-4480-0343-7c62650fe84e.png)

おっ！作り始めたっぽいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/ffa12e8f-1b1d-5609-aeed-29f93e030857.png)

そして、デプロイが終わったと表示されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/0cc93694-6550-31fa-07b7-782488ef353a.png)

そして、Azure Functionsのポータルにログインしてみると先ほどの関数が追加されています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/2691e914-fa1b-e8ab-27bf-a70e3807e81f.png)

[関数のURLの取得]というボタンがあるので、そちらをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/f9e6ac60-e758-919e-889f-4ce8ae5eedc9.png)

[コピー]をクリックして、URLをコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/a4744be5-1f2e-527b-bdbb-f5447eeb7ce9.png)

記事の内容に従って、先ほど取得したURLの末尾に```&name=<yourname>```を追加してアクセスしてみます。
↓のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/b858e0c0-c361-c6a4-bb08-f9f6310f5354.png)

おー！ちゃんと名前が表示されましたよー！
課題１個クリアですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138274/5ad4e65a-f87c-039f-095b-4b23acb6d3b6.png)

次回もTechNetの記事内容に沿って、学習を進めていきます！