GitHub Actions を使って Azure Functions にデプロイする

## ことの発端

いい加減、 ```VSCode``` の ```Azure Functions``` 機能拡張を使っての手動デプロイや止めようと思い、 ```GitHub Actions``` を使ってデプロイしようと試みるの巻。
本家の説明はこちら

https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-how-to-github-actions?tabs=dotnet

この説明は結構アレだったので記事にしてみました。

## 資格情報を取得

```Azure Portal``` で ```Functions``` の ```概要``` 画面を表示し、画面上部の ```発行プロファイルの取得``` をクリックすると ```PublishSettings``` という長～い拡張子のファイルがダウンロードされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/f169ad6a-a23d-90d9-b9b8-db253a3f46fa.png)

本家の説明では json になっていますが、こで取得できる資格情報は昔から xml です。

## ストレージの準備（必要に応じて作成）

既に、開発しているシステム構成の中に ```ストレージアカウント``` が存在しているのであれば、それを間借りしても良いかもです。無ければ、 ```GitHub Actions``` 用の ```ストレージアカウント``` を作成します。

で、この ```ストレージアカウント``` の接続文字列をコピーしておきます。


## アプリケーション設定

```Azure Portal``` で ```Functions``` の ```構成``` 画面を表示します。
ここで ```AzureWebJobsStorage``` が設定されていれば、以下の手順は不要です。

### アプリケーション設定を追加

```Azure Portal``` で ```Functions``` の ```構成``` 画面を表示して ​```新しいアプリケーション設定``` をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/411b84f5-98ab-ae71-107d-b749ed7581d9.png)

表示された画面にて ```名前``` を ```AzureWebJobsStorage``` とし、 ```値``` は 先ほどの ```ストレージアカウント``` の接続文字列を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/c036bc8a-57fe-cec9-eb58-9a6ffc48b0e8.png)

この設定により、 ```GithHb Actions``` を実行することで、 ```AzureWebJobsStorage``` に指定した ```ストレージアカウント``` の Blob に ```azure-webjobs-hosts``` と ```scm-releases``` というコンテナが生成されます。

## GitHub で Secrets を設定

リポジトリの ```Settings``` > ```Secrets``` > ```New repository secret``` の順にクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/14d6d01b-9dc4-e89d-870b-3cd8c39ef930.png)

すると、登録画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/51120cc1-9cf2-fd0d-d7e4-4955d3d38d38.png)

```Name``` を設定（後の ```yaml``` で登場）します。ちなみに、アンダースコアが使えるような説明がチラホラ散見するのですが、実際は使えません。（仕様変わったんかな？）
```Value``` は先ほどの  ```PublishSettings``` という長～い拡張子のファイルをエディタで開いて中身の xml をペーストします。
設定が終わったら、 ```Add secret``` を押下してこの画面は終了です。


## スクリプトを作る

下準備は終わったので、これからビルドの設定を作って終わりです。

```GitHub Actions``` は ```.github/workflows``` に yaml ファイルを配置することで実現しています。
で、ウチらは ```vue.js``` でフロントエンドを構成しているので、こんな感じの yaml を作りました。
肝は ```Azure/functions-action@v1.3.1``` の辺りです。
ちなみに、古い記事で ```Azure/functions-action@v1``` となっているものがありますが、これが原因で２時間ほど闇を彷徨うことになりました。  ```Azure/functions-action@v1.3.1``` を使用しましょう。（v1.4はまだ使えないのかな？）

```yml:.github/workflows/deploy.yml
name: Functions app CI

env:
 ​FUNCTIONS_APP_NAME: "hogehoge__staging"
 ​NODE_VERSION: "14.16"

on:
 ​push:
   ​branches: [master]

jobs:
 ​build:
   ​runs-on: ubuntu-latest
   ​steps:
     ​- name: Checkout repository
       ​uses: actions/checkout@v2

     ​- name: Use Node.js ${{ env.NODE_VERSION }}
       ​uses: actions/setup-node@v2
       ​with:
         ​node-version: ${{ env.NODE_VERSION }}

     ​- name: npm install and build
       ​run: |
         ​npm install
         ​npm run build --if-present

     ​- name: 'Run Azure Functions Action'
       ​uses: Azure/functions-action@v1.3.1
       ​id: fa
       ​with:
         ​app-name: ${{ env.FUNCTIONS_APP_NAME }}
         ​package: .
         ​publish-profile: ${{ secrets.HOGEHOGE}}
```


## 注意事項

1. ```VSCode``` から手動デプロイをしてしまうと、```Azure Functions``` の ```アプリケーション設定``` に ```WEBSITE_XXXX...``` みたいな設定値が追加されます。すると、 ```GitHub Actions``` の実行時にエラーが発生するので、適宜、 ```WEBSITE_XXXX...``` を削除しましょう。（設定名にプリフィックス付けて、間違っていたら戻すというのもアリかもだけど、後で動作確認したら、ちゃんと消しといてね）

2. ```GitHub Actions``` にてデプロイを行った後に、 ```ストレージアカウント``` の ```azure-webjobs-hosts``` コンテナと ```scm-releases``` コンテナを削除してしまった場合、 ```azure-webjobs-hosts``` コンテナは次回の ```GitHub Actions``` で新規に作成しますが、 ```scm-releases``` コンテナは新規に作成してくれずエラーが発生します。　この場合、手動で ```scm-releases``` コンテナを作成することで解決します。