• Like
JAZUG女子部 第2回勉強会 ハンズオン
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 20,393 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
20,393
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
28
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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 SampleWebRole12. { Point 26 目の右13. public partial class _Default : System.Web.UI.Page14. {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. else52. {53.54. Label1.Text = "画像が指定されていません";55. return; Point ブロブを扱うコード56. }57.58. } コンテナ ブロブ59. } CloudBlouContainer CloudBlob60. } 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