Azureで静的Webページを公開する

# 背景

初学者がAzureを使って個人用家計簿を作っていく記録を残す。


# 手順

Azureの管理構造は、[マネジメントグループ]-[サブスクリプション]-[リソースグループ]-[リソース]となっているらしい。
https://docs.microsoft.com/ja-jp/learn/modules/azure-architecture-fundamentals/overview

マネジメントグループは、個人で触るのでいらない。
リソースがVMやDBとかよく見る機能のこと。
リソースグループは、○○アプリで使っているものといった感じで集める機能。
サブスクリプションが、お金の支払いをするところ。

最初に、サブスクリプションが必要ということか。


## 1. Azureサブスクリプションを用意

https://docs.microsoft.com/ja-jp/azure/cost-management-billing/manage/create-subscription

「従量課金制」を選択

![2020-11-15_13h37_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/17d14551-c0ff-ad87-93ce-b941d2963769.png)

テクニカルサポートはなし
サインアップする

-> クイック スタート センターに跳ぶ

ホームから、サブスクリプションを開く
サブスクリプション名「従量課金」で作成されている
※グローバル サブスクリプション フィルターによって、隠れているかもしれない。

サブスクリプション名の変更
従量課金サブスクリプションを選択 -> 名前を変更をクリック
「サブスクリプション1」に変更

## 2. リソースグループの作成

家計簿アプリ用のリソースグループを作る。
このリソースグループに、家計簿アプリで使うWebページやデータベースのリソースを入れる。

サブスクリプションに、先ほど作ったものを選択。
リソースグループを、ここで新しく名前を付ける。
リージョンは、近いということで東日本を選択。

![2020-11-15_14h40_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/367814a3-9a36-6d46-8d7f-b796ad4161cd.png)

## 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ページを公開】](https://qiita.com/ryu1_f/items/aead48cfb22b670ca628)

![2020-11-17_01h09_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/cd9e391c-af0e-1bc7-bd0e-198c8b753f1f.png)

-> デプロイ完了。

---
***失敗した手順***
各要素について調べたので、記録として残す。

ローカルからAzureを操作したい！と調べてみた結果「[Visual Studio Code を使用して Node.js を Azure App Service にデプロイする](https://docs.microsoft.com/ja-jp/azure/developer/javascript/tutorial-vscode-azure-app-service-node-01?tabs=bash)」が参考になりそう。

Azure App Serviseの拡張機能をインストールする。

Node.jsアプリの準備は、代わりに3.のHTMLファイルを上げようと思うのでパス。

[***Azure にアプリケーションをデプロイする***](https://docs.microsoft.com/ja-jp/azure/developer/javascript/tutorial-vscode-azure-app-service-node-03)を進めていく。

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 サイトは基本的にブラウザ上で実行されるので、実行時にサーバー上のランタイムは必要ありません。

https://k-miyake.github.io/blog/appservice-static-webapps/

-> ランタイムは何でもOKってこと？（なんか近そうということで「PHP7.4」を選択）

 -4 : OSの選択。（クイックスタートに合わせて「Windows」）
 -5 : サービスプランの選択。（「Create new App Service plan」）
「[Azure Service Planの概要](https://docs.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans)」。
うーん。は？
どんなサイズのPCを使っているか、管理名をまた付けるってこと…？

[意外と知らない App Service](https://qiita.com/ymgd-a/items/a167ff495201e51c04c8)

> App Service Plan に対してお金がかかる

あー。
借りたマシンに名前を付けるぞい。
また別のWebページ(アプリ)を作るときに、同じマシン上で動くようにするぞい。
とかするために使うのね。

 -6 : 新しいサービスプランの名前を決める。（「(app名)」）
 -7 : スペックを決める。SKUとサイズ。（「F1 Free」）
 -8 ：アプリケーション インサイト リソースを作る。（「スキップ」）
監視ツールを使うか？ということみたい。
https://news.mynavi.jp/article/zeroazure-14/

-> エラーが出る
原因不明。ポータルで作る。

---

## 5. デプロイする

[Azure にアプリケーションをデプロイする](https://docs.microsoft.com/ja-jp/azure/developer/javascript/tutorial-vscode-azure-app-service-node-03)を参考に進める。

11.12.14.15.を実行

開けた。

![2020-11-17_02h01_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/a08648cd-6f89-a258-2af8-a0eb3a54ecc7.png)

一部修正して、保存。
再デプロイ。

変わった！！

![2020-11-18_22h12_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/8ef46855-4463-cf69-c37c-d9bb8b24d11a.png)

---

***失敗した手順***

結論：1個上のディレクトリを選択して、自動デプロイするように設定していた。

流れ：

何度更新しても「You do not have permission to view this directory or page.」と言われる。

![2020-11-18_09h23_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501846/d3ff90f2-a49f-acfa-06d7-795fc88d9d34.png)

> 調べてみたところ、言語ごとに最初に呼び出されるページの名前は指定されているそうです。

[【Azure Web Appを使ってWebページを公開】](https://qiita.com/ryu1_f/items/aead48cfb22b670ca628)

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

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

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

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

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

[意外と知らない App Service](https://qiita.com/ymgd-a/items/a167ff495201e51c04c8)

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

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