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

1. Azure入門
ハンズオン
2017年9月20日
山ノ内祥訓

2. 自己紹介
名前
年齢
住まい
お仕事
山ノ内 祥訓(よしのり)
0x26
熊本県
現在は某大学病院の特任助教で臨床研究
のデータマネージャとして主に臨床研究
データに関する設計及び開発と運用を
やっています。
某SIerで医療情報システムの導入及び開発を10年
ぐらいやっていました。
SNS Facebook
https://www.facebook.com/yoshinori.yamanouchi.12
Github https://github.com/eolla1013
資格等 修士（医科学） 現在博士課程
医療情報技師
Yoshinori Yamanouchi

3. ハンズオンの内容
１）Webアプリケーション
２）仮想ネットワークインフラ
３）コグニティブサービス

4. Webアプリケーション
Webアクセス
リリース
DBアクセス
開発

5. Azureポータル

6. WebApp+SQLの作成
１．App Serviceの「追加」からWeb App + SQLを選択
２．WebAppの情報を入力
• アプリケーション名入力
• サブスクリプション選択
• リソースグループはhandson20170920を作成
• AppServiceプラン作成
• プラン名入力
• 西日本リージョン
• F1 Free

7. WebApp+SQLの作成
３．SQL Databaseの作成
４．SQL Databaseサーバの作成
• サーバ名入力
• 管理者ユーザ／パスワード入力
• 西日本リージョン
• データベース名入力
• データベースサーバ作成
• Feeeレベル
• 照合順序はJapanese_XJIS_100_CS_AS_KSを指定

8. Visual Sdudioでの開発
１．「新規プロジェクト」でWebアプリケーションを作成
２．必要なライブラリのインストール
• .Net Framework4.5 MVC構成
• 認証なし
• AzureのAppServiceにホスト
• AppServiceの構成ウィザードはキャンセル
• NuGetでEntityFrameworkを選択

9. Webアプリケーション開発
１．テスト用のDB環境作成
２．単純なCURD画面を作成
• Code FirstでADO.NET Entity Data Modelを追加
• App_DataにSQLデータファイルを追加
• Web.Configの接続文字列をSQLデータファイルに変更
• PONOでモデルクラスを作成
• データコンテキストクラスにPONOのプロパティを追加
• 新規スキャンフォールディングでEntityFrameworkを使
用したViewのあるMVC5コントローラを作成
• Views/Shared/_Layout.chtmlに作成したコントローラ
のメニューを追加
• デバッグ実行して動作を確認

10. Webアプリケーションのリリース
１．AzureのAppServiceに発行
２．動作確認
• 作成したWebAppを選択
• App_Dataは除外、他各種コンパイル設定
• データベースの接続先が作成したSQL Databaseになってい
ることを確認
• アプリケーションをブラウザで開いて動作確認
• SQL Databaseの参照はローカルのSQLServerと同じ
• ただし、ファイヤウォールがあるので自IPのみ解除する
こと

11. Webアプリケーションの拡張
１．スケールアップ
２．スケールアウト
• F1 Freeは最小機能なので開発テスト時のみがよい
• 本番の負荷に耐えるには価格レベルの変更が必要
• 価格レベルの変更は再作成の必要なし
• 1台のWebサーバで耐えきれなくなったときに使う
• 事前に最大最小台数と初期台数を指定できる
• 再作成の必要なくアプリケーションも自動展開される
• ロードバランサは組み込み済み

12. 仮想ネットワークインフラ
Webアクセス
RDPアクセス
双方向アクセス
192.168.0.0/16
192.168.1.0/24 192.168.2.0/24

13. 仮想ネットワークの作成
１．Virtual networks(VNet)の追加
２．サブネットを作成
• 192.168.0.0/16でアドレス範囲を設定
• リソースグループは先ほど作成したものを選択
• サブスクリプションを選択
• リージョンは西日本を指定
• サブネット1(public subnet)
• 192.168.1.0/24
• サブネット2(private subnet)
• 192.168.2.0/24

14. セキュリティグループの作成
１．Public subnet用のセキュリティグループ(NSG)の追加
２．Private subnet用のセキュリティグループ(NSG)の追加
• VNetと同じサブスクリプション、リージョンを選択
• Inbound security rulesにRDPプロトコルの許可を追加
• サブネットに割り当て
• VNetと同じサブスクリプション、リージョンを選択
• Outbound security rulesにInternetへの全接続拒否を追加
• サブネットに割り当て

15. 確認用仮想マシンの作成
１．作業用VMの作成(1台)
• Windows Server 2016 Datacenter
• A2 Basic
• 管理者ユーザ名／パスワードは自由に設定
• Public subnetに割り当て
• グローバルIP付与
• セキュリティグループはなしを指定
２．確認用VMの作成(2台)
• Ubuntu Server 16.04 LTS
• A1 Basic
• ログインはユーザ名／パスワードを指定内容は自由に設定
• Public subnetに1台、Private subnetに1台割り当て
• グローバルIPは付与しない
• セキュリティグループはなしを指定

16. 作業用マシンへの接続
１．作業用VMへの接続
• 仮想マシンの概要からRDPファイルをダウンロード
• 作成時に決めたユーザ名とパスワードでログイン
２．作業用VMの環境設定
• 適当なSSHクライアントをインストール
• Teraterm
• Putty
３．確認用VMへのログイン
• SSHクライアントを使って作業用VMから確認用
VMに接続

17. ネットワーク疎通の動作確認
１．作業用VM
• Internet Explorerで外部のWebサイトが見えるか
• 確認用VM2台にSSH接続できるか
２．作業用VM(public subnet)
• Curlコマンドで外部Webサイトが見えるか
３．作業用VM(private subnet)
• 作業用VM(public sunet)にSSH接続できるか
• Curlコマンドで外部Webサイトが見えないか

18. コグニティブサービス
文字認識リクエスト

19. コグニティブサービスの作成
１．Cognitive Serviceの追加
• Computer Vision APIを使用
• リージョンは米国西部(日本国内
リージョンはまだ未対応)
• リソースグループは今回作成したも
のでよい
• データ二次利用の同意取得

20. Visual Studioのプロジェクト
１．Windowsフォームアプリケーションを作成
• .NET Framework4.5
• 下記のような画面を作成
Picturebox Textbox

21. ライブラリの取得
１．NugetからCongnitive Serviceのライブラリを取得
• Microsoft.ProjectOxford.Vision

22. 必要なコードを追加
１．クリップボードの画像を取得
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. 必要なコードを追加
２．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. 必要なコードを追加
３．出力結果をテキストボックスに表示
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. シークレットキー設定
１．作成したVisionAPIのシークレットキーをコピー
２．CongnitiveServiceのコンストラクタにキーを設定
• 2つあるがどちらを使ってもよい

26. 実行して動作確認
１．適当な文章を画像にしてコピーしておきOCR変換

27. ハンズオン後の後始末
今回作成した環境は全て同じ
リソースグループになっているはず
リソースグループを消せば全部消せます

28. 以上でハンズオンは終わりです
お疲れ様でした。
全体を通して質問などがあれば
できる限りお答えします。

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