id:c-mitsuba がNancyであそんでておもしろそうだったので、VSOnlineでGitとビルドとデプロイを。Azure WebSiteでページのホストをして、さらにmonacoで編集してみるってのをやってみました。
とりあえずまず、VSOnlineにリポジトリを作ります。新しいプロジェクトの作成をするとこんな画面になります。名前、説明はてきとうでいいですが、赤枠のVersion Control だけは必ずGitを選択してます。Gitにしないとmonacoから見えません。
Create project をクリックするとほどなくしてプロジェクトの作成が完了します。Navigate project をクリックしてプロジェクトのページへ移動します。
プロジェクトのページが開いたら、CODEをクリックします。すると次の画面になります。この赤枠で囲ったURLがGitのURLになります。あとでVisual Studioからソースをアップロードするときに使うのでメモしておいてください。
また、VSOnlineでGitを使うのが初めての人は右上の自分の名前が表示されているところからMy profile をクリックします。
次にCREDENTIALSを選択して、Live IDでない認証情報を設定しておいてください。GitではLive IDの認証が使えないらしく、ここで設定した認証情報を使ってソースをアップロードしたりします。
ここまでできたら、次はVisual Studioを起動してプロジェクトを作ります。このへんはid:c-mitsuba のエントリとおんなじです。というか見ながら作りました。
プロジェクトを新規作成して、ASP.NETプロジェクトを作ります。templateはEmptyにして、Host in the cloud はチェックを外しておきます。あとで自分で作りに行きます。
プロジェクトができました。
ソリューションエクスプローラから、ソリューションを右クリックして、Add Solution to Source Control...を選択します。
なんかダイアログがでると思うので、ここでも必ずGitを選びます。選択したらOK押します。
次に、チームエクスプローラを開きます。するとこんな画面が出るはずです。Changesというところをクリックします。
クリックするとこんな画面になります。赤枠のところに適当にメッセージをいれます。これがコミットログに残ります。今回はてきとうにプロジェクト作った。と入れておきました。メッセージをいれたらCommit を押します。簡単ですね
コミットができたら次はNancyのアセンブリをnugetから追加します。Nancy.Hosting.Aspnet を探してきてInstallします。
アセンブリが追加できたら、てきとうにコードを書いておきます。MainModule.cs というファイルを追加して、こんな感じでコードを書きました。
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace monaco_test { public class MainModule : Nancy.NancyModule { public MainModule() { Get["/"] = _ => "Hello"; } } }
ここまでできたら、もういちどコミットします。前回と同じように、チームエクスプローラを開いて、コミットメッセージをいれて、コミット！
コミットできたら、Changesと書いているところをクリックしてUnsynced Commits をクリックします。
するとこんな画面がでます。赤枠のところに、VSOnlineでメモしておいて！と言っていたURLを入力して、Publishを押します。たぶんうまくいくはずです。
うまくいくとこんな画面になります。ここまででVisual Studioでやることはおしまい。
続いてAzure Websiteを作ります。Azureにログインして、新規、コンピューティング、WEBサイト、簡易作成とたどり、URLをてきとうな感じでうめて、WEBサイトの作成を押します。
WEBサイトが作成できたら、ソース管理の統合の設定をします。WEBサイトの管理ページ？の下のほうにリンクがあるのでクリックします。
ソースコードの位置を聞かれるのでもちろんVisual Studio Onlineを選択
接続を承認するっていわれるので自分で使っているVSOnlineのURLを入力して今すぐ承認をクリック。
そしたらこんな画面がでます。緑のACCEPTをクリック。
するとこんな画面になります。ならないときは今すぐ承認をもう一度クリックして、同じ手順をやるといけるかも。ここでリポジトリ名は、最初にVSOnlineにつくったGitリポジトリを指定します。
続いてmonacoを有効にします。WEBサイトの構成をクリックして、下のほうにスクロールすると、VISUAL STUDIO ONLINE での編集という項目があります。ここをオンにして保存をクリック。
保存がおわって、ダッシュボードに戻るとVisual Studio Onlineでも編集が増えています。さっそくここをクリック。
そうするとこんな画面になります。これがVisual Studio Online "Monaco"です。ここでソースを編集したりできます。MonacoとVSOnlineを接続します。左の◆っぽいところをクリックしてConnect to Visual Studio Online をクリックします。
すると、Azure WebsiteとVSOnlineを接続するときにでた承認画面がまたでますが、ACCEPTしてください。うまく承認できると、ここでも接続先のリポジトリを聞かれるので最初にVSOnlineで作ったリポジトリを選択します。選択できたら、Clone from VS Online repositoryをクリックすると、ソースコードのダウンロードが始まります。
ダウンロードが終わるとこんな感じになります。
MainModule.csをクリックすると、コードが見えます。とりあえず適当にコードを足します。
左の◆に数字がでたと思います。ここで◆を押すとこんな画面になります。赤枠のところにてきとうにコミットメッセージをいれてEnterを押します。するとコミットされます。
このままではソースはまだmonacoにしかなくて、VSOnlineにアップロードされていません。ここをクリックしてPushします。
PushできたらVSOnlineの様子を見に行ってみます。プロジェクトのページを開いて、BUILDをクリックすると、ビルドにかんする情報が表示されます。プロジェクト名_CDみたいな項目が表示されているとおもいます。もし表示されていない場合は、Azure Websiteとの接続でどこか間違いがあります。WebSiteでVisual Studio Onlineを切断してもう一度やり直してみてください。さて、プロジェクト名_CDの項目を選択するとこんなページになります。monacoからソースをアップロードしたことでビルドが始まろうとしています。
しばらくしてリロードすると、赤枠のところが三角になってます。どうやらビルドが進行中のようです。
三角になったら項目をダブルクリックしてみます。すると、ビルドの詳細画面が表示されます。なんだか順調にビルドは進んでいるようです。
しばらくすると、ビルドが完了した画面になります。コードに間違いがあったらここでエラーになります。エラーになった場合は修正して再度Pushしましょう。赤枠部分をクリックすると、Websiteが開きます。動作をみてみます。
ルートページ。よさそうですね。
monacoで追加したURLも表示してみます。こっちもよさそう。
ということで、VSOnlineとAzure Websiteを接続して、monacoとVSOnlineも接続して、monacoでの編集がVSOnlineでビルドされてAzure Websiteでホストされるっていうのをやってみました。
VSOnlineからAzure WebsiteへのデプロイはTFSでもできます。普通にVSだけでいじるならこっちでもよいと思います。GitがすきなひとはGit使いましょう。
これらの手順で、VSなしでnancy書いたりできるようになりました。でもmonacoで編集できるのあくまでもファイルだけで、別にcsprojを開いているわけじゃないのでファイルの追加とかはmonaco上でcsprojを手編集しないといけないのでまぁ微妙…
