ブログタイトルのJava EEに反して、今日は.NET、というかVisual Studioについて(^^;
Visual Studio 2013 Ultimate(90日評価版)を使って、Visual Studio Online上のチェックインをトリガーにWindows Azureへデプロイする流れで遊んでみました。当たり前だけど、この辺、相性抜群なんだなぁと改めて思ったり(^^;
ほとんど以下MSさんの資料手順通りなのと、既にこんなの多くの人が(運用レベルでも)やってると思うので、今日のエントリはあくまで個人的メモです。
図にするとこんな感じ
![f:id:kikutaro777:20140305225354p:plain f:id:kikutaro777:20140305225354p:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305225354.png)
ASP.NET MVC 4のWebアプリのテンプレート作成
まずは以下手順でWebアプリを作成します。
「ファイル」メニューの「新規作成」「プロジェクト」を選択
![f:id:kikutaro777:20140305230347j:plain f:id:kikutaro777:20140305230347j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230347.jpg)
「テンプレート」から「Visual C#」の「Web」「Visual Studio 2012」を選択して、「ASP.NET MVC 4 Webアプリケーション」を選択。名前は適当につけました。
![f:id:kikutaro777:20140305230411j:plain f:id:kikutaro777:20140305230411j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230411.jpg)
インターネットアプリケーションを選んで、単体テストもチェックいれます。
![f:id:kikutaro777:20140305230418j:plain f:id:kikutaro777:20140305230418j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230418.jpg)
しばらく待って
![f:id:kikutaro777:20140305230739j:plain f:id:kikutaro777:20140305230739j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230739.jpg)
ひな形ができました。
![f:id:kikutaro777:20140305230755j:plain f:id:kikutaro777:20140305230755j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230755.jpg)
とりあえず実行すると
![f:id:kikutaro777:20140305230813j:plain f:id:kikutaro777:20140305230813j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230813.jpg)
localhostで以下のようなページが確認できました。
![f:id:kikutaro777:20140305230823j:plain f:id:kikutaro777:20140305230823j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305230823.jpg)
Windows AzureのWebサイトとして発行
Azureにログインします。
![f:id:kikutaro777:20140305231134j:plain f:id:kikutaro777:20140305231134j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231134.jpg)
サイドバーの「Webサイト」から「Webサイトの作成」を選択します。
![f:id:kikutaro777:20140305231147j:plain f:id:kikutaro777:20140305231147j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231147.jpg)
とりあえず簡易作成で適当なURLを入れて「日本(東)」を選択!日本DCワッショイ!
![f:id:kikutaro777:20140305231506j:plain f:id:kikutaro777:20140305231506j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231506.jpg)
作成されたら、以下画面で「発行プロファイルのダウンロード」をします。
![f:id:kikutaro777:20140305231619j:plain f:id:kikutaro777:20140305231619j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231619.jpg)
サイト名が含まれたファイルがダウンロードされるので、ローカルディスクの適当な場所に配置します。
![f:id:kikutaro777:20140305231722j:plain f:id:kikutaro777:20140305231722j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231722.jpg)
最初に作ったASP.NET MVC4のソリューション内のプロジェクトを右クリックして「発行」を選択します。
![f:id:kikutaro777:20140305231806j:plain f:id:kikutaro777:20140305231806j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231806.jpg)
「インポート」ボタンを押して
![f:id:kikutaro777:20140305231815j:plain f:id:kikutaro777:20140305231815j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231815.jpg)
さきほどダウンロードしたファイルの場所を指定します。
(ってか、ここでAzureのWebサイトから直接インポートもできたのか…。)
![f:id:kikutaro777:20140305231833j:plain f:id:kikutaro777:20140305231833j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305231833.jpg)
ファイルのデータが読み込まれて、以下のように埋まります。今回は何も変えないまま「接続の確認」ボタンを押しました。
![f:id:kikutaro777:20140305232020j:plain f:id:kikutaro777:20140305232020j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232020.jpg)
緑チェックが入って接続の確認ができました。
![f:id:kikutaro777:20140305232106j:plain f:id:kikutaro777:20140305232106j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232106.jpg)
今回は特に変えず、「次へ」
![f:id:kikutaro777:20140305232134j:plain f:id:kikutaro777:20140305232134j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232134.jpg)
そのまま「発行」
![f:id:kikutaro777:20140305232207j:plain f:id:kikutaro777:20140305232207j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232207.jpg)
しばらくするとブラウザにlocalhostで動かしたときと同じ画面が表示されます。
![f:id:kikutaro777:20140305232415j:plain f:id:kikutaro777:20140305232415j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232415.jpg)
ということで、Visual StudioからWindows Azureへ発行ができました!超簡単。
Visual Studio Onlineにプロジェクトチェックイン
で、続いてはVisual Studio Online。幾つか条件がありますが、とりあえず無料で利用できるので登録します。
で、以下画面でプロジェクトを作成
![f:id:kikutaro777:20140305232805j:plain f:id:kikutaro777:20140305232805j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232805.jpg)
プロジェクトができたらボタンを押してVisual Studioを再度起動します。
![f:id:kikutaro777:20140305232858j:plain f:id:kikutaro777:20140305232858j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305232858.jpg)
チームエクスプローラーからワークスペースの構成をクリックします。
![f:id:kikutaro777:20140305233023j:plain f:id:kikutaro777:20140305233023j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233023.jpg)
「マップと取得」を押します。
![f:id:kikutaro777:20140305233049j:plain f:id:kikutaro777:20140305233049j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233049.jpg)
done
![f:id:kikutaro777:20140305233147j:plain f:id:kikutaro777:20140305233147j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233147.jpg)
ここでは、先ほどテンプレートで作ったASP.NET MVC4のフォルダをまるまるワークスペースへコピーしました。
![f:id:kikutaro777:20140305235923j:plain f:id:kikutaro777:20140305235923j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305235923.jpg)
コピーしたほうのソリューションを開いて、以下メニューでソース管理に追加します。
![f:id:kikutaro777:20140305233401j:plain f:id:kikutaro777:20140305233401j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233401.jpg)
そのままチェックイン
![f:id:kikutaro777:20140305233420j:plain f:id:kikutaro777:20140305233420j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233420.jpg)
![f:id:kikutaro777:20140305233528j:plain f:id:kikutaro777:20140305233528j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233528.jpg)
Visual Studio Online側でチェックインされてることを確認。
![f:id:kikutaro777:20140305233611j:plain f:id:kikutaro777:20140305233611j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233611.jpg)
Visual Studio OnlineとWindows Azureの連携
途中で作ったAzureのWebサイトに戻って、以下の「ソース管理からのデプロイの設定」をします。
![f:id:kikutaro777:20140305233836j:plain f:id:kikutaro777:20140305233836j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233836.jpg)
Visual Studio Onlineを選択
![f:id:kikutaro777:20140305233853j:plain f:id:kikutaro777:20140305233853j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233853.jpg)
Visual Studio Onlineのユーザ名入れて、今すぐ承認をクリック
![f:id:kikutaro777:20140305233936j:plain f:id:kikutaro777:20140305233936j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233936.jpg)
以下キャプチャで見切れてますが右のほうにユーザアカウントなどでるので、問題なければAccept
![f:id:kikutaro777:20140305233957j:plain f:id:kikutaro777:20140305233957j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305233957.jpg)
リポジトリが表示されるので選択します。
![f:id:kikutaro777:20140305234036j:plain f:id:kikutaro777:20140305234036j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234036.jpg)
これで連携の設定はOK。
ビルドをトリガーにデプロイ
Visual Studioのチームエクスプローラーから「ビルド」を選択します。
![f:id:kikutaro777:20140305234206j:plain f:id:kikutaro777:20140305234206j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234206.jpg)
「ビルド定義の新規作成」をクリックします。
![f:id:kikutaro777:20140305234244j:plain f:id:kikutaro777:20140305234244j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234244.jpg)
「継続的インテグレーションを選択」します。
![f:id:kikutaro777:20140305234318j:plain f:id:kikutaro777:20140305234318j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234318.jpg)
で、ビューの定義を少し変えてみます。
「ここにロゴを入れてください」という部分を
![f:id:kikutaro777:20140305234339j:plain f:id:kikutaro777:20140305234339j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234339.jpg)
「ここを変えてみました」とかにしました。
![f:id:kikutaro777:20140305234409j:plain f:id:kikutaro777:20140305234409j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234409.jpg)
で、いじったビューをチェックイン
![f:id:kikutaro777:20140305234425j:plain f:id:kikutaro777:20140305234425j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234425.jpg)
![f:id:kikutaro777:20140305234649j:plain f:id:kikutaro777:20140305234649j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234649.jpg)
Visual Studio Onlineのビルド履歴ができていて
![f:id:kikutaro777:20140305234809j:plain f:id:kikutaro777:20140305234809j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234809.jpg)
Azureの管理をみにいくと
デプロイしてる!
![f:id:kikutaro777:20140305234938j:plain f:id:kikutaro777:20140305234938j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234938.jpg)
サイトを更新してみると…
デプロイされて、左上の表示文言が「ここを変えてみました」にちゃんとなってます。
![f:id:kikutaro777:20140305234952j:plain f:id:kikutaro777:20140305234952j:plain](http://cdn-ak.f.st-hatena.com/images/fotolife/k/kikutaro777/20140305/20140305234952.jpg)
細かくキャプチャとったので、多くみえますが、基本進めていくだけなので楽です。
うーむ、便利だ。