Node.jsで作成したWebサービスをAzureで公開する

# はじめに
当方のレベルは、以下。
同じようなレベルの方々の参考になれば幸い。

- node.jsを手に取って1か月程度。
- GitHubに触れて1～2週間ほど。
- Azure は今回初めて見た。新規に垢作成。

node.jsで作ったアプリを公開したくなって、
置き場としてMicrosoft Azure＋GitHubに行きついた。
GitHubは無料、Azureも最初の1か月は無料で試せるらしい。

しかし、公開に至るまで「用語が分らーん」
「どこに選択肢があるんだ？」「どれ選べばよいの？？？」と
四苦八苦したのでここに手順をまとめる。
認識違いなどあればコメントいただけると助かる。

以下が手元にある前提で、多くとも半日あれば公開までたどり着ける。
途中で詰まらなければ、１～２ｈ程度で完了。

 - 有効なクレジットカード
 - SMSを受け取れるケータイ電話 or スマートフォン
 - 作成済みのnode.js アプリ
 - GitHubのアカウント

なお、node.js アプリはRESTful APIで応答を返すものを作った。
（今現在の○○くれ→ほれ○○、ってGETな応答するヤツ。詳細は割愛）


# 公開までの手順
## 1. Microsoft Azure にアカウントを作成する。

以下のURLから「無料で始める」でアカウント作成する。
MSアカウント持ってなければ、合わせて作成の事。
https://azure.microsoft.com/ja-jp/

とりあえず、最初の1か月は無料で試用できる。

個人確認のため、クレジットカードが必要。
それから「**勤務先**の電話番号入れろ」って出るけど、
これは、個人所有の番号でもOKみたい。
次のページで要求される「SMS受取れる電話番号入れろ」と
**同じケータイの番号**の入力でOKだった。
ケータイでSMS受け取って、そこに記載されている認証番号を入れると、
個人確認が完了。

◆Azureの垢作成手順「情報入力→電話番号SMS→クレカで個人確認」
![Azure01.png](https://qiita-image-store.s3.amazonaws.com/0/125588/f54bc425-8771-cd43-80f0-0c20687e3b55.png)

◆初回ログイン直後の画面
![Azure02.png](https://qiita-image-store.s3.amazonaws.com/0/125588/34a1fa64-f915-58c6-3017-aecc29eb4640.png)


## 2. GitHubにソースコード一式を格納する。

npm initで package.json を作っておく。
いろいろ聞かれるけど、特に無ければデフォルト値のままでEnterでも可。
続いて、`npm install --save [モジュール名]` を実行して
**動作に必要なnodeモジュールを**（再インストールはSkipされる）
**package.jsonに記録**する。

実行するアプリの**ファイル名を「server.js」に**しておく。
これ以外でも、設定ファイルに正しく指定してあげれば
任意のファイル名でOKらしいが、「server.js」にしておくと、
設定を何も弄らなくて済む。


JavaScriptファイル一式は、リポジトリのルートに置く。
リポジトリの中身を以下の状態にする。

- node_modules フォルダは無い
 - ファイル`.gitignore` に`node_modules`と記載すると無視してくれる？
- `npm install` すれば、必要なモジュールがインストールされる
- 続いて、リポジトリのルートで`node server.js`すればアプリが起動する

上記の状態にしたら、GitHubのリモートリポジトリへプッシュする。


## 3. Azure の「デプロイ元ソース」？に「GitHub」を関連付ける。

※以降の画面遷移は、2019年11月時点までに変更されております。
　[2019年版](https://qiita.com/hoshimado/items/73f6f21d379547d2114e)を参照ください。

◆3-1. 「新規→Web＋モバイル→Web App」を選ぶ。
![Azure03.png](https://qiita-image-store.s3.amazonaws.com/0/125588/a8372003-c0f9-6af0-0312-a9ad5f920299.png)


◆3-2. Web Appの「アプリ名」、「リソースグループ」を入れる。他はそのまま（※API Appのスクショだけど入力内容は同じ）
※「リソースグループ」は、、、複数アプリ公開時のグルーピングに使われる、っぽい。
![Azure04.png](https://qiita-image-store.s3.amazonaws.com/0/125588/6d7ce273-d7f5-cb4f-ace7-6b478c8cb506.png)


◆3-3. リソース？が出来上がった状態。ソースは未だ紐づいて**いない**。
![Azure05.png](https://qiita-image-store.s3.amazonaws.com/0/125588/cdbb622c-2d2b-b7ee-ec16-62432a92d377.png)

なお、上記の画面の「URL」が**アクセス先URL**になる。

◆3-4. 「デプロイの資格情報」を入れる。
※「FTP/GitHub向けに～」な記載がある。GitHubは別途OAuth 認証で進むので、FTP使わないならここは不要かも？
![Azure06.png](https://qiita-image-store.s3.amazonaws.com/0/125588/fa05b816-3aa8-4909-e223-ef0ce5ecc61a.png)

◆3-5. 「デプロイのオプション＞ソースの選択＞GitHub」と進む。
![Azure07.png](https://qiita-image-store.s3.amazonaws.com/0/125588/c6803f38-79e7-b873-cc86-7d42c7c10178.png)

3-6. 「承認」画面に進み、GitHub側のWebページに飛ばされるので、GitHubのアカウントとパスワード入れて、OAuth 認証する。


◆3-7. 「プロジェクトの選択」でAzureで公開するリポジトリを選択する。
![Azure08.png](https://qiita-image-store.s3.amazonaws.com/0/125588/74081c78-0fd0-0d69-7c4b-aed389bc8d6e.png)

※ブランチも選択可能だけど、未設定（まだ個人開発なんで）なので、「master」のまま。

パフォーマンスのテストは、触らなくてOK。


◆3-8. リポジトリ設定を完了すると、「正常にセットアップされました」と表示される。
![Azure09.png](https://qiita-image-store.s3.amazonaws.com/0/125588/045904fd-a701-903c-ac79-ba2b24109f78.png)

3-9. ブラウザからアクセしして動作確認して完了。
無事に期待した応答（情報）を取得できて嬉しかった♪
⇒これでnode.jsアプリの公開完了！

※「3-8. リポジトリ設定を完了」の表示の直後にアクセスしたらエラーした。
　10分くらいは間をおいてから、アクセスしたほうが良いかもしれない。


◆公開Appへのアクセス状況は、ダッシュボードから当該のリソース？を立ち上げると、こんな感じで見える。
![Azure10.png](https://qiita-image-store.s3.amazonaws.com/0/125588/17dca123-a8a9-3010-9cdb-e9b4f8c719be.png)


公開の作業は以上ー。

# その他、不明点など。

- 料金は、、、イマイチよく分らない。1か月の試用期間後に、どんなプランに移れるんだろう？
    - ⇒好きなプランへ移行できる。無料プランもある。詳細は「[Azureの無料試用期間が終了したので、無料プランへ移行してみた](http://qiita.com/xingyanhuan/items/3b10a2879d4a6212d320)」へ記載済み。
- リポジトリ内をsrcとtestフォルダに分けたい場合はどうすれば良いんだろう？ ・・・srcフォルダ配下にserver.js置ける？何らかの設定すれば可能？とりあえず、テストの終わった開発時のフォルダから、
必要ファイルのみをリポジトリにコピーする方針で対応。
- GitHubへのソースファイル登録の流れは以下で良いの？
 1. リモートリポジトリを作る
 2. クローンリポジトリをローカルに作る
 3. ローカルリポジトリにソースファイルをコミットする。
 4. リモートリポジトリにプッシュする。
- 「3-1.」で「新規」で選ぶのは、「Web App」と「API App」とどちらが良いのか迷った。「Web App」は日本語で説明文が出ていたので、たぶんこちらが汎用的なのだろう、ってことて「よく分らないときは汎用を」という判断で「Web App」を選んだ。




# 参考にしたサイト様
[GitHub公式クライアントでだれでも簡単GitHubライフをはじめよう]
http://blog.tai2.net/github_client_howto.html#id3

[npmでnode.jsのpackageを管理する - Qiita]
http://qiita.com/sinmetal/items/395edf1d195382cfd8bc

[Dropbox、GitHubからWindows Azure Webサイトにデプロイしてみる (1/3)：CodeZine（コードジン）]
https://codezine.jp/article/detail/7609

[Azure App Service での Node.js Web アプリの使用]
https://azure.microsoft.com/ja-jp/documentation/articles/app-service-web-nodejs-get-started/

[Azure Websites を Node.js PaaS として使う]
https://r2.ag/azure-web-sites-with-nodejs/

[AzureのWebAppsでNode.js+Expressを使う - Qiita]
http://qiita.com/tworks55/items/387054a064ccb2fd03f0

[Azure WebアプリにNode.js expressアプリをGitからデプロイ | hrendoh&#039;s memo]
http://blog.hrendoh.com/deploy-node-js-express-app-to-azure-website-using-git/

[Node.js RESTful API をビルドして Azure で API アプリにデプロイする]
https://azure.microsoft.com/ja-jp/documentation/articles/app-service-api-nodejs-api-app/

[Web Apps の概要]
https://azure.microsoft.com/ja-jp/documentation/articles/app-service-web-overview/