Contenu connexe Similaire à JAZUG女子部 第2回勉強会 ハンズオン Similaire à JAZUG女子部 第2回勉強会 ハンズオン (20) JAZUG女子部 第2回勉強会 ハンズオン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 は
匏用していないため、インストールしなくても構いません。
3. Azureを使ってみよう!ハンズオン手順(1/16)
手順 1. 事前準備として、Azure側にストレージの設定を追加しましょう。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ス
トレージアカウント]を選択します。その上で、[新規ストレージアカウント]をクリッ
クします。
[ストレージアカウントの新規作成]ダイアログでURLと地域を設定(設定値はどちら
も任意)し、[OK]ボタンをクリックします。
Point ストレージ
アカウントの作成
URLに指定する値がストレージ
アカウントの名前になるワ。URLだから
一意性を保つ必要があるので気をつけテネ。
地域はどこでも いけれど、アクセス場所
から近いところを選ぶことが多いカナ。
ちなみに東南アジアだとシンガポール、
東アジアだと香港のDCネ!
3
4. Azureを使ってみよう!ハンズオン手順(2/16)
手順 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
5. Azureを使ってみよう!ハンズオン手順(3/16)
手順 4. Webロールを1つ追加しましょう。
[新しいWindowsAzureプロジェクト]ダイアログから[ASP.NET Webロール]を追加
し、名前を変 します。
名前:SampleWebRole
追加後、[OK]ボタンをクリックします(少し時間がかかります)。
鉛筆のアイコンを
クリックすることで
名前が編集できます
5. 右上のソリューションエクスプローラーを確認しましょう(作業はありません)。
ここまでのまとめ
Azureにデプロイするのは
SampleWebRoleネ。
でも、このままデプロイせず
パッケージ(圧縮ファイル)に
する必要があるノ。パッケージ
作成のために必要なのが
HelloWindows
AzureProjectということネ!
5
6. Azureを使ってみよう!ハンズオン手順(4/16)
手順 6. 作成したWebロールのUIを編集しましょう。
ソリューションエクスプローラーで[SampleWebRole]-[Default.aspx]をダブルク
リックします。
[デザイン]を
クリックすると既存の
UIが確認できます
[ツールボックス]からFileUploadコントロールをドラッグアンドドロップします。
(FileUploadコントロールなどの各部品の配置はあまり気にしなくてOK!)
上図の作業と同様に、LabelコントロールとButtonコントロールをドラッグアンドド
ロップで追加します。
(Labelコントロールの配置前にEnterキーで匳 すると いですよ!)
表面の文字(Textプロ
パティの値)設定は
任意です!
6
7. Azureを使ってみよう!ハンズオン手順(5/16)
手順 7. アプリからストレージを匏用するための設定をしましょう。
ソリューションエクスプローラーで[HelloWindowsAzureProject]-[ロール]-
[SampleWebRole]をダブルクリックします。
ロールの設定画面で、[設定]タブを選択し、[設定の追加]ボタンをクリックします。
追加した に以下の設定をします。
名前:StorageConnectionString
種類:接続文字
設定後、[参照]ボタンをクリックします。
参照ボタン
[ストレージアカウント接続文字 ]ダイアログを表示します(操作は後です)。
Point
ストレージへの接続
ストレージに接続するには、
アカウント名とキーが必要ネ。
これらはロールの設定値として
保存しておくとデプロイ後も
変 できるから 匏ヨ!
7
8. Azureを使ってみよう!ハンズオン手順(6/16)
手順 8. Azure側で使うストレージの設定を確認しましょう。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ス
トレージアカウント]を選択します。
ストレージアカウント名を確認した上で、[プロパティ]-[プライマリアクセスキー]の
[表示]ボタンをクリックします。
アカウント名はココ!
(プロパティでも確認
できます)
[ストレージアクセスキーの表示]ダイアログからアクセスキーをコピーし、[閉じる]
ボタンをクリックします。
クリックすることで
キーをコピーします
Point 2つのアクセスキー
ストレージアクセスキーはどちらを
使っても問題ないワ。通常は片方だけを
使い続けて、キーの えいなどの 常時に
もう片方を使うこともあるソウヨ。
そして、 えいしてしまった方のキーを
再生成することで えいに対厸する
ことができるノヨ。
8
9. Azureを使ってみよう!ハンズオン手順(7/16)
手順 9. 手順8で確認したストレージ名とアクセスキーを設定しましょう。
Visual Studioの[ストレージアカウント接続文字 ]ダイアログで[ストレージアカウ
ントの 格情報の入 ]を選択し、アカウント名とキーを入 します。
[既定のHTTPSエンドポイントの使用]が選択されていることを確認し、[OK]ボタンを
クリックします。
手順8で確認した
アカウント名を入 !
10. 設定値が保存されていることを確認しましょう(作業はありません)。
ソリューションエクスプローラーから[HelloWindows AzureProject]-
[ServiceConfigration.Cloud.cscfg]をダブルクリックします。
ここまでのまとめ
HelloWindowsAzureProject
Azureにデプロイするためのパッケージを作ったりするプロジェクト。
パッケージングすると、.cspkgファイルと.cscfgができる(つまり上図の
cscfgファイルはデプロイ後でも変 可能なファイルってコト)。
ストレージにアクセスするために必要な情報は、今ココに格納してるワ!
SampleWebRole
AzureにデプロイするWebRoleのUIやコードを含めたプロジェクト。
ストレージにアクセスするためのコードはまだ書いていないワネ。
11. 上書き保存しておきましょう!
[すべてを保存]ボタンをクリックします。
9
10. Azureを使ってみよう!ハンズオン手順(8/16)
手順 12. アップロード用ボタンをクリック時のイベントハンドラを作成しましょう。
Default.aspxを開き、アップロード用ボタンをダブルクリックします。
Default.aspx.csが開いたら、コードをすべて消して以下のテキストファイルに置き換
えて、上書き保存します。
ファイルの場所 :デスクトップ
ファイル名 :Default.aspx.cs.txt
Using…も含めて
すべて消しちゃって
OK!
次のページには、上記手順で張り付けたコードが載っています。
すべてを読んで 解する必要はありませんが、 などでもう一
本ハンズオンを試したり、Blobを扱うコード を確認したりする際の
参考にしてくださいね!
10
11. ☆手順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
12. Azureを使ってみよう!ハンズオン手順(9/16)
手順 13. 作成したアプリをエミュレーター上で実 しましょう。
[デバッグ]-[デバッグ開始]をクリックします。
ブラウザが起動します。何か画像ファイルをアップロードしてみましょう!
(アップロードできたかどうか後で確認します。ここではアップロード用ボタンを押
下して、 アップロードが しました の文字が表示されればOKとしてください)
ここまでのまとめ
まだAzureにデプロイしていないから、作ったWebRoleのアプリケーションは
エミュレータ上で動いているワ。
でも、ストレージはエミュレータではなくAzure上のものを使っているノ。
順を追っていくと、デバッグ開始をクリックすると、パッケージングされて
ローカルマシンのエミュレータ上に配置されて、その後ブラウザが ちあがっ
てアプリを動かしたわネ。アップロード用ボタンをクリックすることで、
.cscfgにあるストレージ名やキーを取得して、実際のAzureストレージ上に画像
をアップロードしてたってコト!OK?
12
13. Azureを使ってみよう!ハンズオン手順(10/16)
手順 14. Azure上にデプロイするためのパッケージングをしましょう。
ソリューションエクスプローラーで[HelloWindowsAzureProject]-[ロール]-
[SampleWebRole]をダブルクリックします。
[構成]タブ内の[診断を有効にする]のチェックを外します。
Point Windows Azureの診断機能
Windows Azureには診断機能があるノ。この診
断機能が各種ログの収集作業をしてくれているのネ。
診断機能が収集したログを各ロールのローカル
ストレージに蓄積して、最終的にはローカル
ストレージに転送する仕組みになっているノ。
デフォルトの設定だと、Azureのデプロイ時に
ログの 匪が実際のAzureストレージに
卲り わって、ストレージへの書き匸みが
発生するので、今回は診断機能をOffにするノ!
Azure ストレージ
転送
Webロール ブロブ テーブル
• ローカルストレージはインス • 数のロールで したログを
タンスごとに存在する マージして保存できる
• ロール再起動時などに初期化 • 転送したログに永続性がある
される可能性がある
トラブル発生時にはとっても心勮い診断機能だけれど、意 して使わないと…
知らないうちにAzureストレージへのトランザクションが発生
↓
使用 ージを てびっくり!
↓
ストレージ使ってないはずなのに…と 厩がわからず対叀できず
↓
ついに無厄 の上限に してしまったり、次回以 もいつの間にか
使用 が増えちゃうの…?とびくびくしちゃったり
(ただし、無厄 を使い卲ってもインスタンスが削除されるだけで、
手に はされませんのでご勣心を!)
13
14. Azureを使ってみよう!ハンズオン手順(11/16)
手順 14. Azure上にデプロイするためのパッケージングをしましょう(続き)。
ソリューションエクスプローラーで[HelloWindowsAzureProject]を選択して、右ク
リックします。コンテキストメニューから[パッケージ]をクリックします。
[Windows Azureアプリケーションのパッケージ化]ダイアログで、そのまま[パッ
ケージ]ボタンをクリックします。
しばらく待つと.cspkgファイルと.cscfgファイルが格納されたフォルダが開きます。
Point パッケージングと
デプロイ
今回のハンズオンではパッケージングと
デプロイを2段階に分けているけれど、
[発 ]メニューから一 で うことも
できるのヨ。別の機会にでも
試してみテネ。感動すること
間違いなしヨ!
14
15. Azureを使ってみよう!ハンズオン手順(12/16)
手順 15. 作成したファイルをデプロイしましょう。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ホ
ステッドサービス]を選択します。その上で、[新規ホステッドサービス]をクリックし
ます。
[ホステッドサービスの新規作成]ダイアログに以下の値を設定し、[OK]ボタンをク
リックします。
サービスの名前: HandsOnApp
サービスのURL: (任意の値)
デプロイ名: HandsOn_V1
地域: (任意の地域)
パッケージの場所: .cspkgへのパス
構成ファイル: .cscfgへのパス
Point デプロイオプション
1つのホステッドサービスに運用環境と
ステージング環境とがあるノ。運用
環境はその名の通り運用で使う環境ネ。
ステージング環境はテスト環境で使ったり
次期バージョンを配置してスタンバイ
させたりするワ。
インスタンス数が1つであることの警告ダイアログに対し、[はい]ボタンをクリックし
ます。
15
16. Azureを使ってみよう!ハンズオン手順(13/16)
手順 15. 作成したファイルをデプロイしましょう(続き)。
叔 が準備 になるまで待機します。DNS名をクリックし、簡単な動作確認をしま
す。
[VIPのスワップ]をクリックし、ステージング環境と本 環境の卲り えをします。
[VIPスワップ]ダイアログに対し[OK]ボタンをクリックして、再 叔 が準備 に
なるまで待機します。
ここまでのまとめ
これで作業はおしまいヨ!
本当に画像がアップロードさ
れたか たいところだけど、
ながら ポータルでは
ブロブの叔 は れないノ。
だから、次の手順でツールを
使った確認をシマショ!
16
17. Azureを使ってみよう!ハンズオン手順(14/16)
手順 16. Azure Storage Explorerを起動しましょう。
[スタート]ボタン-[すべてのプログラム]-[Neudesic]-[Azure Storage Explorer]を
クリックします。
[Welcome!]ダイアログの左のボタンをクリックし、ダイアログを閉じます。
[Add Account]ボタンをクリックし、アカウント情報を入 するためのダイアログを
表示します。
17
18. Azureを使ってみよう!ハンズオン手順(15/16)
手順 16. Azure Storage Explorerを起動しましょう(続き)。
手順8で確認したストレージアカウント名とキーを入 し、[Use HTTPS]にチェック
を入れます。
設定後、[Add Storage Accont]ボタンをクリックします。
初回アクセス時の注意点のダイアログに対し、[OK]ボタンをクリックします。
しばらく待つと、下図のようにBlobの情報が確認できます。
アカウント名
ブロブ
コンテナ コンテナ内
のブロブ
18
19. Azureを使ってみよう!ハンズオン手順(16/16)
手順 16. Azure Storage Explorerを起動しましょう(続き)。
コンテナに格納されたブロブ(ファイル)をダブルクリックします。
[Metadata]タブに卲り え、メタデータが設定されていることを確認します。
P9の45、46 目で
メタデータの
設定しています!
[Image]タブに卲り え、ブロブとして格納した画像の内卣を確認します。
19
20. ☆おまけ1 デプロイ後にインスタンス数を変えてみよう!
Windows Azureはインスタンス数を簡単に増匬できるのも です。インスタンス数の変 は 動化
することもできますが、ここでは手動で変 してみましょう!
手順 1. ホステッドサービスを確認します。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ホ
ステッドサービス]を選択します。
種類が[デプロイ]の項目を選択し、[構成]ボタンをクリックします。
今は
インスタンス数が
1つです!
[デプロイの構成]ダイアログで、[現在の構成の編集]を選択します。
<Instances>要素のcount属性を以下のように修正し、[OK]ボタンをクリックします。
旧:<Instances count=“1” />
新:<Instances count=“3” />
しばらく待機し、インスタンス数が増えたことを確認します。
Windows Azureにはロードバランサがついているので、
インスタンス数を増やすだけで、簡単に負荷分散ができます!
20
21. ☆おまけ2 デプロイしたパッケージの削除方法(1/2)
Windows Azureでは、インスタンスの 厙をしても されます。ここでは、今回のハンズオンで
デプロイしたものをすべて削除し、 が発生しないようにする方法を紹介します。
手順 1. ホステッドサービスを削除します。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ホ
ステッドサービス]を選択します。
種類が[デプロイ]の項目を選択し、[削除]ボタンをクリックします。
種類が[ホステッドサービス]の項目を選択し、[削除]ボタンをクリックします。
デプロイが消えてから
[削除]ボタンを押しましょう!
21
22. ☆おまけ2 デプロイしたパッケージの削除方法(2/2)
Windows Azureでは、インスタンスの 厙をしても されます。ここでは、今回のハンズオンで
デプロイしたものをすべて削除し、 が発生しないようにする方法を紹介します。
手順 2. ストレージアカウントを削除します。
ブラウザからWindows Azure ポータル
(https://windows.azure.com/default.aspx)に接続します。
左下の[ホステッド サービス、ストレージ アカウント、CDN]を選択し、左中央の[ス
トレージサービス]を選択します。
[ストレージの削除]ボタンをクリックします。
[ストレージ
サービス]を
選択しています
コレで はされない叔 になるワ!
Azureはとてもイイコで 匏だからこれからもどんどん使ってネ。
けれど、もしもAzureの解約をしたいときには、オンラインで
解約も可能ヨ。
詳しくは JAZUG はるたまさんのblogを てくださいネ。
http://d.hatena.ne.jp/haru-tama/20111219
22