GitHub Actions を使って Azure ストレージアカウント の 静的なWebサイト にデプロイする

## ことの発端

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

https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blobs-static-site-github-actions

基本的にこの通りやれば良いのですが、 ```Cloud Shell``` で躓いたので、その辺をまとめて記事にしてみました。


## 資格情報を取得する

```ストレージ アカウント``` の ```静的なWebサイト``` へデプロイする場合、 ```azure/login@v1``` で使用する資格情報が必要になります。
この資格情報は ```Cloud Shell``` 取得します。

### ```Cloud Shell``` 用のストレージを作成（初回のみ）

```Cloud Shell``` では、作業用のファイルストレージが必要。
あくまで、 ```Cloud Shell``` の作業用なので、なるべく安い構成にしておくのが良いと思います。
個人的に気にする設定はこの辺り

* ローカル冗長ストレージ(LRS)
* データ保護（論理削除関連）は全てオフ

で、 ```ストレージ アカウント``` を作ったら、 ```ファイル共有``` を作成しておく。

そして、 ```Azure Portal``` の画面右上のアイコンをクリックして ```Cloud Shell``` を起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/9283a081-fa20-2a73-62e2-2632e6c8a4d1.png)

初回の起動だとこんな画面が表示されるので、お好みの Shell を選びます。（cmdは慣れているけど PowerShell はどうにもエラーが鬱陶しいのでBashを選択しました）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/a251529b-8725-5116-8182-ee864a44977b.png)

Shell を選択すると、次はマウントするストレージの設定をします。
このまま ```ストレージの作成``` をすると、オススメ構成でストレージアカウントが作成されて恐ろしい事態もあるかも（？）なので、先ほど作ったストレージを使用するよう設定を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/41827732-3271-e164-e929-b7ab77a1b745.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/8c8b72d1-7e53-56fa-5469-aa934242902b.png)

これで、 ```Cloud Shel``` が使えるようになりました。
また、何かの機会で使うかもなので、 ```ストレージアカウント``` は、このまま放置しても良いんじゃないかもです。

## Cloud Shell を使って資格情報を取得

[az ad sp create-for-rbac](https://docs.microsoft.com/ja-jp/cli/azure/ad/sp?view=azure-cli-latest#az_ad_sp_create_for_rbac) コマンドを実行します。

```shell
az ad sp create-for-rbac --name （適当な名前） --role contributor --scopes /subscriptions/（サブスクリプションＩＤ）/resourceGroups/（リソースグループ名） --sdk-auth
```

```--name``` オプションは省略可能です。
```サブスクリプションＩＤ``` は、各種リソースの ```概要``` に表示されています。（現在表示されている ```Azure Portal``` の URL に含まれているので、それをコピペしても良いかも）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038343/bfae9aaf-08fa-2dfb-9710-d74af65638f6.png)

で、実行するとこんな json が出力されます。
この json は後で使いますので、どこかにコピーしておいてください。

```json
{
  "clientId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
  "clientSecret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "subscriptionId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
  "tenantId": "99f432d5-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
  "activeDirectoryEndpointUrl": "https://login.microsoftonline.com",
  "resourceManagerEndpointUrl": "https://management.azure.com/",
  "activeDirectoryGraphResourceId": "https://graph.windows.net/",
  "sqlManagementEndpointUrl": "https://management.core.windows.net:8443/",
  "galleryEndpointUrl": "https://gallery.azure.com/",
  "managementEndpointUrl": "https://management.core.windows.net/"
}
```

## 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/2a930193-d254-5adb-bb7a-a0820bea7e33.png)

```Name``` を設定（後の ```yaml``` で登場）します。ちなみに、アンダースコアが使えるような説明がチラホラ散見するのですが、実際は使えません。（仕様変わったんかな？）
```Value``` は先ほどの資格情報の json をペーストします。
設定が終わったら、 ```Add secret``` を押下してこの画面は終了です。


## スクリプトを作る

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

```GitHub Actions``` は ```.github/workflows``` に yaml ファイルを配置することで実現しています。
で、ウチらは ```vue.js``` でフロントエンドを構成しているので、こんな感じの yaml を作りました。
肝は ```azure/login@v1``` と ```azure/CLI@v1``` と ```az logout``` 辺りになるかと思いますので、各自の構成に応じてビルドするなりすればOKかと思います。


```yml:.github/workflows/deploy.yml
name: Blob storage website CI

env:
  STORAGE_ACCOUNT_NAME: "hogehoge"
  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, build, and test
        run: |
          npm install
          npm run build:production --if-present

      - uses: azure/login@v1
        with:
          creds: ${{ secrets.HOGEHOGE}}

      - name: Upload to blob storage
        uses: azure/CLI@v1
        with:
          azcliversion: 2.0.72
          inlineScript: >
            az storage blob upload-batch
            --account-name ${{ env.STORAGE_ACCOUNT_NAME }}
            -d '$web'
            -s ./dist

      # Azure logout
      - name: logout
        run: |
          az logout
```

ブランチを工夫すれば、ステージング環境へのデプロイとかも作れます。（yamlファイルは別途作成のこと）