GitHub ActionsからAzureAppServiceにデプロイする

# はじめに
QiitaAzure投稿キャンペーン中で、良い機会なのでGitHubのリポジトリをAzureにデプロイする方法についてまとめました。
Deploy to AzureというVSCodeのエクステンションを使用すると驚くほど簡単にできました。

# 構成
リポジトリにGitHub、デプロイする先にAzureのAppServiceを使用します。
GitHubからAzureへの連携にはGitHubのActionを使用しますが、基本的にVSCodeのエクステンションが勝手にしてくれるため、はじめての人でも楽にできます。

# 手順
1. GitHubのプロジェクトを作成
2. AzureのAppServiceのリソースを作成
3. GitHubのActionのworkflowを作成
4. ソースをpush（デプロイ）

# 手順詳細
## 1. GitHubのプロジェクトを作成
GitHubのリポジトリを作成します。特に必要な設定はいらないので省略します。

## 2. AzureのAppServiceのリソースを作成
デプロイ先のAppServiceのリソースを作成します。基本的にはAzureポータルで作成することになります。

2.1. ポータルにログインしてAppServiceの画面まで移動します。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/c11f685f-121c-b065-e854-d490c20e7175.png)

2.2. AppServiceの画面から追加ボタンを押して、リソース作成画面に移動します。

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/f11f70d6-dfd9-4d0a-5030-97585ed513fd.png)

2.3. リソースの作成に必要な情報を入力します。
※インスタンスの詳細については、アプリに影響を与えるため注意してください

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/102602d3-1999-ea79-100c-b95e32d35149.png)

ちゃんと作成できるとこのような画面が表示されます。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/15251884-e3ba-6fa9-1846-9c8d327bfff8.png)

## 3. GitHubのActionのworkflowを作成
GitHubのActionに使用するyamlファイルを手で書くのは手間なのでVSCodeのエクステンションを使用します。

### リポジトリをクローンしてソースを追加する
GitHubのリポジトリをクローンしてデプロイしたいソースを追加します。
※pythonをデプロイしたいときはrequirements.txtを読み取ってインストールするので```python -m pip freeze > requirements.txt```コマンドでpipを吐き出しておいてください

### Deploy to Azureのインストール
VSCodeのDeploy to Azureというエクステンションを使用するとGitHubのActionのyamlを自動的に生成してくれます。
1からyamlを作るのは手間なのでDeploy to Azureをインストールします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/cb117a3f-1271-d39d-2a77-e4b8029e3700.png)

### GitHubのAccessTokenの取得
Deploy to Azureに必要なため、以下のGitHub Docsの通りに、AccessTokenを取得します。
https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

###  GitHub Actions を制御するyamlの生成
3.1. クローンしたディレクトリをVSCodeで開いてCtr + Shift + Pでコマンドパレットを開き、Deploy to Azure:Configure CI/CD Pipelineコマンドを実行します。
3.2. GitHubのAccessTokenを聞かれるので事前に取得したAccessTokenを入れます。
3.3. Webサービスの環境とサブスクリプションを聞かれるので入れます。
3.4. 4つめの入力項目が2で作成したAzureのAppServiceのリソース名になっているはずなのでそれを選択します。

ここまで入力すると開いているディレクトリ内に```.github\workflows\workflow.yml```ができているはずです。

### yamlの修正
環境によっては、v1のアクションが使えない可能性があるため、```azure/webapps-deploy@v1```を```azure/webapps-deploy@v2```に修正します。


## 4. ソースをpush（デプロイ）
ここまで、作成したすべてをGitHubのリポジトリに反映させます。
ソースをpushしたタイミングで、GitHubのActionがyamlを読み込みデプロイまで実行してくれます。

Actionの途中経過を見たいときは、GitHubの対象のリポジトリを選択して、ActionsタブをクリックするとコミットメッセージでActionのworkflowが走っています。

以下のようになれば完了です。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481713/4361fb7c-5e6b-5d0b-e626-c9e4d67505bf.png)

## その他
このyamlにコードを追加すれば、テストの自動化もできるようになります。ちなみに、テストが失敗するとActionが止まりデプロイされません。
以下はpytestを実行したときに追加した例

``` workflow.yml

    - name: pytest
      working-directory: .
      run: |
        pip install pytest
        pip install -r requirements.txt
        python -m pytest
```

# おわりに
Azureのデプロイ方法をまとめました。AzureにDevOps starterというここで書いたものを全てGUIでできる機能もありますが、デフォルトがpython2だったことやダッシュボードなどなど不要なものまでついてきたため、自分の好きにできるこの方法をまとめました。