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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

24,311

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,311
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
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

×