背景
初学者がAzureを使って個人用家計簿を作っていく記録を残す。
手順
Azureの管理構造は、[マネジメントグループ]-[サブスクリプション]-[リソースグループ]-[リソース]となっているらしい。
https://docs.microsoft.com/ja-jp/learn/modules/azure-architecture-fundamentals/overview
マネジメントグループは、個人で触るのでいらない。
リソースがVMやDBとかよく見る機能のこと。
リソースグループは、○○アプリで使っているものといった感じで集める機能。
サブスクリプションが、お金の支払いをするところ。
最初に、サブスクリプションが必要ということか。
1. Azureサブスクリプションを用意
「従量課金制」を選択
テクニカルサポートはなし
サインアップする
-> クイック スタート センターに跳ぶ
ホームから、サブスクリプションを開く
サブスクリプション名「従量課金」で作成されている
※グローバル サブスクリプション フィルターによって、隠れているかもしれない。
サブスクリプション名の変更
従量課金サブスクリプションを選択 -> 名前を変更をクリック
「サブスクリプション1」に変更
2. リソースグループの作成
家計簿アプリ用のリソースグループを作る。
このリソースグループに、家計簿アプリで使うWebページやデータベースのリソースを入れる。
サブスクリプションに、先ほど作ったものを選択。
リソースグループを、ここで新しく名前を付ける。
リージョンは、近いということで東日本を選択。
3. Webページの準備
参考：https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-html
App Serviceを使えば、Webページを公開できるらしい。
ガイドでは、Azure Cloud Shellを使ってコマンド操作しましょうとある。
「Azure Cloud Shell」を使うには「Azure File」を用意する必要があるらしい。
クラウド上に、ディレクトリ(新しいフォルダ)を1個用意してくれるようなものか。
クイックスタートでは、gitからサンプルコードをクローンして、保存しておく場所が必要という訳かな。
ローカルでコード編集して、上げなおすとかできるよね。ということでPC内の適当なディレクトリ上でクローン。
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
4. Azure Web App の準備
下記記事を参考に、ポータルからWebアプリを作っていく。
【Azure Web Appを使ってWebページを公開】
-> デプロイ完了。
失敗した手順
各要素について調べたので、記録として残す。
ローカルからAzureを操作したい！と調べてみた結果「Visual Studio Code を使用して Node.js を Azure App Service にデプロイする」が参考になりそう。
Azure App Serviseの拡張機能をインストールする。
Node.jsアプリの準備は、代わりに3.のHTMLファイルを上げようと思うのでパス。
Azure にアプリケーションをデプロイするを進めていく。
1.VSCodeを開く
2.~4. gitからクローンしたから、やらなくて良いかな…。
5.あった。選択。
6.
-1 : Web Appの名前を決める。（「html-docs-hello-world-(日付とか数字の羅列)」）
-2 : リソースグループの選択。（2.で作った「houseshold-account-book-rg」を選択）
-3 : ランタイムスタックの選択。
ランタイムスタックって何？
-> プログラミングを走らせるための環境を用意してくれるみたい。
HTMLのランタイムスタックって、何選べばいいのさ？
クイックスタートからは、何を用意したか読み解けない。
-> クローンしたディレクトリを見ると、HTML,CSS,JavaScriptがある。
SPA など JavaScript ベースの 静的な Web サイトは基本的にブラウザ上で実行されるので、実行時にサーバー上のランタイムは必要ありません。
-> ランタイムは何でもOKってこと？（なんか近そうということで「PHP7.4」を選択）
-4 : OSの選択。（クイックスタートに合わせて「Windows」）
-5 : サービスプランの選択。（「Create new App Service plan」）
「Azure Service Planの概要」。
うーん。は？
どんなサイズのPCを使っているか、管理名をまた付けるってこと…？
App Service Plan に対してお金がかかる
あー。
借りたマシンに名前を付けるぞい。
また別のWebページ(アプリ)を作るときに、同じマシン上で動くようにするぞい。
とかするために使うのね。
-6 : 新しいサービスプランの名前を決める。（「(app名)」）
-7 : スペックを決める。SKUとサイズ。（「F1 Free」）
-8 ：アプリケーション インサイト リソースを作る。（「スキップ」）
監視ツールを使うか？ということみたい。
https://news.mynavi.jp/article/zeroazure-14/
-> エラーが出る
原因不明。ポータルで作る。
5. デプロイする
Azure にアプリケーションをデプロイするを参考に進める。
11.12.14.15.を実行
開けた。
一部修正して、保存。
再デプロイ。
変わった！！
失敗した手順
結論：1個上のディレクトリを選択して、自動デプロイするように設定していた。
流れ：
何度更新しても「You do not have permission to view this directory or page.」と言われる。
調べてみたところ、言語ごとに最初に呼び出されるページの名前は指定されているそうです。
azure側が、開けるファイルが存在しないよと言っているらしい。
PHPのランタイムを選んだから、index.phpでないと開けない？ -> index.htmlで開けた。
他のデプロイ方法を調べていると***「/wwwrootフォルダにデプロイする」***という文言を良く見かける。
wwwroot とは？
-> サーバー側のルートディレクトリ。GETとかリクエスト受け付けたら、最初にここにあるファイルを返すよ。ということらしい。
この中身を見てみたいな…。
とにかくさっさと公開したい！
・高度なツール → Debug console → CMD とたどる（以下のようなページが表示されます
「html-docs-hello-world」ディレクトリが丸ごと入っている！
index.htmlが見つからないのか！
解決方法：
- VSCodeから、デプロイ設定をリセット。
- html-docs-hello-worldディレクトリ(index.htmlが入っているフォルダ)を選択してデプロイし直す。
（間違って入れていたフォルダやファイルは、wwwroot上から綺麗に消えていた。デプロイすると、上書きではなく一度綺麗に消されるのかな？）