背景

初学者が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

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 Web Appを使ってWebページを公開】

azure側が、開けるファイルが存在しないよと言っているらしい。
PHPのランタイムを選んだから、index.phpでないと開けない？ -> index.htmlで開けた。

他のデプロイ方法を調べていると***「/wwwrootフォルダにデプロイする」***という文言を良く見かける。

wwwroot とは？
-> サーバー側のルートディレクトリ。GETとかリクエスト受け付けたら、最初にここにあるファイルを返すよ。ということらしい。

この中身を見てみたいな…。

とにかくさっさと公開したい！
・高度なツール → Debug console → CMD とたどる（以下のようなページが表示されます

意外と知らない App Service

「html-docs-hello-world」ディレクトリが丸ごと入っている！
index.htmlが見つからないのか！

解決方法：

VSCodeから、デプロイ設定をリセット。
html-docs-hello-worldディレクトリ(index.htmlが入っているフォルダ)を選択してデプロイし直す。
（間違って入れていたフォルダやファイルは、wwwroot上から綺麗に消えていた。デプロイすると、上書きではなく一度綺麗に消されるのかな？）