JAZUG女子部第2回勉強会ハンズオン

JAZUG 部勮会#2ハンズオン手順書

ハンズオンの前に…

この手順書は初心者の方向けに作っていますが、もしもわからないことや困ったことがあったら、お気軽に周りの人に声をかけてみてくださいね。もちろんスタッフに声をかけていただいてもOKです。できる限りサポートします！

このハンズオン手順書は以下の環境で作っています。

★ Visual Studio 2010 Professional Edition★ Visual Studio 2010 SP1★ Azure Storage Explorer☆ Windows Azure SDK for .NET -2011 11月☆ Windows Azure Tools 言語パック -2011 11月☆ Windows Azure Libraries for .NET 1.6 -November 2011

Visual Studio 2010はなるエディションまたは無償のVisual Web Developer 2010 Expressでも構いません。

☆のものはMicrosoft Web Platform Installerからインストールしました。

Windows Azure Libraries for .NET 1.6 -November 2011 は用していないため、インストールしなくても構いません。

手順 1. 事前準備として、Azure側にストレージの設定を追加しましょう。

ブラウザからWindows Azure ポータル（https://windows.azure.com/default.aspx）に接続します。

左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ストレージアカウント]を選択します。その上で、[新規ストレージアカウント]をクリックします。

Azureを使ってみよう！ハンズオン手順（1/16）

[ストレージアカウントの新規作成]ダイアログでURLと地域を設定（設定値はどちらも任意）し、[OK]ボタンをクリックします。

URLに指定する値がストレージアカウントの名前になるワ。URLだから一意性を保つ必要があるので気をつけテネ。地域はどこでもいけれど、アクセス場所

から近いところを選ぶことが多いカナ。ちなみに東南アジアだとシンガポール、

東アジアだと香港のDCネ！

ストレージアカウントの作成

Point

3


手順 2. 開発ツールのVisual Studioを者として実しましょう。

[スタート]ボタン-[すべてのプログラム]-[Microsoft Visual Studio2010]を選択して、[Microsoft Visual Studio 2010]のアイコンを右クリックします。

コンテキストメニューから[ 者として実 ]を選択します。

3. Windows Azureプロジェクトを作成しましょう。

[ファイル]-[新規作成]-[プロジェクト]を選択します。

Visual Studioの起動Point

Visual Studioは者ードで起動してネ！

者ードで起動しないと、デバッグのときにエミュレータを起動できなくなっちゃうノ。

[新しいプロジェクト]ダイアログで以下を設定（または選択）しますテンプレート：[Visual C#]-[Cloud]-[Windows Azureプロジェクト]

名前：HelloWindowsAzureProject場所：任意の場所（デスクトップなど）

設定後、[OK]ボタンをクリックします。

プロジェクトの選択Point

今、作っている『Windows Azure プロジェクト』というのが、デバッグ時のエミュレータの起動や、Azureにデプロイするためのパッケージングをしてくれるノヨ。

4

手順 4. Webロールを1つ追加しましょう。

[新しいWindowsAzureプロジェクト]ダイアログから[ASP.NET Webロール]を追加し、名前を変します。

名前：SampleWebRole

追加後、[OK]ボタンをクリックします（少し時間がかかります）。

5. 右上のソリューションエクスプローラーを確認しましょう（作業はありません）。

鉛筆のアイコンをクリックすることで名前が編集できます


AzureにデプロイするのはSampleWebRoleネ。

でも、このままデプロイせずパッケージ（圧縮ファイル）にする必要があるノ。パッケージ

作成のために必要なのがHelloWindows

AzureProjectということネ！

ここまでのまとめ

5

手順 6. 作成したWebロールのUIを編集しましょう。

ソリューションエクスプローラーで[SampleWebRole]-[Default.aspx]をダブルクリックします。

[ツールボックス]からFileUploadコントロールをドラッグアンドドロップします。（FileUploadコントロールなどの各部品の配置はあまり気にしなくてOK！）

[デザイン]をクリックすると既存の

UIが確認できます


上図の作業と同様に、LabelコントロールとButtonコントロールをドラッグアンドドロップで追加します。（Labelコントロールの配置前にEnterキーでするといですよ！）

表面の文字（Textプロパティの値）設定は

任意です！

6

手順 7. アプリからストレージを用するための設定をしましょう。

ソリューションエクスプローラーで[HelloWindowsAzureProject]-[ロール]-[SampleWebRole]をダブルクリックします。

ロールの設定画面で、[設定]タブを選択し、[設定の追加]ボタンをクリックします。追加したに以下の設定をします。

名前：StorageConnectionString種類：接続文字

設定後、[参照]ボタンをクリックします。


[ストレージアカウント接続文字 ]ダイアログを表示します（操作は後です）。

参照ボタン

ストレージに接続するには、アカウント名とキーが必要ネ。これらはロールの設定値として保存しておくとデプロイ後も

変できるからヨ！

ストレージへの接続Point

7

手順 8. Azure側で使うストレージの設定を確認しましょう。


左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ストレージアカウント]を選択します。

ストレージアカウント名を確認した上で、[プロパティ]-[プライマリアクセスキー]の[表示]ボタンをクリックします。


アカウント名はココ！（プロパティでも確認

できます）

[ストレージアクセスキーの表示]ダイアログからアクセスキーをコピーし、[閉じる]ボタンをクリックします。

クリックすることでキーをコピーします

２つのアクセスキーPointストレージアクセスキーはどちらを使っても問題ないワ。通常は片方だけを使い続けて、キーのえいなどの常時にもう片方を使うこともあるソウヨ。そして、えいしてしまった方のキーを再生成することでえいに対することができるノヨ。

8

手順 9. 手順8で確認したストレージ名とアクセスキーを設定しましょう。

Visual Studioの[ストレージアカウント接続文字 ]ダイアログで[ストレージアカウントの格情報の入 ]を選択し、アカウント名とキーを入します。[既定のHTTPSエンドポイントの使用]が選択されていることを確認し、[OK]ボタンをクリックします。

10. 設定値が保存されていることを確認しましょう（作業はありません）。

ソリューションエクスプローラーから[HelloWindows AzureProject]-[ServiceConfigration.Cloud.cscfg]をダブルクリックします。


手順8で確認したアカウント名を入！

11. 上書き保存しておきましょう！

[すべてを保存]ボタンをクリックします。

HelloWindowsAzureProjectAzureにデプロイするためのパッケージを作ったりするプロジェクト。パッケージングすると、.cspkgファイルと.cscfgができる（つまり上図のcscfgファイルはデプロイ後でも変可能なファイルってコト）。ストレージにアクセスするために必要な情報は、今ココに格納してるワ！

SampleWebRoleAzureにデプロイするWebRoleのUIやコードを含めたプロジェクト。ストレージにアクセスするためのコードはまだ書いていないワネ。


9

手順 12. アップロード用ボタンをクリック時のイベントハンドラを作成しましょう。

Default.aspxを開き、アップロード用ボタンをダブルクリックします。

Default.aspx.csが開いたら、コードをすべて消して以下のテキストファイルに置き換えて、上書き保存します。

ファイルの場所：デスクトップファイル名：Default.aspx.cs.txt

Using…も含めてすべて消しちゃって

OK！


次のページには、上記手順で張り付けたコードが載っています。すべてを読んで解する必要はありませんが、などでもう一本ハンズオンを試したり、Blobを扱うコードを確認したりする際の参考にしてくださいね！

10

1. using System;2. using System.Collections.Generic;3. using System.Linq;4. using System.Web;5. using System.Web.UI;6. using System.Web.UI.WebControls;7. using Microsoft.WindowsAzure;8. using Microsoft.WindowsAzure.StorageClient; 9. using Microsoft.WindowsAzure.ServiceRuntime;10.11. namespace SampleWebRole12. {13. public partial class _Default : System.Web.UI.Page14. {15. protected void Page_Load(object sender, EventArgs e)16. {17. }18.19. protected void Button1_Click(object sender, EventArgs e)20. {21. // 画像ファイルが指定されているどうかを判定22. if (FileUpload1.HasFile)23. {24. //cscfgファイルからストレージのアカウント情報を取得する25. string connectionString =RoleEnvironment.GetConfigurationSettingValue("StorageConnectionString");26. CloudStorageAccount account = CloudStorageAccount.Parse(connectionString);27.28. //Blobストレージクライアントの生成29. CloudBlobClient blobClient = account.CreateCloudBlobClient();30.31. //リトライポリシーの設定32. blobClient.RetryPolicy = RetryPolicies.Retry(3, TimeSpan.FromMilliseconds(500));33.34. //ブロブコンテナの取得、コンテナが存在しない場合は作成35. CloudBlobContainer blobContainer = blobClient.GetContainerReference("sampics");

☆手順12 で貼り付けたコードの紹介（読めなくてもOK！）

26 目のコードで.cscfgに格納した値を取得しているノヨ。StorageConnectionStringってのは手順6で設定した名前ネ。

26 目の右Point

35. CloudBlobContainer blobContainer = blobClient.GetContainerReference("sampics");36. blobContainer.CreateIfNotExist();37.38. //ブロブへの参照取得39. CloudBlockBlob blob = blobContainer.GetBlockBlobReference(FileUpload1.FileName);40.41. //ファイルのアップロード42. blob.UploadFromStream(FileUpload1.FileContent);43.44. //メタデータの設定45. blob.Metadata.Add("Name", HttpUtility.UrlEncode(FileUpload1.FileName));46. blob.SetMetadata();47.48. Label1.Text = "アップロードがしました";49.50. }51. else52. {53.54. Label1.Text = "画像が指定されていません";55. return;56. }57.58. }59. }60. }

ブロブを扱うコードPoint

アカウントCloudStorageAccount

コンテナCloudBlouContainer

ブロブCloudBlob

CloudBlobClient

ブロブのとこれを表現するクラスは上図のような関係になっているワ。上のソースコードを読むときの参考にしてネ！

11

手順 13. 作成したアプリをエミュレーター上で実しましょう。

[デバッグ]-[デバッグ開始]をクリックします。

ブラウザが起動します。何か画像ファイルをアップロードしてみましょう！（アップロードできたかどうか後で確認します。ここではアップロード用ボタンを押下して、アップロードがしましたの文字が表示されればOKとしてください）


まだAzureにデプロイしていないから、作ったWebRoleのアプリケーションはエミュレータ上で動いているワ。でも、ストレージはエミュレータではなくAzure上のものを使っているノ。

順を追っていくと、デバッグ開始をクリックすると、パッケージングされてローカルマシンのエミュレータ上に配置されて、その後ブラウザがちあがってアプリを動かしたわネ。アップロード用ボタンをクリックすることで、.cscfgにあるストレージ名やキーを取得して、実際のAzureストレージ上に画像をアップロードしてたってコト！OK？


12

手順 14. Azure上にデプロイするためのパッケージングをしましょう。

ソリューションエクスプローラーで[HelloWindowsAzureProject]-[ロール]-[SampleWebRole]をダブルクリックします。[構成]タブ内の[診断を有効にする]のチェックを外します。


Windows Azureの診断機能PointWindows Azureには診断機能があるノ。この診

断機能が各種ログの収集作業をしてくれているのネ。診断機能が収集したログを各ロールのローカルストレージに蓄積して、最終的にはローカルストレージに転送する仕組みになっているノ。

デフォルトの設定だと、Azureのデプロイ時にログのが実際のAzureストレージに

りわって、ストレージへの書きみが発生するので、今回は診断機能をOffにするノ！

• ローカルストレージはインスタンスごとに存在する

• ロール再起動時などに初期化される可能性がある

転送

Webロール

Azure ストレージ

ブロブテーブル

• 数のロールでしたログをマージして保存できる

• 転送したログに永続性がある

トラブル発生時にはとっても心勮い診断機能だけれど、意して使わないと…

知らないうちにAzureストレージへのトランザクションが発生↓

使用ージをてびっくり！↓

ストレージ使ってないはずなのに…とがわからず対できず↓

ついに無の上限にしてしまったり、次回以もいつの間にか使用が増えちゃうの…？とびくびくしちゃったり（ただし、無を使いってもインスタンスが削除されるだけで、

手にはされませんのでご勣心を！）

13

手順 14. Azure上にデプロイするためのパッケージングをしましょう（続き）。

ソリューションエクスプローラーで[HelloWindowsAzureProject]を選択して、右クリックします。コンテキストメニューから[パッケージ]をクリックします。

[Windows Azureアプリケーションのパッケージ化]ダイアログで、そのまま[パッケージ]ボタンをクリックします。


しばらく待つと.cspkgファイルと.cscfgファイルが格納されたフォルダが開きます。

パッケージングとデプロイ

Point

今回のハンズオンではパッケージングとデプロイを2段階に分けているけれど、[発 ]メニューから一でうこともできるのヨ。別の機会にでも

試してみテネ。感動すること間違いなしヨ！

14

手順 15. 作成したファイルをデプロイしましょう。


左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ホステッドサービス]を選択します。その上で、[新規ホステッドサービス]をクリックします。

[ホステッドサービスの新規作成]ダイアログに以下の値を設定し、[OK]ボタンをクリックします。

サービスの名前： HandsOnAppサービスのURL：（任意の値）


サービスの名前： HandsOnAppサービスのURL：（任意の値）デプロイ名： HandsOn_V1地域：（任意の地域）パッケージの場所： .cspkgへのパス構成ファイル： .cscfgへのパス

インスタンス数が1つであることの警告ダイアログに対し、[はい]ボタンをクリックします。

1つのホステッドサービスに運用環境とステージング環境とがあるノ。運用環境はその名の通り運用で使う環境ネ。ステージング環境はテスト環境で使ったり

次期バージョンを配置してスタンバイさせたりするワ。

デプロイオプションPoint

15

手順 15. 作成したファイルをデプロイしましょう（続き）。

が準備になるまで待機します。DNS名をクリックし、簡単な動作確認をします。

[VIPのスワップ]をクリックし、ステージング環境と本環境のりえをします。


[VIPスワップ]ダイアログに対し[OK]ボタンをクリックして、再が準備になるまで待機します。

これで作業はおしまいヨ！本当に画像がアップロードされたかたいところだけど、

ながらポータルではブロブのはれないノ。だから、次の手順でツールを使った確認をシマショ！


16

手順 16. Azure Storage Explorerを起動しましょう。

[スタート]ボタン-[すべてのプログラム]-[Neudesic]-[Azure Storage Explorer]をクリックします。

[Welcome!]ダイアログの左のボタンをクリックし、ダイアログを閉じます。


[Add Account]ボタンをクリックし、アカウント情報を入するためのダイアログを表示します。

17

手順 16. Azure Storage Explorerを起動しましょう（続き）。

手順8で確認したストレージアカウント名とキーを入し、[Use HTTPS]にチェックを入れます。設定後、[Add Storage Accont]ボタンをクリックします。

初回アクセス時の注意点のダイアログに対し、[OK]ボタンをクリックします。


しばらく待つと、下図のようにBlobの情報が確認できます。

コンテナ内のブロブ

ブロブコンテナ

アカウント名

18

手順 16. Azure Storage Explorerを起動しましょう（続き）。

コンテナに格納されたブロブ（ファイル）をダブルクリックします。

[Metadata]タブにりえ、メタデータが設定されていることを確認します。


[Image]タブにりえ、ブロブとして格納した画像の内を確認します。

P9の45、46 目でメタデータの

設定しています！

19

手順 1. ホステッドサービスを確認します。


左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ホステッドサービス]を選択します。

種類が[デプロイ]の項目を選択し、[構成]ボタンをクリックします。

☆おまけ1 デプロイ後にインスタンス数を変えてみよう！Windows Azureはインスタンス数を簡単に増できるのもです。インスタンス数の変は動化することもできますが、ここでは手動で変してみましょう！

今はインスタンス数が

1つです！

[デプロイの構成]ダイアログで、[現在の構成の編集]を選択します。<Instances>要素のcount属性を以下のように修正し、[OK]ボタンをクリックします。

旧：<Instances count=“1” />新：<Instances count=“3” />

しばらく待機し、インスタンス数が増えたことを確認します。

1つです！

Windows Azureにはロードバランサがついているので、インスタンス数を増やすだけで、簡単に負荷分散ができます！

20

手順 1. ホステッドサービスを削除します。


左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ホステッドサービス]を選択します。

種類が[デプロイ]の項目を選択し、[削除]ボタンをクリックします。

☆おまけ2 デプロイしたパッケージの削除方法（1/2）Windows Azureでは、インスタンスのをしてもされます。ここでは、今回のハンズオンでデプロイしたものをすべて削除し、が発生しないようにする方法を紹介します。

種類が[ホステッドサービス]の項目を選択し、[削除]ボタンをクリックします。

デプロイが消えてから[削除]ボタンを押しましょう！

21

手順 2. ストレージアカウントを削除します。


左下の[ホステッドサービス、ストレージアカウント、CDN]を選択し、左中央の[ストレージサービス]を選択します。

[ストレージの削除]ボタンをクリックします。

☆おまけ2 デプロイしたパッケージの削除方法（2/2）Windows Azureでは、インスタンスのをしてもされます。ここでは、今回のハンズオンでデプロイしたものをすべて削除し、が発生しないようにする方法を紹介します。

[ストレージサービス]を

選択しています

コレではされないになるワ！Azureはとてもイイコでだからこれからもどんどん使ってネ。けれど、もしもAzureの解約をしたいときには、オンラインで解約も可能ヨ。詳しくは JAZUG はるたまさんのblogをてくださいネ。

http://d.hatena.ne.jp/haru-tama/20111219

22

Technology

JAZUG女子部 第2回勉強会 ハンズオン

JAZUG女子部第2回勉強会ハンズオン