はじめに

Node.jsでWebアプリを作ってみた、ローカルでは動作確認した、方が初めてAzureへ公開するための手順説明です。以前の次の記事の、AzureポータルのUI変更に伴う手順更新版、です。

Node.jsで作成したWebサービスをAzureで公開する(2016年版12月版)
- https://qiita.com/hoshimado/items/6aed10a2057fa77487b6

Visual Studio連携や、Visual Code連携ではなく、GitHubのリポジトリを元に
公開する方法を説明します。
リポジトリ種別は、パブリックでもプライベートでもどちらでも問題ありません。

前準備

次を前提とします。

Azureのアカウントは作成済み
ローカルで動作確認済みのWebアプリ（Node.js）をGitHubのリポジトリに格納済み

Azureのアカウントの新規作成については、今でもそんなに変わっていないハズなので、
下記の記事の「Azureアカウントの作成方法」を参照ください。

https://qiita.com/hoshimado/items/6aed10a2057fa77487b6#1-microsoft-azure-%E3%81%AB%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

Web APP(Paas)の捉え方

本節は、私自身の理解のための「捉え方の説明」です。「手順が知れればよい」方は次の節へ進みください。

ローカルで、動作確認済みのWebアプリ（Node.js）があったとします。
それはつまり、
「Httpサーバーをローカルで起動して、そのローカルサーバーにブラウザでアクセスすると、作成したWebアプリが動作する」
という状態です。

ここをスタート地点として、その作成済みのWebアプリを外部（インターネット上）に公開するためには何が必要でしょうか？　必要なのは次の手順でしょう。

外部公開用のマシンを用意する
- 「サーバー」と呼ばれるもの。
マシンにOSをインストールする、
OS上に動作環境（Node.js）をセットアップする
外部（インターネット）からのアクセスを受け入れるようにルーター、Firewallを設定する
FQDNでアクセスできるように、DNSを設定してIPと紐づける
Webアプリのソースを格納して、起動する

AzureのWebアプリ（Paas）で公開する、とは上記と同じことを「仮想的に行う」ことを意味します。実際、Azure上で公開するまでに、Azureポータルで次の操作をします。

外部公開用のインスタンス（入れ物、枠、くらいに捉える）を用意する
- 仮想マシン、などと呼ばれるもの
- Azureポータル上では「リソース」とも呼ばれる
インスタンスで利用するOSを選択する
- Azureポータル上では「インスタンスの詳細＞オペレーティングシステム」で表示される
インスタンスに導入する動作環境（Node.js)を選択する
- Azureポータル上では「インスタンスの詳細＞ランタイムスタック」で表示される
（外部からのアクセスを受け入れるように～、の設定はイイ感じにAzure側が設定してくれる）
（FQDNで～、の設定はデフォルトに従ってAzure側で実施してくれる）
Webアプリのソースを格納する（と、Azureが起動してくれる）

では、次の節で具体的な操作方法を説明します。

Web APPとしての公開するまでの手順

本記事では、OS＋Webアプリの動作環境までをAzure側に任せる（マネージド）形式での公開方法（Paas）を説明します。

ソース配置するための仮想マシン（リソース、Paas）を作成する

Azureポータルにログインする
「Azureサービス＞リソースの作成＞新規＞Web＞Webアプリ」と辿る
Webアプリのインスタンス設定画面が表示されるので、先ずはサブスクリプションとリソースグループを選択する
- サブスクリプションは、どの料金体系を利用するか？の選択
  - 通常は「従量制」を選ぶ。
  - 利用開始から12 か月の無料サービス中は、そちらを選ぶ。
- リソースグループは、リソースのグルーピング。同じ部屋にあるマシン、くらいに捉えればよい。
  - 後で「この部屋にあるマシン全部廃棄(リソースグループを削除）」とかする際に楽。
  - 初回は、「1つ目の置き部屋」くらいに捉えて、好きなな名前を入力する
  - 二回目以降は、既存と新規の好きな方から選ぶ
インスタンスの名前を入力する
- 公開時のデフォルトURLに組み込まれる
- インスタンス名称を「xxx」とすると、「https://xxx.azurewebsite.net」になる
利用するOSと、動作環境を選択する
- ランタイムスタック：動作環境を選択
  - Node xxx から好きなバージョンを選ぶ。
  - 当方は過去に作成済み環境に合わせたかったので、「Node 10.14」を選択
- OS：WindowsかLinuxを選ぶ
  - ランタイムスタックによっては、選べないOSもある
  - 当方は、過去の環境に合わせたかったので、「Windows」を選択
- 地域：仮想マシンが格納される実際の地域を選ぶ
  - 地域によってある程度の金額差はあるが、特にこだわりが無ければ「Japan East」か「Japan West」で良いかと
App Serviseプランを選ぶ
- 仮想マシンのスペックを選ぶ。
- 作成済みの「App Serviseプラン」がある場合は、目的に合致するスペックの者を選ぶ。
  - 先の「ランタイムスタック」と「OS」が同じ既存のプランがある場合には、リストされる。
- 初回は適当に名前を付けて新規作成する。
  - 新規作成時は「App Serviseプラン＞SKUとサイズ＞サイズを変更します」から選択する
  - デフォルトでは「Standard S1」が選択されている
  - お試しで公開してテストしたい方は「F1（無料）」を選ぶのがおススメ。
    - 「サイズを変更します」を押した先で「スペックの選択＞開発/テスト＞F1（無料）」を選択できる
下部の「次：監視＞」ボタンを押す
Application Insightsを設定する
- 設定は任意
  - 転送量やアラート通知先などを考えるのが面倒なので、ここでは利用を「いいえ」とする
  - 後から簡単に追加できる
- 「はい」を選ぶと、次の値（メトリックス）をデフォルトで監視できる
  - 要求レート、応答時間、およびエラー率
  - 依存率、応答時間、およびエラー率:
  - 例外
  - ページビューと読み込みのパフォーマンス
  - Web ページからの AJAX 呼び出し
  - ユーザー数とセッション数。
    - Windows または Linux サーバーコンピューターの CPU、メモリ、ネットワーク使用率などのパフォーマンスカウンター。
  - Docker または Azure のホスト診断
  - アプリの診断トレースログ
  - カスタムイベントとメトリック。
- 詳細はこちら
  - https://docs.microsoft.com/ja-jp/azure/azure-monitor/app/app-insights-overview#what-does-application-insights-monitor
下部の「次：タグ＞」ボタンを押す
- 設定は任意。
  - ここでは特に設定しない
構成及び確認で、問題なければ「作成」ボタンを押す
- デプロイが進行中、の画面に続いて、完了表示が出るまで暫し待つ。
「リソースに移動」ボタンを押すと、Webアプリのリソース概要の画面に切り替わる

GitHubを紐づけてソースを配置する

続いて、ソースファイルをGitHubから紐づけて、今しがた作成したPaasの上にWebアプリとして公開します。

リソースの概要が表示された状態で「デプロイメント＞デプロイセンター」に入る
- 普段は「ホーム＞全てのリソース＞名前（作成したWebアプリの名称を選ぶ）」から辿れます。
デプロイセンター内で「GitHub」を選択する
初回の場合はGitHubアカウント選択／2回目以降で変更したい場合は下部の「アカウントの変更」ボタンを押す
GitHubアカウントの入力画面が出るので、IDとパスワードを入力して「Sign in」ボタンを押す（AOuth認証する）
ビルドプロバイダーの選択：変更せずにそのまま「続行」ボタンを押す
構成画面で、ドロップダウンリストから先ほど紐付けたGitHubのでリポジトリとブランチを選択する
概要画面で確認したら、「完了」ボタンを押す
しばし待つとデプロイ成功のメッセージが出る
Webアプリのリソース概要画面に戻り、URLをクリックすると、公開したWebアプリの頁に飛べる