秒速でAzureにWEBアプリをデプロイする【忙しい人のためのAzure+Flask入門】

会社に入ってからのJavaでの新人研修以来WEBアプリの開発なんてしてこなかったインフラエンジニアの私が、秒速で（ちょっと古い）[チュートリアル:Visual Studio Code から Azure App Service on Linux に Python アプリをデプロイする](https://docs.microsoft.com/ja-jp/azure/developer/python/tutorial-deploy-app-service-on-linux-07)を実施して詰まったところや面白いことをまとめてQiitaの記事にしてみます。

# チュートリアル通り進めてみる
本アドベントカレンダーには以下のように書いてありました。
>Azure App Serviceと呼ばれるPaaSを使ってWebアプリをサクッと作ってデプロイすることが出来ます。

サクッとデプロイできてしかもAzure Machine Learningとかなんか楽しそう！な感じだったので、やってみることにしました。
チュートリアルは7つの項目を順番に進めていけばVSCodeでAzureへのアプリのデプロイを試すことが出来るように構成されています。以下で実際にやってみます。

![evidence_000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/312c6329-0ff7-a3ac-e8b5-11f8ccace911.jpeg)

まず、Azure アカウントを用意したあとに
以下をインストールします。

- Python 3.7
- Visual Studio Code

そしてVSCodeの拡張機能で**Python 拡張機能**と**Azure App Service 拡張機能**をインストールします。
この辺りは脳死でできました。

![evidence_004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/e55cb485-fcc8-06c1-e320-0153cf2d5fc6.jpeg)
Azureのアカウントを作ると上図のような何やら**楽しそうな画面**が表示されます。
が、時間がないので先に進みます。

## 手順2でいきなり詰まる
手順2に進むと早速**詰まってしまいました**
![evidence_008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/4213553b-3347-2fd8-5568-091c30b65f5e.jpeg)

何やら```.venv\scripts\activate```を打つと赤いエラーが出ました。**ごにょごにょして**解決して先に進みます。（後述）

因みにこの手順ではアプリの準備として3つの選択肢が用意されていますが、私は「***オプション 3:最小限の Flask アプリを作成する***」を選択しました。これが一番楽そうでした。

そして「***3:Visual Studio Code から App Service を作成する***」を言われた通りおとなしく実行します。時間がないので、（省略可）となっているところは飛ばします。
ここまでやると以下のような「***ねえ、Python開発者！***」ページが表示されます。
![evidence_011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/7409e1cc-9848-903b-84e4-80968467c388.jpeg)


## 手順4はやらなくてよさそうだけどやる
次に「***4:Azure App Service の Python アプリ用のカスタム スタートアップ ファイルを構成する***」を実施します。
カスタムスタートアップファイル　とあるので「別にやらなくてもいいのかな？」と思ってしまいますが、やらないと動きません。
このページは結局どれを入れたらいいのか迷う方もいるかもしれませんが、ここまで同じ手順を踏んでいれば
```gunicorn --bind=0.0.0.0 --timeout 600 hello:myapp``` を入れればよいです。

そして「***5:Azure App Service on Linux に Python Web アプリをデプロイする***」の通り進めてデプロイします。
手順4をやっていないといくら画面を更新しても「***ねえ、Python開発者！***」ページが表示されたままです。

# そして作ったアプリを消し去る・・・
ログを見ている暇は無いので手順6は飛ばして手順7を実行してアプリを消し去ります。
ここの手順は少しわかりづらいですが、以下のように消します。
![evidence_021.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/7a69a248-c039-61a4-6401-33544b1aa749.jpeg)
左側のメニューバーを開き「リソースグループ」をクリックします。

![evidence_022.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141823/76778a76-cfbb-5259-dedc-0c72edc0d27c.jpeg)
すると先ほど作成したリソースグループの中にいろいろ出来上がっていると思うので、すべて選択して、「削除」をクリックします。

これでチュートリアルがすべて完了しました。
本当にサクッと終了しました・・・

# 詰まったところなどまとめ

#### ``` .venv\scripts\activate ```でエラー
インフラエンジニアをやっていると秒でわかるのですが、これはPowerShellのExcutionPolicyのエラーです。
Windows限定かと思います。PowerShellのスクリプトは```filename.ps1```などという名前で保存しますが、これを実行するにはExecutionPolicyを設定する必要があります。
管理者権限があれば(おそらくUACもスルー出来る必要がある） ```Set-ExecutionPolicy -ExecutionPolicy RemoteSigned```と打ちましょう。
それでもアクセスが拒否されましたとか言われたら上記のコマンドにさらに```-Scope CurrentUser```をつけましょう。

#### オプション 3:最小限の Flask アプリを作成する
手順2では単純にFlaskのテスト用のアプリを作る必要があるのですが、Webアプリの知識が無かったりFlask触ったことない人はおとなしくオプション3を実施してみましょう。
私のように変に***オプション 1: VS Code Flask チュートリアル サンプルを使用する***をやろうとするとルーティングやflaskの環境変数などの仕組みを理解していないために30分ほど時間を無駄にします。

#### Chromeの自動翻訳は消した方が良さそう
現役でWEBの開発をやっている方からすると当たり前なのかもしれませんが、Chromeの自動翻訳は開発してるアプリにたいしては翻訳しない設定にしておいたほうが良さそうです。
そうしないと***ねえ、Python開発者！***などに勝手に翻訳されてしまいます。

# やってみてわかった面白そうなこと
今回Azureを初めて触ってみました。
実際やってみる中で、Azureのクイックスタートセンター画面を開いてみると、何やらいろいろ楽しそうなことが出来そうな気がしてきます。
特にApp Serviceの画面を開くと、他にどんなことが出来るのか何となくアイディアがわいてきます。

この短時間で、Python+FlaskでWEBアプリをAzure上にデプロイするまでの流れを体験することが出来ました。
かなり簡単だったので、実際に何かサービスを作ってデプロイして今度はゆっくりそのアプリについて記事にしようと思います。

※秒とはいきませんでしたが、チュートリアルを始めてからこの記事を投稿するまで2時間半でできました。本当にサクッとデプロイできました。