テスターですが何か?

ホビープログラマ略してHPです

Windows Azure上にたった3時間でサービスを公開してみた

leave a comment »

Windows Developer Daysの2日目の基調講演で公開された映像、「Through the Window」は約1分半しかありません。いわゆる「Shortバージョン」と呼ばれる長さです。おそらく作成されてはいないのでしょうが、フルバージョンを見たいという思いがありました。自分と同じようにフルバージョンの動画を見たいと思っている人はいるはずなので、その人たちのコメントを集めるサイトを作ってみました。

http://david9142.cloudapp.net/TTW/

image

実はこのサイトを作ろうと計画していたわけではなく、5/1の朝Twitterでリツイートされた @metamon30 さんのツイートをみてほぼ衝動的に作りました。ところどころハマりましたが、ほぼ3時間でサイトを公開することができたので、「Windows Azureならたった3時間でサイトを公開できる」みたいな感じで記録を残しておきます。

前提

まったくのゼロからサイトの作成を始めたわけではなく、クラウド(Windows Azure)上のサブスクリプションとローカルの開発環境は整備済みでした。具体的には以下の環境は事前に構築済みです。

  • Windows Azure上にホステッドサービス・ストレージサービスが作成済みで、いつでもアプリケーションがデプロイ可能な状態になっている
  • Visual Studio 2010 (Visual Web Developer 2010)とWindows Azure SDKがインストール済み

プロジェクトの新規作成

Visual Web Developerで新規プロジェクトを作成します。テンプレートは「Windows Azureプロジェクト」、ロールは「ASP.NET MVC4」を選択し、MVC4のインターネットアプリケーションテンプレートを使用しました。

モデルの作成

コメントを登録する機能を実装していきます。EntiryFrameworkのCodeFirst機能を使用する予定なので、コメント用のも出るクラスを作成します。本当に単純なクラスです。

    public class CommentModels

    {

        public int ID { get; set; }

 

        public string Name { get; set; }

 

        public string Comment { get; set; }

    }

コントローラー、ビューの作成(スキャフォールディング)

スキャフォールディング+EntityFramework(CodeFirst)の機能を利用して一気にControllerクラス、Viewを作成します。Controllersの追加から、以下のように指定して一気に自動生成させます。

image

実はここで少しハマりました。コントローラーを作成すると「オブジェクト参照がオブジェクト インスタンスに設定されていません。」と表示され、エラーになってしまいました。NugetでEntityFrameworkをアップデートしたら発生しなくなりました、なぜかはよくわかっていません。

これでコメントを登録・削除・編集する機能が一気に自動生成されました。単純なCRUD操作をするだけならあっという間に完成してしまうので、本当にスキャフォールディングの機能は便利です。

ビューの修正

ビュー(*.cshtml)を修正します。コメント機能に関して、以下の変更を行なっています。

  • トップページ(/Home/Index)から、コメント一覧画面(/Comment/Index)へのリンクを追加
  • コメント一覧画面からコメントを編集・削除するためのリンクを削除
  • コメント一覧画面に現在のコメント件数を表示

コメントは一覧・登録機能だけを提供することにしました。トップページのデザインを作成するのと、コメント一覧へのリンクをつけています。ASP.NET MVC4のインターネットアプリケーションテンプレートをそのまま利用しているので、分かる人には「あぁ、MVC4つかってるんだな」とバレてしまうと思います。

これでアプリケーションは完成です(笑) F5キーからAzureエミュレータを起動し、Webブラウザからコメントを登録すると、ローカルのSQL Server Expressにデータベース・テーブルが自動的に作成され、データが登録されます。CodeFirst機能の素晴らしいところはRDBMSのスキーマを意識せず、コードに集中できる点ですね。モデルの定義以外は自動生成コードしか使用していないので、動作確認もあっさり終了です。

SQL Azureサーバーの作成

ローカルにあるSQL Server Expressで動作確認を行ってきましたが、アプリケーションはWindows Azure上にデプロイするのでデータベースもクラウド(Windows Azure上)に用意する必要があります。SQL Azureサーバーの作成はウィザードに従えば一瞬です。他のWindows Azureサービスからアクセスできるようにファイヤーウォールを構成します。ファイヤーウォール設定の適用に約5分かかるところは注意点です。Web.configの接続文字列を変更しつつ待ちます。

image

Windows Azure上へのデプロイ

もう最後のプロセスです、ここまでの経過時間は約2時間です。アプリケーションをWindows Azureへデプロイします、自分はVisual Web Developerからパッケージを作成し、Windows Azure管理ポータルから「新規運用環境へのデプロイ」で行う派です。デプロイ実行後、Twitterで「デプローーーイ!!」とつぶやきます。(ここ重要)デプロイ完了後wktkしてページを確認すると、文字化けが...しかも、_Layout.cshtmlとHome/Index.cshtmlのみ文字化けしているようです。@normalianさんからアドバイスを頂いて文字コードを確認してみると、なぜかこの2つのファイルのみsjisになっていました。なぜかは分かりませんが。

テキストエディターを使って文字コードをutf-8に変更し、再デプロイします。次はコメント登録時に名前は登録されるのに、コメントの内容が登録されない現象が...コメント入力テキストボックスの長さを変更した時に、<input>のname属性を変更していました...name属性を自動生成値のまま、テキストボックスの長さを変更するように変更して、再々デプロイします。ここまでの経過時間は約2時間半です。

完成

サイト完成です!ここまでの経過時間は約3時間です。そのうちデプロイ後の修正・再デプロイを2回行なっているので、2時間半でのサイト構築も可能だと思います。WindowsAzureはもちろんですが、ASP.NET MVC4, EntityFrameworkの恩恵に預かる部分も大きいと思います。

このサイトのソースはこちらで公開しています、「TTWAzure.zip」をダウンロードしてください。ソリューションを開くにはVisual Web Developer 2010, ASP.NET MVC4 Beta, Windows Azure SDKが必要です。

Written by david9142

2012年5月3日 @ 1:46 PM

カテゴリー: WindowsAzure

Tagged with , ,

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。