Github Codespaces使ってAzure Functionsの開発環境作る

# はじめに
仕事の関係でAzureFunctionsを使うことになった。
AzureFunctionsは座学でしか扱わなかったので、試しに使ってみる
せっかくなのでローカル環境は使わずgithub 環境使って作成する

# 参考

https://learn.microsoft.com/ja-jp/azure/azure-functions/create-first-function-vs-code-python

一番参考になりました。感謝。

https://qiita.com/Kuma-0x0/items/40085880f7dc034cd4c8

# 前提
* Azureアカウント取得済み
* Github CodeSpaceが利用できる

# 開発環境づくり
## Codespacesの設定ファイル作成
コマンドパレット（Ctrl+Shift+P）より、”codespaces: Add Container Cofiguration Files...”実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/66945ac0-6486-91ea-0bde-05d615f3b29c.png)

"Modify your active configuration..."クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/187ea561-66de-5b55-842d-1273ea4f6c38.png)

以下を選択して、OK クリック
* Azure Functions Core Tools
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3c694d4f-d385-1cb8-7bdc-3a11dc66611f.png)

OK クリックすると、画面右下のポップアップからRebuildを促されるので "Rebuild now" クリック 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e32d3d82-5f45-7507-8adb-b8e5d3277da4.png)

もう一回聞かれるので "Rebuild"クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9887ab21-7bcc-a052-7824-3be50d5ab770.png)

こんな感じで裏でgithubが頑張ってるので数分程度待つ。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f2ed01b6-e616-3094-e560-42fc8c9f91b8.png)

再起動後、左下あたりにアイコン（赤線部）が増えてるのを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/cf0fc7be-f938-4650-4127-c4d1ec484080.png)

# ローカル上でAzure Functionsプロジェクトの作成
## Azure Functions プロジェクトの作成
画面左下のWORKSPACEに見えないけれども。。。クリックできる箇所がある。
Create Function...　クリック（ホントはFunctionのアイコン出るはずなのになぜか表示されなかった。。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/bec40480-14b6-5153-6281-a91bb74302ea.png)

今動かしてるリポジトリでFunctions作りたいので azfunction... クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a2208317-53d6-9d04-51be-50160f09e3a0.png)

Python クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/dbe4d3ce-d341-9f69-623d-84b037f202d8.png)

推奨されてるので Model V2 クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9934d578-1e03-2a8e-d7d5-47ecced28472.png)

python 3.10.13 クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5e726171-5c09-ab74-9033-bddfe9f773fd.png)

最終的に作りたいものは時間実行の関数だけど今はとりあえず作りたいので"HTTP trigger" クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/53967b10-5bdb-cf39-7378-8b93bac655d0.png)

ここはこのままEnter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1da48f06-372e-5c86-0a28-42926eceff95.png)

認証キーとかは不要でとりあえずつながるやつ作りたいのでANONYMOUS クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/4a40a4ab-37c9-f149-2918-4bacc149c49d.png)

できあがり。
処理の本体は、function_app.py
nameって引数に値を入れて実行すると返事を返すプログラムっぽい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/95ca7180-4c02-e8b1-cf56-6eed772ff0fe.png)

最後に、requirements.txtできてるのでターミナルでインストールしておくこと

```
pip install -r requirements.txt
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e86a08c5-8be5-285a-58a0-4063e79f8903.png)

## 試しに動かす
早速出来上がったローカル上（正確にはcodespace上）でHTTP Trigerを動かしてみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/4542ea2e-35e2-be90-7b7d-b56760443c10.png)

少し待つと、新しいターミナルが増えてる。
で、そこのログにURLが割り振られてる。
http://localhost:7071/api/http_trigger
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/975b12a7-8c3a-b62e-74dc-d6cacffbd6a6.png)

リンクをクリックすると、ちゃんとfunctionが動作していることが確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/bbe78a40-b4d4-a7f2-fee5-2b7045fe02eb.png)

次はこのURLに対してcurlを飛ばす

```
curl http://localhost:7071/api/http_trigger
```

結果はこちら、動作OK。引数nameを入れてって指示出た。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/900c8401-ec52-61a9-6c11-98a7679a4731.png)

では次は引数nameを入れて実行

```
curl http://localhost:7071/api/http_trigger?name=nabehiro
```

成功！無事にHTTP Triggerの処理が実行できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2abb7dee-7d06-aebf-8b56-34ba4bf7da22.png)


# Azure上にAzure Functionを作成する
ローカルに実行環境できたので、続いて、Azure上にFunctionを枠組みを作ろう。
これ、ポータル上で作ってもいいけど、せっかくなのでcodespace上で作った

AzureにログインしてからFunctionを作る
## Azureログイン
"Sign in to Azure" クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e60efe5e-b18a-c1a7-02e6-8b1c7a6a2207.png)

ブラウザの別タブからログイン画面出るのでクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/7d37dc5a-1e15-03d0-beec-8a909168e5af.png)

ログインに成功するとVSCode上で読み込み待ちになるのでしばし待つ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/588d4e2f-2b87-553e-b2cb-fe18c4fabb00.png)

完了したら以下のようにリソース一覧が現れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3c42424d-5472-2704-d2a4-5ca7882a930f.png)

## Functions作成
Azure functions を右クリックして　"Create Function App in Azure" クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/556b3c0d-aea2-a92e-c5ef-8cbc90daf506.png)

functionsの名前を決める。グローバル名になるため適当に且つかぶらないやつを選ぶ。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9824be42-ceeb-73c5-2bf1-e85400cb6511.png)

pythonのバージョン決め。python3.11で。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/529dcb7b-a9e7-5e06-0c71-0e6624bfd1fd.png)

ロケーションの選択。japan eastで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/d5f8b85c-dce9-baec-d6db-c607d5363215.png)

しばしまつ。。。裏でいろいろと頑張ってくれてるようだ。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c8d263ad-71e4-62dc-efba-0f440f352e4e.png)

１分ほど待ったらできた。
ログ末尾にURLが出てるのでクリックしてみる

https://pro-nb-hellofunc-001.azurewebsites.net

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/fcb8ea9d-ee00-d657-e76d-00c07d207ef9.png)

動いてるっぽい！でも、このままは空っぽなのでちゃんとデプロイしてやろうと思う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9d148ec4-e405-3169-9d4b-e82627169074.png)

# Azureにデプロイ
ローカルにアプリができて、AzureにFunctionsの枠ができたので、いざデプロイ。
※あらかじめCodespace上でAzureログイン済みであることを確認してから実施

WORKSPACEのアイコンクリックしてから "Deploy to Function App..." クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/94a3b3db-5984-f9c9-a36a-1f7f7d5bda91.png)

クリックすると、画面上部に選択可能なfunctionsがあるので "pro-nb-..."クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ef454b7c-b5a3-436a-4d7e-00a73ac31bac.png)

"Deploy" クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/678feddd-cf6f-3c68-fc04-9aa735f475f8.png)

１分ほどまったら完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5a314158-eb48-9402-3710-5b2e9336c816.png)

## ポータルからデプロイっぷりをチェック
ポータル上で、デプロイ先のfunctionsを選択
関数＞アプリファイル　へ移動するとデプロイしたファイルが確認できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/20d04e65-e8e4-896a-f3c3-d7645e5dc97c.png)


## 動作確認しよう
codespace上のターミナルから実行

```
https://pro-nb-hellofunc-001.azurewebsites.net/api/http_trigger?name=nabehiro
```

成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ffde8011-8fe6-8501-a5ba-342addaba2a0.png)

ついでにブラウザからも動作確認しよう
こちらも成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2f9247f5-ad48-9bdc-904a-239a647d3265.png)


～おしまい～