読者です 読者をやめる 読者になる 読者になる

tmytのらくがき

個人の日記レベルです

monacoとVSOnlineとAzure Websiteであそんでみたの

雑記

id:c-mitsuba がNancyであそんでておもしろそうだったので、VSOnlineでGitとビルドとデプロイを。Azure WebSiteでページのホストをして、さらにmonacoで編集してみるってのをやってみました。

とりあえずまず、VSOnlineにリポジトリを作ります。新しいプロジェクトの作成をするとこんな画面になります。名前、説明はてきとうでいいですが、赤枠のVersion Control だけは必ずGitを選択してます。Gitにしないとmonacoから見えません。

f:id:tmyt:20140717013705p:plain

Create project をクリックするとほどなくしてプロジェクトの作成が完了します。Navigate project をクリックしてプロジェクトのページへ移動します。

f:id:tmyt:20140717013711p:plain

プロジェクトのページが開いたら、CODEをクリックします。すると次の画面になります。この赤枠で囲ったURLがGitのURLになります。あとでVisual Studioからソースをアップロードするときに使うのでメモしておいてください。

f:id:tmyt:20140717013716p:plain

また、VSOnlineでGitを使うのが初めての人は右上の自分の名前が表示されているところからMy profile をクリックします。

f:id:tmyt:20140717013715p:plain

次にCREDENTIALSを選択して、Live IDでない認証情報を設定しておいてください。GitではLive IDの認証が使えないらしく、ここで設定した認証情報を使ってソースをアップロードしたりします。

f:id:tmyt:20140717013718p:plain

ここまでできたら、次はVisual Studioを起動してプロジェクトを作ります。このへんはid:c-mitsuba のエントリとおんなじです。というか見ながら作りました。

プロジェクトを新規作成して、ASP.NETプロジェクトを作ります。templateはEmptyにして、Host in the cloud はチェックを外しておきます。あとで自分で作りに行きます。

f:id:tmyt:20140717013720p:plain

プロジェクトができました。

f:id:tmyt:20140717013723p:plain

ソリューションエクスプローラから、ソリューションを右クリックして、Add Solution to Source Control...を選択します。

f:id:tmyt:20140717013726p:plain

なんかダイアログがでると思うので、ここでも必ずGitを選びます。選択したらOK押します。

f:id:tmyt:20140717013734p:plain

次に、チームエクスプローラを開きます。するとこんな画面が出るはずです。Changesというところをクリックします。

f:id:tmyt:20140717013737p:plain

クリックするとこんな画面になります。赤枠のところに適当にメッセージをいれます。これがコミットログに残ります。今回はてきとうにプロジェクト作った。と入れておきました。メッセージをいれたらCommit を押します。簡単ですね

f:id:tmyt:20140717013740p:plain

コミットができたら次はNancyのアセンブリをnugetから追加します。Nancy.Hosting.Aspnet を探してきてInstallします。

f:id:tmyt:20140717013743p:plain

アセンブリが追加できたら、てきとうにコードを書いておきます。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";
        }
    }
}

f:id:tmyt:20140717013745p:plain

ここまでできたら、もういちどコミットします。前回と同じように、チームエクスプローラを開いて、コミットメッセージをいれて、コミット!

f:id:tmyt:20140717013748p:plain

コミットできたら、Changesと書いているところをクリックしてUnsynced Commits をクリックします。

f:id:tmyt:20140717013751p:plain

するとこんな画面がでます。赤枠のところに、VSOnlineでメモしておいて!と言っていたURLを入力して、Publishを押します。たぶんうまくいくはずです。

f:id:tmyt:20140717013753p:plain

うまくいくとこんな画面になります。ここまででVisual Studioでやることはおしまい。

f:id:tmyt:20140717013755p:plain

続いてAzure Websiteを作ります。Azureにログインして、新規、コンピューティング、WEBサイト、簡易作成とたどり、URLをてきとうな感じでうめて、WEBサイトの作成を押します。

f:id:tmyt:20140717013759p:plain

WEBサイトが作成できたら、ソース管理の統合の設定をします。WEBサイトの管理ページ?の下のほうにリンクがあるのでクリックします。

f:id:tmyt:20140717013801p:plain

ソースコードの位置を聞かれるのでもちろんVisual Studio Onlineを選択

f:id:tmyt:20140717013804p:plain

接続を承認するっていわれるので自分で使っているVSOnlineのURLを入力して今すぐ承認をクリック。

f:id:tmyt:20140717013807p:plain

そしたらこんな画面がでます。緑のACCEPTをクリック。

f:id:tmyt:20140717013810p:plain

するとこんな画面になります。ならないときは今すぐ承認をもう一度クリックして、同じ手順をやるといけるかも。ここでリポジトリ名は、最初にVSOnlineにつくったGitリポジトリを指定します。

f:id:tmyt:20140717013813p:plain

続いてmonacoを有効にします。WEBサイトの構成をクリックして、下のほうにスクロールすると、VISUAL STUDIO ONLINE での編集という項目があります。ここをオンにして保存をクリック。

f:id:tmyt:20140717013816p:plain

保存がおわって、ダッシュボードに戻るとVisual Studio Onlineでも編集が増えています。さっそくここをクリック。

f:id:tmyt:20140717013818p:plain

そうするとこんな画面になります。これがVisual Studio Online "Monaco"です。ここでソースを編集したりできます。MonacoとVSOnlineを接続します。左の◆っぽいところをクリックしてConnect to Visual Studio Online をクリックします。

f:id:tmyt:20140717013822p:plain

すると、Azure WebsiteとVSOnlineを接続するときにでた承認画面がまたでますが、ACCEPTしてください。うまく承認できると、ここでも接続先のリポジトリを聞かれるので最初にVSOnlineで作ったリポジトリを選択します。選択できたら、Clone from VS Online repositoryをクリックすると、ソースコードのダウンロードが始まります。

f:id:tmyt:20140717013824p:plain

ダウンロードが終わるとこんな感じになります。

f:id:tmyt:20140717013827p:plain

MainModule.csをクリックすると、コードが見えます。とりあえず適当にコードを足します。

f:id:tmyt:20140717013829p:plain

左の◆に数字がでたと思います。ここで◆を押すとこんな画面になります。赤枠のところにてきとうにコミットメッセージをいれてEnterを押します。するとコミットされます。

f:id:tmyt:20140717013847p:plain

このままではソースはまだmonacoにしかなくて、VSOnlineにアップロードされていません。ここをクリックしてPushします。

f:id:tmyt:20140717013850p:plain

PushできたらVSOnlineの様子を見に行ってみます。プロジェクトのページを開いて、BUILDをクリックすると、ビルドにかんする情報が表示されます。プロジェクト名_CDみたいな項目が表示されているとおもいます。もし表示されていない場合は、Azure Websiteとの接続でどこか間違いがあります。WebSiteでVisual Studio Onlineを切断してもう一度やり直してみてください。さて、プロジェクト名_CDの項目を選択するとこんなページになります。monacoからソースをアップロードしたことでビルドが始まろうとしています。

f:id:tmyt:20140717013852p:plain

しばらくしてリロードすると、赤枠のところが三角になってます。どうやらビルドが進行中のようです。

f:id:tmyt:20140717013855p:plain

三角になったら項目をダブルクリックしてみます。すると、ビルドの詳細画面が表示されます。なんだか順調にビルドは進んでいるようです。

f:id:tmyt:20140717013900p:plain

しばらくすると、ビルドが完了した画面になります。コードに間違いがあったらここでエラーになります。エラーになった場合は修正して再度Pushしましょう。赤枠部分をクリックすると、Websiteが開きます。動作をみてみます。

f:id:tmyt:20140717013903p:plain

ルートページ。よさそうですね。

f:id:tmyt:20140717013906p:plain

monacoで追加したURLも表示してみます。こっちもよさそう。

f:id:tmyt:20140717013909p:plain

ということで、VSOnlineとAzure Websiteを接続して、monacoとVSOnlineも接続して、monacoでの編集がVSOnlineでビルドされてAzure Websiteでホストされるっていうのをやってみました。

VSOnlineからAzure WebsiteへのデプロイはTFSでもできます。普通にVSだけでいじるならこっちでもよいと思います。GitがすきなひとはGit使いましょう。

これらの手順で、VSなしでnancy書いたりできるようになりました。でもmonacoで編集できるのあくまでもファイルだけで、別にcsprojを開いているわけじゃないのでファイルの追加とかはmonaco上でcsprojを手編集しないといけないのでまぁ微妙…