狠狠撸

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 は
匏用していないため、インストールしなくても構いません。

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

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

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

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

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

Point ストレージ
アカウントの作成
URLに指定する値がストレージ
アカウントの名前になるワ。URLだから
一意性を保つ必要があるので気をつけテネ。
地域はどこでもいけれど、アクセス場所
から近いところを選ぶことが多いカナ。
ちなみに東南アジアだとシンガポール、
東アジアだと香港のDCネ！

3


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

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

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

Point Visual Studioの起動

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

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

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

[新しいプロジェクト]ダイアログで以下を設定（または選択）します
テンプレート：[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]をダブルク
リックします。

[デザイン]を
クリックすると既存の
UIが確認できます

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

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

表面の文字（Textプロ
パティの値）設定は
任意です！

6


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

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

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

名前：StorageConnectionString
種類：接続文字

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

参照ボタン

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

Point
ストレージへの接続

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

7


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


トレージアカウント]を選択します。

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

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

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

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

Point ２つのアクセスキー

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

8


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

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

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

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

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

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

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

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

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

9


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

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

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

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

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

10

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

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 SampleWebRole
12. { Point 26 目の右
13. public partial class _Default : System.Web.UI.Page
14. {
15. protected void Page_Load(object sender, EventArgs e) 26 目のコードで.cscfgに格納した
16. { 値を取得しているノヨ。
17. } StorageConnectionStringってのは
18. 手順6で設定した名前ネ。
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");
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. else
52. {
53.
54. Label1.Text = "画像が指定されていません";
55. return; Point ブロブを扱うコード
56. }
57.
58. }
コンテナブロブ
59. } CloudBlouContainer CloudBlob
60. }

CloudBlobClient

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

11


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

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

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

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

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

12


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

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

Point Windows Azureの診断機能

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

デフォルトの設定だと、Azureのデプロイ時に
ログの匪が実際のAzureストレージに
卲りわって、ストレージへの書き匸みが
発生するので、今回は診断機能をOffにするノ！

Azure ストレージ

転送

Webロールブロブテーブル

? ローカルストレージはインス ? 数のロールでしたログを
タンスごとに存在するマージして保存できる
? ロール再起動時などに初期化 ? 転送したログに永続性がある
される可能性がある

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

知らないうちにAzureストレージへのトランザクションが発生
↓
使用ージをてびっくり！
↓
ストレージ使ってないはずなのに…と厩がわからず対叀できず
↓
ついに無厄の上限にしてしまったり、次回以もいつの間にか
使用が増えちゃうの…？とびくびくしちゃったり
（ただし、無厄を使い卲ってもインスタンスが削除されるだけで、
手にはされませんのでご勣心を！）

13


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

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

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

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

Point パッケージングと
デプロイ
今回のハンズオンではパッケージングと
デプロイを2段階に分けているけれど、
[発 ]メニューから一でうことも
できるのヨ。別の機会にでも
試してみテネ。感動すること
間違いなしヨ！

14


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


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

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

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

Point デプロイオプション

1つのホステッドサービスに運用環境と
ステージング環境とがあるノ。運用
環境はその名の通り運用で使う環境ネ。
ステージング環境はテスト環境で使ったり
次期バージョンを配置してスタンバイ
させたりするワ。

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

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]タブに卲りえ、メタデータが設定されていることを確認します。

P9の45、46 目で
メタデータの
設定しています！

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

19

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

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


ステッドサービス]を選択します。

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

今は
インスタンス数が
1つです！

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

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

しばらく待機し、インスタンス数が増えたことを確認します。
Windows Azureにはロードバランサがついているので、
インスタンス数を増やすだけで、簡単に負荷分散ができます！

20

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

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


ステッドサービス]を選択します。

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

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

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

21

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

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


トレージサービス]を選択します。

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

[ストレージ
サービス]を
選択しています

コレではされない叔になるワ！
Azureはとてもイイコで匏だからこれからもどんどん使ってネ。
けれど、もしもAzureの解約をしたいときには、オンラインで
解約も可能ヨ。
詳しくは JAZUG はるたまさんのblogをてくださいネ。
http://d.hatena.ne.jp/haru-tama/20111219

22

狠狠撸

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

Recommended

More Related Content

What's hot (20)

Similar to JAZUG女子部第2回勉強会ハンズオン (20)

Recently uploaded (8)

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

狠狠撸

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

Recommended

More Related Content

What's hot (20)

Similar to JAZUG女子部 第2回勉強会 ハンズオン (20)

Recently uploaded (8)

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

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

Similar to JAZUG女子部第2回勉強会ハンズオン (20)

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