Visual Studio Code で Azure Web App の作成とデプロイをする

# はじめに
今回は`Azure App Service`について学ぶ機会があったので、`Azure App Service`に含まれる`Azure Web Apps`について勉強した内容をまとめました。`Web Apps`は、多様なランタイム、`SSO`、`CI/CD`、スケールアウト/スケールイン、デプロイスロット、に対応しているマネージドな`Web`サーバーになります。堅牢な`Web`アプリを簡単に作ることができることから、非常におすすめな`PaaS`サービスとなります。本記事は、`Microsoft`公式ドキュメントにある以下のクイックスタートを参考にしていますので、詳しく知りたい方は確認してみてください。

https://learn.microsoft.com/ja-jp/azure/app-service/quickstart-dotnetcore?tabs=net70&pivots=development-environment-vscode

# App Service Plan と Web App の作成
`Web App`の作成やデプロイや、`Azure`ポータル、`Visual Studio`、`Visual Studio Code`、`Azure CLI`、`Azure Developer CLI`、`Azure PowerShell`、を使って行うことができますが、ここでは`Visual Studio Code`を使って、`Web Apps`の作成とアプリのデプロイを実施することにします。`Web App`を作成するためには、`App Service Plan`が必要なので両方とも作成していきます。

:::note info
`App Service Plan`とは、`CPU`やメモリーなどのアプリを動かすVMサーバー群のスペックを決める枠組みになります。
:::

`Visual Studio Code`で、以下の「`Azure App Service`」の拡張機能をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/3703c673-184f-a1b1-566a-3a707d639179.png)

コマンドパレットを開き、「`azure app service: create new web app`」と入力し、「`Azure App Service: Create New Web App...(Advanced)`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/0972a986-5e03-ab7e-d1c1-6b8760f6be4c.png)

使用するサブスクリプションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/998da044-cb61-c7b2-9b7f-ee1708195930.png)

`Web App`の名前として、グローバルに一意の名前を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/9bf0125f-6895-af43-0387-94b13250827d.png)

「`+ Create new resoure group`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/ab4c766f-791d-b7dc-4023-932ad91d0ad5.png)

リソースグループ名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/b67aa051-313a-4ea5-8fb5-369ebd6a98d3.png)

使用するランタイムを選択します。(ここでは`Python 3.11`を選択しました。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/554ef44d-fd0e-e102-e1dc-d0360fd17dca.png)

リソースのリージョンを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/3596c7e3-8738-322d-c29d-9010b1d2d490.png)

新規の`App Service Plan`を作成するため、「`+ Create new App Service plan`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e139f816-148e-9668-4948-4a77b8984e83.png)

`App Service Plan`名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/d3bad498-0aea-461d-1f3f-01f9936d28a7.png)

`App Service Plan`を選択します。(ここでは`S1`を選択しました。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/34ad216c-489e-3f43-84f1-025b11a56c10.png)

`Application Insights`を作成するため、「`+ Create new Application Insights resource`」を選択します。(`Skip for now`を選択してもよいです。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/543bb2e4-a572-0a5f-1dd3-71bbfd6735d4.png)

`Application Insight`名を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e23ce133-6be1-6be6-eab2-157e3f53e6c3.png)

`Visual Studio Code`の`AZURE:ACTIVITY LOG`タブで「`Succeeded`」が表示されれば、無事`App Service Plan`と`Web App`が作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/fa41706e-2103-b353-74da-99a91cad1b91.png)

また、`Visual Studio Code`上でリソース一覧を確認すると、先ほど作成した`Web App`が表示されています。(`Web App`名は、`sample-web-app-20231029`)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/217528c9-756a-6669-f165-1dfcf759ea40.png)

# サンプルアプリケーションのクローン
次に、`Web`アプリケーションをデプロイする前に、アプリが無い場合はサンプルアプリをクローンします。(`Web`アプリが用意されていれば、次の`Web`アプリのデプロイに進んでください。)

以下のサンプルアプリをクローンします。
```:console
git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
```

アプリケーションフォルダーに移動します。
```:console
cd msdocs-python-flask-webapp-quickstart
```

:::note warn
2023/10/29日現在、クローンしてきたままでアプリを実行しようとすると以下のようなエラーが出ることを確認しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/bbdade52-13c8-e3e6-acd9-df0e4b1818cd.png)
このエラーの原因は古いバージョンの`Flask`が使用している`Werkzeug`というライブラリのアップデートよるものだそう。そのため、2.3.3以降の`Flask`のバージョンを指定することでこのエラーを回避することができます。`requirements.txt`を以下の書き換えてください。
```:requirements.txt
Flask==2.3.3
gunicorn
```
:::

アプリの仮想環境を作成します。`OS`に合わせて以下のどちらかのコマンドを実行してください。
```:cmd(Windows)
py -m venv .venv
.venv\scripts\activate
```

```:bash(Linux)
python3 -m venv .venv
source .venv/bin/activate
```

依存関係をインストールします。
```:console
pip install -r requirements.txt
```

アプリを実行します。
```:console
flask run
```

ブラウザの検索バーに「 http://127.0.0.1:5000 」と検索して、以下の画面が表示されれば無事サンプルアプリが動いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/963b7d8e-ea82-d459-65ca-5eaa43c0e612.png)

# Webアプリのデプロイ
コマンドパレットを開き、「`Azure App Service: Depoy to Web App...`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/94dda0b2-a626-83e5-9fe1-3cb8cbb36926.png)

サンプルアプリが含まれるディレクトリを選択するために、「`Browse...`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/665cdd14-bf48-2d01-1dc1-b6db493b75f8.png)

エクスプローラーが表示されるので、サンプルアプリをクローンした場合は「`msdocs-python-flask-webapp-quickstart`」を「`Select`」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/d30e0a4f-f039-5f5f-0542-6cd271ac79c9.png)

利用するサブスクリプションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e6fdf159-c21f-8958-776c-f6c4a09db37e.png)

デプロイする`Web App`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/e7696b67-5f2c-84e1-8434-fcc0e4d3d086.png)

デプロイすることで前回のデプロイが上書きされることについての警告が出ますが、気にせず「`Deploy`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/3ca88aa6-2fa2-cc52-3504-9aad4083ee87.png)


## Web Appがデプロイされたことの確認
`Visual Studio Code`でコマンドパレットを開き、「`Azure App Service: Browse Website`」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/f5df33f5-cce4-c8ee-0d36-233a368e49bc.png)

利用するサブスクリプションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/4123cf3d-4c0e-4ba9-14a7-8d8af18aeecd.png)

ブラウザで表示したい`Web App`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/97a61925-bdf3-5946-733f-07ffc8ae79b9.png)

ブラウザが開かれるので、以下のような画面が表示されれば、デプロイの成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2452857/6ed89439-3230-7b6b-8014-92d89ce0e8ff.png)

# おわりに
本記事では、`Visual Studio Code`を使って`Azure Web App`の作成とデプロイをしました。まず最初は`Azure`ポータルを使って作成＆デプロイするのが簡単に思えるかもしれませんが、`Visual Studio Code`を使えば、わざわざ`Azure`ポータルにログインしたり、検索バーから`Azure App Service`を検索したりする必要がなく、コマンドパレットから全ての操作が可能なため、慣れると非常に便利だと感じました。今回は紹介していませんが、`Visual Studio Code`を使えば、`Azure Functions`の作成やデプロイも今回と同じようにできるため、ぜひ試してみてください。