はじめてのWebAppsのデプロイ自動化

# はじめに
仕事でWebAppsと触れ合ってるのですが、いつもいつもaz cliを使ってデプロイすることにすっかり飽きてしまった・・・
WebAppsではGithubと連携してデプロイの自動化ができるのは知ってたので
この機会にチャレンジする

# 参考

https://learn.microsoft.com/ja-jp/azure/app-service/quickstart-python?tabs=flask%2Cwindows%2Cazure-cli%2Cazure-cli-deploy%2Cdeploy-instructions-azportal%2Cterminal-bash%2Cdeploy-instructions-zip-azcli

https://learn.microsoft.com/ja-jp/azure/app-service/app-service-sql-asp-github-actions

この２つの記事の合わせ技なんで、覚書ってことで。

# サンプルのダウンロード

自前のGithubにサンプルをフォークする

```
https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
```

Fork クリック、そのあとCreate Fork クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/aee74a11-245f-49d9-6cd3-7fc602667675.png)

Fork成功。これでサンプルのダウンロード完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/490d0ea1-9177-aec1-22eb-366dcebc1e8e.png)

# リソースグループの作成

手順書くの面倒なので割愛。
pro-rg-nabehiro-001 つくりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c036a9cf-e555-5117-9aaf-c42d28ebf523.png)

# WebAppsの作成
AppServiceで検索して　App Service クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/aa3c0eb9-e7c0-44eb-6d71-79a99d97d39c.png)

 作成＞＋Webアプリ　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/922b249a-29aa-8f62-3d82-499f46890e77.png)

以下の要領でパラメータ入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/94fa8b1d-8984-7ed8-f3db-16d219be3c9f.png)

***基本***
| 項目 | 内容 |
|:-----------|------------:|
|リソースグループ|pro-rg-nabehiro-001|
|名前|nbfr151v|
|公開|コード|
|ランタイムスタック|python3.9|
|オペレーティングシステム|Linux|
|地域|JapanEast|
|オペレーティングシステム|Linux|
|Linuxプラン|Pro-ASP-nabehiro-001|
|価格プラン|BasicB1|

これで 確認と作成　クリック
※この時点で　デプロイ自動化設定やってもいいけど、やりたいことは今稼働してるWebAppsに対して自動化したいのでいったんこの進め方にする

で、作成　クリック

1分くらい待つと・・・デプロイ成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2cfd287e-0d3e-949e-9814-b910aaa9a521.png)

# サービスプリンシパルの作成
Entra ID＞アプリの登録＞新規登録　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e8c656b9-caba-abe1-5054-4ab4a63f823b.png)

名前を決めて…　登録　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/86f0be5b-c749-6f2b-1be3-b888b6401cbf.png)

アプリの登録画面に戻るので検索するとできあがってることが確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/65541967-ffa1-8f87-d54a-aef383b3e04b.png)

つづいて、権限付与。
リソースグループ画面より
pro-rg-nabehiro-001>IAM>ロールの割り当ての追加　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/6a17d240-db78-3a21-99c2-0bde39c3d094.png)

特権管理者ロール　より　共同作成者　選択して　次へ　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5590b8bb-0854-267c-a0d8-cf9186c4e205.png)

メンバーを選択する　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f36ea5d6-5c69-e593-c3ea-cac50508aa82.png)

pro-appid-nabehiro-001 を検索して　選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/dcb9a0fc-2aeb-168c-72e1-a3979a5bfb5c.png)

選択できたことを確認して　選択　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e456faa4-8a12-97af-8ec8-8c7fd6222b57.png)

レビューと割り当て　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c092534d-d76e-1b7a-b163-606d0e75ee51.png)

権限付与完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/72e2648c-3fa9-ae97-dc44-0efdc326dba2.png)


# 継続的デプロイの設定
デプロイセンター　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/bb67187e-0894-f8a5-03e0-3b9350884954.png)

ソース：Github　選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1328e369-b339-169c-6c14-1f932740057a.png)


ユーザーとしてサインインのところで持ってるGithubアカウントを使用
オーガナイゼーション、リポジトリ、ブランチはさっきDLしたリポジトリを選択
ワークフローオプションはそのまま。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/18a825f4-24a2-34fc-c07a-6c80d118204c.png)

認証の設定では、
認証タイプはユーザー割り当てIDを選択
IDには、さきほど作成したサービスプリンシパルを選択してたらOK（っていうかそれしか選べない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/b0bb1052-ac8a-2cb4-6050-d4d8b5411415.png)

で、保存　クリック


ポータル側で完了確認できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/0d3ce49b-a4d8-fc36-52b2-528ef0888827.png)

github側でも完了確認できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e3821137-fc2a-ef1e-8f7a-ab3c8991e9ef.png)

動作確認のため、ドメインへアクセス
画面表示できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3994c39b-82fe-08c2-8f58-0e1a063c375e.png)

# オマケ：このgithub actions、コミットしたらその都度デプロイする。。。
actionsのコード見たらなんかpushするたびに実行するように見えたので
ためしにhello.htmlを更新してpushしたら・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c2c619df-8568-f6c7-7a90-b6f16a8f66a7.png)

動き出した。こいつ、、、危ないやつだな。。。
ちょっと改造が必要なようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/84afaa95-a47c-d5c3-7761-3747329057c5.png)

# オマケ２：マネージドIDは使えない
マネージドID使ったらわざわざサービスプリンシパル用意しなくていいじゃないか！
って思い、作ってみたけど継続的デプロイでは選択できなかった
ポータルにもシステム割り当てIDが使える、的な記述がなかったので選択できないのかもしれない。