Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Azure入門
ハンズオン
2017年9月20日
山ノ内祥訓
自己紹介
名前
年齢
住まい
お仕事
山ノ内 祥訓(よしのり)
0x26
熊本県
現在は某大学病院の特任助教で臨床研究
のデータマネージャとして主に臨床研究
データに関する設計及び開発と運用を
やっています。
某SIerで医療情報システムの導入...
ハンズオンの内容
1)Webアプリケーション
2)仮想ネットワークインフラ
3)コグニティブサービス
Webアプリケーション
Webアクセス
リリース
DBアクセス
開発
Azureポータル
WebApp+SQLの作成
1.App Serviceの「追加」からWeb App + SQLを選択
2.WebAppの情報を入力
• アプリケーション名入力
• サブスクリプション選択
• リソースグループはhandson20170920を作...
WebApp+SQLの作成
3.SQL Databaseの作成
4.SQL Databaseサーバの作成
• サーバ名入力
• 管理者ユーザ/パスワード入力
• 西日本リージョン
• データベース名入力
• データベースサーバ作成
• Feee...
Visual Sdudioでの開発
1.「新規プロジェクト」でWebアプリケーションを作成
2.必要なライブラリのインストール
• .Net Framework4.5 MVC構成
• 認証なし
• AzureのAppServiceにホスト
• ...
Webアプリケーション開発
1.テスト用のDB環境作成
2.単純なCURD画面を作成
• Code FirstでADO.NET Entity Data Modelを追加
• App_DataにSQLデータファイルを追加
• Web.Config...
Webアプリケーションのリリース
1.AzureのAppServiceに発行
2.動作確認
• 作成したWebAppを選択
• App_Dataは除外、他各種コンパイル設定
• データベースの接続先が作成したSQL Databaseになってい
...
Webアプリケーションの拡張
1.スケールアップ
2.スケールアウト
• F1 Freeは最小機能なので開発テスト時のみがよい
• 本番の負荷に耐えるには価格レベルの変更が必要
• 価格レベルの変更は再作成の必要なし
• 1台のWebサーバで耐...
仮想ネットワークインフラ
Webアクセス
RDPアクセス
双方向アクセス
192.168.0.0/16
192.168.1.0/24 192.168.2.0/24
仮想ネットワークの作成
1.Virtual networks(VNet)の追加
2.サブネットを作成
• 192.168.0.0/16でアドレス範囲を設定
• リソースグループは先ほど作成したものを選択
• サブスクリプションを選択
• リージ...
セキュリティグループの作成
1.Public subnet用のセキュリティグループ(NSG)の追加
2.Private subnet用のセキュリティグループ(NSG)の追加
• VNetと同じサブスクリプション、リージョンを選択
• Inbou...
確認用仮想マシンの作成
1.作業用VMの作成(1台)
• Windows Server 2016 Datacenter
• A2 Basic
• 管理者ユーザ名/パスワードは自由に設定
• Public subnetに割り当て
• グローバルI...
作業用マシンへの接続
1.作業用VMへの接続
• 仮想マシンの概要からRDPファイルをダウンロード
• 作成時に決めたユーザ名とパスワードでログイン
2.作業用VMの環境設定
• 適当なSSHクライアントをインストール
• Teraterm
•...
ネットワーク疎通の動作確認
1.作業用VM
• Internet Explorerで外部のWebサイトが見えるか
• 確認用VM2台にSSH接続できるか
2.作業用VM(public subnet)
• Curlコマンドで外部Webサイトが見え...
コグニティブサービス
文字認識リクエスト
コグニティブサービスの作成
1.Cognitive Serviceの追加
• Computer Vision APIを使用
• リージョンは米国西部(日本国内
リージョンはまだ未対応)
• リソースグループは今回作成したも
のでよい
• データ...
Visual Studioのプロジェクト
1.Windowsフォームアプリケーションを作成
• .NET Framework4.5
• 下記のような画面を作成
Picturebox Textbox
ライブラリの取得
1.NugetからCongnitive Serviceのライブラリを取得
• Microsoft.ProjectOxford.Vision
必要なコードを追加
1.クリップボードの画像を取得
if (Clipboard.ContainsImage()) {
this.PicSourceImage.Image = Clipboard.GetImage();
} else {
var ...
必要なコードを追加
2.Congnitive Serviceへのリクエスト
VisionServiceClient OcrService=new VisionServiceClient("XXXXXXXXXXXXXXXXXXXX");
OcrR...
必要なコードを追加
3.出力結果をテキストボックスに表示
if (result != null && result.Regions != null) {
StringBuilder restext = new StringBuilder();
...
シークレットキー設定
1.作成したVisionAPIのシークレットキーをコピー
2.CongnitiveServiceのコンストラクタにキーを設定
• 2つあるがどちらを使ってもよい
実行して動作確認
1.適当な文章を画像にしてコピーしておきOCR変換
ハンズオン後の後始末
今回作成した環境は全て同じ
リソースグループになっているはず
リソースグループを消せば全部消せます
以上でハンズオンは終わりです
お疲れ様でした。
全体を通して質問などがあれば
できる限りお答えします。
改めて告知!!
9月22日(金) AWS DB Day
9月20日(水) オトナのプログラミング勉強会
9月30日(土) わんくま同盟 熊本勉強会#5
→AWSの概要とDB移行について
→デザインパターン入門
→ASP.NET、Bot、コンテナ...
Upcoming SlideShare
Loading in …5
×

Azureミニセミナー(ハンズオン編)

565 views

Published on

2017/09/20にKISで開催されたAzureミニセミナーの資料です。

Published in: Software
  • Have u ever tried external professional writing services like ⇒ www.HelpWriting.net ⇐ ? I did and I am more than satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Azureミニセミナー(ハンズオン編)

  1. 1. Azure入門 ハンズオン 2017年9月20日 山ノ内祥訓
  2. 2. 自己紹介 名前 年齢 住まい お仕事 山ノ内 祥訓(よしのり) 0x26 熊本県 現在は某大学病院の特任助教で臨床研究 のデータマネージャとして主に臨床研究 データに関する設計及び開発と運用を やっています。 某SIerで医療情報システムの導入及び開発を10年 ぐらいやっていました。 SNS Facebook https://www.facebook.com/yoshinori.yamanouchi.12 Github https://github.com/eolla1013 資格等 修士(医科学) 現在博士課程 医療情報技師 Yoshinori Yamanouchi
  3. 3. ハンズオンの内容 1)Webアプリケーション 2)仮想ネットワークインフラ 3)コグニティブサービス
  4. 4. Webアプリケーション Webアクセス リリース DBアクセス 開発
  5. 5. Azureポータル
  6. 6. WebApp+SQLの作成 1.App Serviceの「追加」からWeb App + SQLを選択 2.WebAppの情報を入力 • アプリケーション名入力 • サブスクリプション選択 • リソースグループはhandson20170920を作成 • AppServiceプラン作成 • プラン名入力 • 西日本リージョン • F1 Free
  7. 7. WebApp+SQLの作成 3.SQL Databaseの作成 4.SQL Databaseサーバの作成 • サーバ名入力 • 管理者ユーザ/パスワード入力 • 西日本リージョン • データベース名入力 • データベースサーバ作成 • Feeeレベル • 照合順序はJapanese_XJIS_100_CS_AS_KSを指定
  8. 8. Visual Sdudioでの開発 1.「新規プロジェクト」でWebアプリケーションを作成 2.必要なライブラリのインストール • .Net Framework4.5 MVC構成 • 認証なし • AzureのAppServiceにホスト • AppServiceの構成ウィザードはキャンセル • NuGetでEntityFrameworkを選択
  9. 9. Webアプリケーション開発 1.テスト用のDB環境作成 2.単純なCURD画面を作成 • Code FirstでADO.NET Entity Data Modelを追加 • App_DataにSQLデータファイルを追加 • Web.Configの接続文字列をSQLデータファイルに変更 • PONOでモデルクラスを作成 • データコンテキストクラスにPONOのプロパティを追加 • 新規スキャンフォールディングでEntityFrameworkを使 用したViewのあるMVC5コントローラを作成 • Views/Shared/_Layout.chtmlに作成したコントローラ のメニューを追加 • デバッグ実行して動作を確認
  10. 10. Webアプリケーションのリリース 1.AzureのAppServiceに発行 2.動作確認 • 作成したWebAppを選択 • App_Dataは除外、他各種コンパイル設定 • データベースの接続先が作成したSQL Databaseになってい ることを確認 • アプリケーションをブラウザで開いて動作確認 • SQL Databaseの参照はローカルのSQLServerと同じ • ただし、ファイヤウォールがあるので自IPのみ解除する こと
  11. 11. Webアプリケーションの拡張 1.スケールアップ 2.スケールアウト • F1 Freeは最小機能なので開発テスト時のみがよい • 本番の負荷に耐えるには価格レベルの変更が必要 • 価格レベルの変更は再作成の必要なし • 1台のWebサーバで耐えきれなくなったときに使う • 事前に最大最小台数と初期台数を指定できる • 再作成の必要なくアプリケーションも自動展開される • ロードバランサは組み込み済み
  12. 12. 仮想ネットワークインフラ Webアクセス RDPアクセス 双方向アクセス 192.168.0.0/16 192.168.1.0/24 192.168.2.0/24
  13. 13. 仮想ネットワークの作成 1.Virtual networks(VNet)の追加 2.サブネットを作成 • 192.168.0.0/16でアドレス範囲を設定 • リソースグループは先ほど作成したものを選択 • サブスクリプションを選択 • リージョンは西日本を指定 • サブネット1(public subnet) • 192.168.1.0/24 • サブネット2(private subnet) • 192.168.2.0/24
  14. 14. セキュリティグループの作成 1.Public subnet用のセキュリティグループ(NSG)の追加 2.Private subnet用のセキュリティグループ(NSG)の追加 • VNetと同じサブスクリプション、リージョンを選択 • Inbound security rulesにRDPプロトコルの許可を追加 • サブネットに割り当て • VNetと同じサブスクリプション、リージョンを選択 • Outbound security rulesにInternetへの全接続拒否を追加 • サブネットに割り当て
  15. 15. 確認用仮想マシンの作成 1.作業用VMの作成(1台) • Windows Server 2016 Datacenter • A2 Basic • 管理者ユーザ名/パスワードは自由に設定 • Public subnetに割り当て • グローバルIP付与 • セキュリティグループはなしを指定 2.確認用VMの作成(2台) • Ubuntu Server 16.04 LTS • A1 Basic • ログインはユーザ名/パスワードを指定内容は自由に設定 • Public subnetに1台、Private subnetに1台割り当て • グローバルIPは付与しない • セキュリティグループはなしを指定
  16. 16. 作業用マシンへの接続 1.作業用VMへの接続 • 仮想マシンの概要からRDPファイルをダウンロード • 作成時に決めたユーザ名とパスワードでログイン 2.作業用VMの環境設定 • 適当なSSHクライアントをインストール • Teraterm • Putty 3.確認用VMへのログイン • SSHクライアントを使って作業用VMから確認用 VMに接続
  17. 17. ネットワーク疎通の動作確認 1.作業用VM • Internet Explorerで外部のWebサイトが見えるか • 確認用VM2台にSSH接続できるか 2.作業用VM(public subnet) • Curlコマンドで外部Webサイトが見えるか 3.作業用VM(private subnet) • 作業用VM(public sunet)にSSH接続できるか • Curlコマンドで外部Webサイトが見えないか
  18. 18. コグニティブサービス 文字認識リクエスト
  19. 19. コグニティブサービスの作成 1.Cognitive Serviceの追加 • Computer Vision APIを使用 • リージョンは米国西部(日本国内 リージョンはまだ未対応) • リソースグループは今回作成したも のでよい • データ二次利用の同意取得
  20. 20. Visual Studioのプロジェクト 1.Windowsフォームアプリケーションを作成 • .NET Framework4.5 • 下記のような画面を作成 Picturebox Textbox
  21. 21. ライブラリの取得 1.NugetからCongnitive Serviceのライブラリを取得 • Microsoft.ProjectOxford.Vision
  22. 22. 必要なコードを追加 1.クリップボードの画像を取得 if (Clipboard.ContainsImage()) { this.PicSourceImage.Image = Clipboard.GetImage(); } else { var data = Clipboard.GetDataObject(); StringBuilder msg = new StringBuilder(); msg.Append("クリップボードにあるデータは画像データではありません。"); foreach (string itm in data.GetFormats()) { msg.Append(itm); } MessageBox.Show(msg.ToString(), "クリップボードからの画像読み込み", MessageBoxButtons.OK, MessageBoxIcon.Error); } }
  23. 23. 必要なコードを追加 2.Congnitive Serviceへのリクエスト VisionServiceClient OcrService=new VisionServiceClient("XXXXXXXXXXXXXXXXXXXX"); OcrResults result = null; try { using (System.IO.MemoryStream stm = new System.IO.MemoryStream()) { this.PicSourceImage.Image.Save(stm, System.Drawing.Imaging.ImageFormat.Bmp); stm.Seek(0, System.IO.SeekOrigin.Begin); Task<OcrResults> tsk = OcrService.RecognizeTextAsync(stm, "ja"); result = tsk.Result; } } catch (AggregateException ex) { StringBuilder msg = new StringBuilder(); msg.AppendLine(ex.ToString()); foreach (Exception inex in ex.InnerExceptions) { if (inex is ClientException) { msg.AppendLine(((ClientException)inex).Error.Code + ":" + ((ClientException)inex).Error.Message); } } MessageBox.Show(msg.ToString(), "Congnitive Service Vision APIエラー", MessageBoxButtons.OK, MessageBoxIcon.Error); } catch (Exception ex) { MessageBox.Show(ex.ToString(), "OCR変換エラー", MessageBoxButtons.OK, MessageBoxIcon.Error); }
  24. 24. 必要なコードを追加 3.出力結果をテキストボックスに表示 if (result != null && result.Regions != null) { StringBuilder restext = new StringBuilder(); foreach (var reg in result.Regions) { foreach (var line in reg.Lines) { foreach (var word in line.Words) { restext.Append(word.Text); } restext.AppendLine(); } restext.AppendLine(); } this.TxtOutputText.Text = restext.ToString(); }
  25. 25. シークレットキー設定 1.作成したVisionAPIのシークレットキーをコピー 2.CongnitiveServiceのコンストラクタにキーを設定 • 2つあるがどちらを使ってもよい
  26. 26. 実行して動作確認 1.適当な文章を画像にしてコピーしておきOCR変換
  27. 27. ハンズオン後の後始末 今回作成した環境は全て同じ リソースグループになっているはず リソースグループを消せば全部消せます
  28. 28. 以上でハンズオンは終わりです お疲れ様でした。 全体を通して質問などがあれば できる限りお答えします。
  29. 29. 改めて告知!! 9月22日(金) AWS DB Day 9月20日(水) オトナのプログラミング勉強会 9月30日(土) わんくま同盟 熊本勉強会#5 →AWSの概要とDB移行について →デザインパターン入門 →ASP.NET、Bot、コンテナ、WebAPI https://otona.connpass.com/event/66425/ https://pages.awscloud.com/awsdbdaykumamoto20170922.html https://fukuten.connpass.com/event/63612/ http://www.wankuma.com/seminar/20170930kumamoto05/ 10月21日(土) Fukuoka.NET Conf 2017

×