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

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回勉強会ハンズオン

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

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

Último

Último (9)