LoginSignup
51

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-09-15

はじめに

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

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

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

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

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

  • 有効なクレジットカード
  • 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

◆初回ログイン直後の画面
Azure02.png

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

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

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

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

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

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

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

※以降の画面遷移は、2019年11月時点までに変更されております。
 2019年版を参照ください。

◆3-1. 「新規→Web+モバイル→Web App」を選ぶ。
Azure03.png

◆3-2. Web Appの「アプリ名」、「リソースグループ」を入れる。他はそのまま(※API Appのスクショだけど入力内容は同じ)
※「リソースグループ」は、、、複数アプリ公開時のグルーピングに使われる、っぽい。
Azure04.png

◆3-3. リソース?が出来上がった状態。ソースは未だ紐づいていない
Azure05.png

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

◆3-4. 「デプロイの資格情報」を入れる。
※「FTP/GitHub向けに~」な記載がある。GitHubは別途OAuth 認証で進むので、FTP使わないならここは不要かも?
Azure06.png

◆3-5. 「デプロイのオプション>ソースの選択>GitHub」と進む。
Azure07.png

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

◆3-7. 「プロジェクトの選択」でAzureで公開するリポジトリを選択する。
Azure08.png

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

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

◆3-8. リポジトリ設定を完了すると、「正常にセットアップされました」と表示される。
Azure09.png

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

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

◆公開Appへのアクセス状況は、ダッシュボードから当該のリソース?を立ち上げると、こんな感じで見える。
Azure10.png

公開の作業は以上ー。

その他、不明点など。

  • 料金は、、、イマイチよく分らない。1か月の試用期間後に、どんなプランに移れるんだろう?
  • リポジトリ内を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'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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51