のらぬこの日常を描く

ノージャンルのお役立ち情報やアニメとゲームの話、ソフトウェア開発に関する話などを中心としたブログです。

全部無料⇒VSTSとAzureを連携させて、nodejs+expressなアプリの自動デプロイ環境を実現する

こんにちは。のらぬこです。

今年も残り1か月、コミケ以外はもうどうでもいい感じの季節になってきました。

今日は、VisualStudio TeamSerivices内のgitリポジトリに格納されたnodejs+express製のWebアプリを、(今のところは)永久無料でAzureにホスティングしてもらう話をします。

題材として、前回の記事で作成した「nodejs+express製のあぷろだアプリ」をAzureに載せてみたいと思います。

noranuk0.hatenablog.com

gitリポジトリへの登録

まずはプロジェクトをVisualStudio TeamSericesのgitリポジトリにコミットします。 こちらの記事を参考に、VisualStudio TeamSerivcesのアカウントを作り、uploaderプロジェクト全体を、gitリポジトリにpushしてください。

noranuk0.hatenablog.com

なお、node_modulesと、uploadsディレクトリは .gitignoreに追加するなどしてcommit対象から除外してください。

f:id:noranuk0:20161205234631p:plain

Azureアカウントを作成する

すでにアカウントをお持ちの方は Microsoft Azure からダッシュボードに入ってください。

f:id:noranuk0:20161206001913p:plain

アカウントをまだお持ちでない方は、ここからアカウントを作成してください。登録時にクレジットカード要求されたりSMS認証があったりしますが、お金がかかるサービスは一切使いません。

なお、新規登録時に200ドルほどの無料クレジットがもらえますが、こちらも利用しません。

ちなみに新規登録時にもらえる無料クレジットなのですが、一か月ほどで使用期限が切れてしまいます。こちらは各種実験など何か別の用途で使い切ってしまってもよいかと思います。

アプリのデプロイ先を準備する

まずはWebアプリをデプロイするためのインスタンスを作成します。

新規(+ボタン) > Web+モバイ > Web App の順に選択します。 f:id:noranuk0:20161206002859p:plain

表示画面が切り替わるので、まずは、アプリ名、リソースグループ、サブスクリプションを設定します。

デプロイしたアプリには、http://{アプリ名}.azurewebsites.net でアクセスできます。

hoge, huga, wp, myapp等の適当な名前はすでに誰かに使われていて、かつ試しに繋いでみると403だったりするので、自分のわかり易い名前をちゃんとつけたほうが良いかと思います。

次に、料金プランを無料プランに変更します。

App Serviceプラン場所 > 新規作成 > 価格レベル(S1 Standard) f:id:noranuk0:20161206002938p:plain

おすすめプラン一覧が出てくるのですが、この中には無料で使えるプランは含まれていません。

画面右上の「全て表示」を押して使用可能な全てのプランを表示してください。

f:id:noranuk0:20161206003502p:plain

一番下までスクロールさせると、「F1 free」というプランがあるのでそれを選択してください。

f:id:noranuk0:20161206221204p:plain

なお、このプラン、お金はかからないようにはなっていますが、いくつか制限が存在します。

  • 独自ドメインは使えません
  • SSLは使えません
  • CPUやメモリー、ディスクスペース等のスペックはは記載の通りです
  • 自動・手動スケールアウトは出来ません
  • 一定時間あたりのCPU占有率、データ転送量の上限が決まっています
    • 上限を超えた場合、一定時間サービスが停止されます
    • お金を払って制限解除、みたいなことは出来ないようです
  • 他にもあるかもしれません

外部公開してアクセスを稼ぐような用途にはまず向きませんが、個人用途でそんなに負荷もかからないサービスとして利用するのであれば、さほど困ることは無い程度のスペックはあると思います。

AzureをVisualStudio TeamSerivcesと関連付ける

Visual Studio Team SerivicesにコミットされたプロジェクトをAzureにデプロイするには、事前に2つのサービスを関連付けておく必要があります。

ダッシュボードのメニューから、Team services accounts を選択します。

f:id:noranuk0:20161206221619p:plain

ログイン中MicrosoftAccountに紐付いているMSDNアカウントや、VSTSアカウントが表示されるので、紐付けたいアカウントを選択してください。

参考サイト)Setting up a VSTS account so it can deploy to a Web App · projectkudu/kudu Wiki · GitHub

デプロイ元ソースにVSTSのgitリポジトリを設定する

Web App」を選択し、先程作成したアプリインスタンスを選びます。

更に、「アプリのデプロイ」カテゴリー内の「デプロイオプション」を選択します。

f:id:noranuk0:20161206222042p:plain

展開元」の「ソースの選択」を選ぶと選択可能なソース一覧が表示されます。

今回は、「Visual Studio Team Services」を選びます。

プロジェクトとブランチを選んで、OKボタンを押せば、最新コミットが自動でWebサーバに展開されます。

ブラウザから、「http://{アプリ名}.azurewebsites.net」にアクセスすると、VSTSにコミットされているアプリが動作しているのが確認できるかと思います。

また、VSTSリポジトリを更新すると、都度デプロイが走り、公開サれているWebアプリも更新されます。

最後に

ちなみに、ASP.NET等の MS謹製環境だけではなく、JAVAプロジェクトや、PHPなんかも動かすことが出来ます。

更に、ローカル環境のみですが、MySQLも使えるため、おそらくWord Pressも動かすことができるような気がしています。

Javaが動くので、scalaやgroovyやJRubyといったJVMで動く系言語(とその実装)も動かすことができます。

個人開発のタスク管理用に、Redmineクラウドに立てておきたい場合などにも活用できるかもしれません。

今回は、Visual Studio Team Serivcies と Azure を使えば、開発から公開まで完全無料のWebアプリ開発、ホスティング環境が手に入りますよ、というお話でした。

お読みいただいてありがとうございました。