Node.jsで作成したWebアプリをAzureで公開する【2019年11月版】

# はじめに

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アプリを外部（インターネット上）に公開するためには何が必要でしょうか？　必要なのは次の手順でしょう。

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

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

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

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


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

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

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

1. Azureポータルにログインする
1. 「Azureサービス＞リソースの作成＞新規＞Web＞Webアプリ」と辿る
    ![リソースの作成](https://gyazo.com/5e299a892254ec440cb42dacbbe24976.jpeg)
    ![Webアプリ](https://gyazo.com/25165057d3bb9d63e55ddd107b32b790.jpeg)
1. Webアプリのインスタンス設定画面が表示されるので、先ずはサブスクリプションとリソースグループを選択する
    * サブスクリプションは、どの料金体系を利用するか？の選択
        * 通常は「従量制」を選ぶ。
        * 利用開始から12 か月の無料サービス中は、そちらを選ぶ。
    * リソースグループは、リソースのグルーピング。同じ部屋にあるマシン、くらいに捉えればよい。
        * 後で「この部屋にあるマシン全部廃棄(リソースグループを削除）」とかする際に楽。
        * 初回は、「1つ目の置き部屋」くらいに捉えて、好きなな名前を入力する
        * 二回目以降は、既存と新規の好きな方から選ぶ
    ![Webアプリの属するサブスクリプションとリソースグループを選択](https://gyazo.com/531dca9b86048e87f5e05ede5d08cf78.jpeg)
1. インスタンスの名前を入力する
    * 公開時のデフォルトURLに組み込まれる
    * インスタンス名称を「xxx」とすると、「`https://xxx.azurewebsite.net`」になる
1. 利用するOSと、動作環境を選択する
    * ランタイムスタック：動作環境を選択
        * Node xxx から好きなバージョンを選ぶ。
        * 当方は過去に作成済み環境に合わせたかったので、「Node 10.14」を選択
    * OS：WindowsかLinuxを選ぶ
        * ランタイムスタックによっては、選べないOSもある
        * 当方は、過去の環境に合わせたかったので、「Windows」を選択
    * 地域：仮想マシンが格納される実際の地域を選ぶ
        * 地域によってある程度の金額差はあるが、特にこだわりが無ければ「Japan East」か「Japan West」で良いかと
    ![インスタンス名称を入力し、動作環境を選択](https://gyazo.com/24ee58a9d277c2998c55998722b4c241.jpeg)
1. App Serviseプランを選ぶ
    * 仮想マシンのスペックを選ぶ。
    * 作成済みの「App Serviseプラン」がある場合は、目的に合致するスペックの者を選ぶ。
        * 先の「ランタイムスタック」と「OS」が同じ既存のプランがある場合には、リストされる。
    * 初回は適当に名前を付けて新規作成する。
        ![App Serviseプランを新規作成する](https://gyazo.com/2397b38876b08a45e9415b0ee90cdf9e.jpeg)
        * 新規作成時は「App Serviseプラン＞SKUとサイズ＞サイズを変更します」から選択する
        * デフォルトでは「Standard S1」が選択されている
        * お試しで公開してテストしたい方は「F1（無料）」を選ぶのがおススメ。
            * 「サイズを変更します」を押した先で「スペックの選択＞開発/テスト＞F1（無料）」を選択できる
        ![デフォルトはS1（有料）](https://gyazo.com/a1bf7661a624f01f240365220829ac1c.jpeg)
        ![初期表示は運用タブ](https://gyazo.com/f8b3bea9b3707b2092e9e4b1883d6758.jpeg)
        ![開発/テストタブを選択するとF1がある](https://gyazo.com/ba0c7ccc77519ec7f78d405e6bd239cb.jpeg)
        ![F1を選択した状態](https://gyazo.com/ad6549bd42505444a2cc6e226affda46.jpeg)
1. 下部の「次：監視＞」ボタンを押す
1. Application Insightsを設定する
    * 設定は任意
        * 転送量やアラート通知先などを考えるのが面倒なので、ここでは利用を「いいえ」とする
        * 後から簡単に追加できる
        ![Application insightsは「いいえ」を選択](https://gyazo.com/6083b5f9c337b2a3ef7f198e73c73918.jpeg)
    * 「はい」を選ぶと、次の値（メトリックス）をデフォルトで監視できる
        * 要求レート、応答時間、およびエラー率
        * 依存率、応答時間、およびエラー率:
        * 例外
        * ページ ビューと読み込みのパフォーマンス
        * 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
1. 下部の「次：タグ＞」ボタンを押す
    * 設定は任意。 
        * ここでは特に設定しない
    ![タグは設定しない](https://gyazo.com/9ec2428d14162eda461fc482e1d08e9c.jpeg)
1. 構成及び確認で、問題なければ「作成」ボタンを押す
    ![内容を確認後に、作成ボタンを押す](https://gyazo.com/589520485b1eb46fa71fe319c5ed29a2.jpeg)
    * デプロイが進行中、の画面に続いて、完了表示が出るまで暫し待つ。
    ![デプロイ中](https://gyazo.com/a73d20c4e1038e97e2a8aa221f087ac0.jpeg)
    ![デプロイ完了](https://gyazo.com/c78e838b3fc71c5480a5880da44b29a5.jpeg)
1. 「リソースに移動」ボタンを押すと、Webアプリのリソース概要の画面に切り替わる
    ![リソースの概要](https://gyazo.com/ab4d369601bdf600550015535c9034f7.jpeg)

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

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

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

飛んだ先で期待したように動作することを確認して、Webアプリの公開は完了。

以上ー。