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.
C#でAzure
PaaS開発事始め
オンプレミス開発からクラウド開発へのシフト
~実践編~
~手順編~
システムインテグレーション事業部
草場 友光
新しいプロジェクトの作成
• Visual Studio 2019を起動
• 新しいプロジェクトの作成を
押下します。
プロジェクトテンプレートの選択
• 「ASP.NET Webアプリケー
ション(.NET Framework)」
を選択して「次へ」ボタンを
押下します。
• このとき「C#」、「Web」、
「Windows」でフィルタリン
グをかけると探しや...
新しいプロジェクトの構成
• 「プロジェクト名」、「場
所」、「ソリューション名」
に指定はありません。デフォ
ルトのままでよいです。
• 「フレームワーク」は「.NET
Framework 4.6」を選択しま
す。
• 「次へ」ボタンを押下し...
新しいASP.NET Webアプリケーションを
作成する
• MVCを選択します。
• 「作成」ボタンを押下します。
プロジェクトが作成されました
• 無事にプロジェクトが作成さ
れました。
• この状態で動作するかどうか
試してみましょう!
• 「Ctrl」+「F5」を押下して
ください
初回だけ注意
• 初回実行の時にVisual Studio
が自己署名証明書をインス
トールします
• 「はい」を押下してください。
実行できましたか?
• 実行できた場合、左の画面に
なっています。
オリジナル要素を入れておきましょう
• これからAzureにデプロイし
ますが自身のプロジェクトと
わかるようにオリジナル要素
を入れましょう
• /Views/Home/Index.cshtml
を任意のHTMLに編集してく
ださい
Azureへの発行
• 「ビルド」→「○○の発行」
Azureへの発行
• 左側は「App Service」を選
択
• 新規作成にチェックを入れる
• 「プロファイルの作成」ボタ
ンを押下
Azureへの発行
• 右のような画面が出てきた場
合は「サインイン」を選択
• あらかじめ作成しておいた
Azureアカウントの情報を用
意します
Azureへの発行
• 有効なAzureサブスクリプ
ションがあるアカウントを選
択すると左のようになります。
• これから一つずつ項目を確認
していきます。
Azureへの発行
• 名前:識別できる名前なら何
でもOKです
• サブスクリプション:支払い
に使用するサブスクリプショ
ンを指定してください
• リソースグループ:複数の
サービスを束ねておくための
ものです。任意の名前でOK
です。
•...
Azureへの発行
• ホスティングプラン:「新
規」アンカーからプランを新
規作成してください
• ホスティングプラン名:任意
• 場所:Japan East or Japan
West
• サイズ:Free
Azureへの発行
• ここまでできたら、「作成」
ボタンを押下します
Azureへの発行
• 発行できる準備が整ったので
「発行」ボタンを押下します。
Azureへの発行
• URIに注目してください。
• 確かに
「○○.azurewebsites.net」
のアドレスで作成したものが
表示されています
• 念のためにスマートフォンな
どでもこのURIを表示してみ
てください。
時刻の取り扱い
• /Views/Home/Index.cshtml
• どこかに
「@DateTime.Now」を入れ
て日時を表示します
• ローカル実行してみます
• JSTの日時で表示されます
• YYYY/MM/DD HH/MI/SS...
時刻の取り扱い
• Azureに発行してみます
• UTCで表示されています
• 日付・時刻フォーマットも見
慣れぬフォーマットです
時刻の取り扱い
• /Views/Home/Index.cshtml
• どこかに
「@DateTime.UtcNow」を入
れて日時を表示します
• ローカル実行してみます
• UTCの日時で表示されます
• YYYY/MM/DD HH/MI...
時刻の取り扱い
• Azureに発行してみます
• DateTime.Nowも
DateTime.UtcNowもUTCで表
示されています
• 日付・時刻フォーマットも見慣
れぬフォーマットです
• これらを踏まえローカルでも
Azureでも表...
時刻の取り扱い
地域言語設定の取り扱い
• Controllers/HomeController.
csに下のように追記
地域言語設定の取り扱い
• View/Home/Index.cshtmlに
下のように追記
地域言語設定の取り扱い
• ローカルで実行
地域言語設定の取り扱い
• Azureで実行
https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.visualbasic.strings.strconv?view=netframework...
AppSettingsについて
• appSettingに任意のキーを入
れておきましょう
AppSettingsについて
• ローカル実行
• Azure実行
AppSettingsについて
• Azure Portal→AppService
AppSettingsについて
• 構成 (アプリケーション設定タブ)
AppSettingsについて
• +新しいアプリケーション設定をクリック
AppSettingsについて
• AppSettingに入れたKeyとValueを入力
• Valueは入力したものからは変更してください
AppSettingについて
• 保存を押下します
AppSettingについて
• Azure Portalに設定したものに変更されています
ストレージエミュレータ
• ローカルでストレージアカウントの動作をシミュレートできま
す。
• ストレージの使い方を学習する目的なのでこちらを使います
• WindowsFormsのプロジェクトで進めていきます
ストレージエミュレータ
• スタート→Microsoft
Azure→Microsoft Azure
Storage Emulatorを起動
ストレージエミュレータ
• はじめて起動するとLocalDB
にデータベースが作成されま
す
• 各ストレージサービス用とし
てHTTPポートが予約されま
す
ストレージエミュレータ
• ASP.NET Webアプリケー
ション(.NET Framework)を
選択します
ストレージエミュレータ
• Web APIを選択します
ストレージエミュレータ
• WindowsAzure.Storageを
Nugetしてプロジェクトに入
れます
ストレージエミュレータ
• App.configにストレージエミュレータへの接続設定文字列を記
述しておきます
Azureのストレージへの接続文字列はAzure Portalから取得できます
ストレージアカウントの概要の[設定]セクションの[ア...
ストレージエミュレータ
• ModelsフォルダにMessageクラスを作成します
ストレージエミュレータ
• Modelsフォルダにpostdataクラスを作成します
ストレージエミュレータ
• ValuesController.cs
ストレージエミュレータ
• ValuesController.csつづき
ストレージエミュレータ
• ValuesController.csつづき
ストレージエミュレータ
• Index.cshtml
ストレージエミュレータ
• 動作させてみよう 入力して送信ボタン
押下でデータ追加
ストレージエミュレータ
URI直接入力で
1番目のデータを削除
(0オリジン)
ストレージエミュレータ
• Cloud Explorerからも同様のデータにアクセスできるか見てみ
よう
本日作成したサンプルについて
https://tomokusaba.aa0.netvolante.jp/sakurug201912/Ex01.zip
→Webのサンプル(azureへの発行情報は削除)
https://tomokusaba.aa...
さらなる学習のために
• MicrosoftはさまざまなサンプルコードをGitHubなどで提供し
ています
• ソースコードサンプルのポータルサイトもあります
• https://azure.microsoft.com/ja-jp/resour...
おしまい
時間があったら・・・
• Azure Functionsを動かしてみましょう
Azure Functions
• Azure Functionsのテンプレートを使用
Azure Functions
• 動作がわかりやすいHttp triggerで試します
• Authorization Levelは今回はAnonymous
Azure Functions
• そのまま、「Ctrl」+「F5」
で起動してみます
• コンソールが起動して待ち受
けURIが表示されます
• 左の場合は
「http://localhost:7071/api/
Function1?name...
Azure Functions
• 表示されましたか?
Azure Functions
• コンソール側にはアクセスさ
れたことを示すログが出てい
ます
Azure Functions
URIを決定(/API/Function1)
トリガーの定義
GETメソッドのときの処理
POSTメソッドのときの処理
ステータスコード:200
ステータスコード:400
本当におしまい
Upcoming SlideShare
Loading in …5
×

of

【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 1 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 2 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 3 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 4 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 5 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 6 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 7 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 8 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 9 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 10 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 11 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 12 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 13 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 14 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 15 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 16 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 17 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 18 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 19 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 20 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 21 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 22 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 23 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 24 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 25 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 26 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 27 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 28 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 29 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 30 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 31 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 32 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 33 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 34 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 35 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 36 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 37 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 38 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 39 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 40 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 41 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 42 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 43 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 44 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 45 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 46 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 47 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 48 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 49 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 50 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 51 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 52 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 53 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 54 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 55 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 56 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 57 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 58 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 59 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 60 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 61 【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】 Slide 62
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】

Download to read offline

This is the procedure of the sakurug seminar at 2019/12/06.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

【ハンズオン手順書】【Web開発者向け】クラウドセミナー@渋谷 #2【Azure入門】

  1. 1. C#でAzure PaaS開発事始め オンプレミス開発からクラウド開発へのシフト ~実践編~ ~手順編~ システムインテグレーション事業部 草場 友光
  2. 2. 新しいプロジェクトの作成 • Visual Studio 2019を起動 • 新しいプロジェクトの作成を 押下します。
  3. 3. プロジェクトテンプレートの選択 • 「ASP.NET Webアプリケー ション(.NET Framework)」 を選択して「次へ」ボタンを 押下します。 • このとき「C#」、「Web」、 「Windows」でフィルタリン グをかけると探しやすいです。
  4. 4. 新しいプロジェクトの構成 • 「プロジェクト名」、「場 所」、「ソリューション名」 に指定はありません。デフォ ルトのままでよいです。 • 「フレームワーク」は「.NET Framework 4.6」を選択しま す。 • 「次へ」ボタンを押下します。
  5. 5. 新しいASP.NET Webアプリケーションを 作成する • MVCを選択します。 • 「作成」ボタンを押下します。
  6. 6. プロジェクトが作成されました • 無事にプロジェクトが作成さ れました。 • この状態で動作するかどうか 試してみましょう! • 「Ctrl」+「F5」を押下して ください
  7. 7. 初回だけ注意 • 初回実行の時にVisual Studio が自己署名証明書をインス トールします • 「はい」を押下してください。
  8. 8. 実行できましたか? • 実行できた場合、左の画面に なっています。
  9. 9. オリジナル要素を入れておきましょう • これからAzureにデプロイし ますが自身のプロジェクトと わかるようにオリジナル要素 を入れましょう • /Views/Home/Index.cshtml を任意のHTMLに編集してく ださい
  10. 10. Azureへの発行 • 「ビルド」→「○○の発行」
  11. 11. Azureへの発行 • 左側は「App Service」を選 択 • 新規作成にチェックを入れる • 「プロファイルの作成」ボタ ンを押下
  12. 12. Azureへの発行 • 右のような画面が出てきた場 合は「サインイン」を選択 • あらかじめ作成しておいた Azureアカウントの情報を用 意します
  13. 13. Azureへの発行 • 有効なAzureサブスクリプ ションがあるアカウントを選 択すると左のようになります。 • これから一つずつ項目を確認 していきます。
  14. 14. Azureへの発行 • 名前:識別できる名前なら何 でもOKです • サブスクリプション:支払い に使用するサブスクリプショ ンを指定してください • リソースグループ:複数の サービスを束ねておくための ものです。任意の名前でOK です。 • Application Insights:なし
  15. 15. Azureへの発行 • ホスティングプラン:「新 規」アンカーからプランを新 規作成してください • ホスティングプラン名:任意 • 場所:Japan East or Japan West • サイズ:Free
  16. 16. Azureへの発行 • ここまでできたら、「作成」 ボタンを押下します
  17. 17. Azureへの発行 • 発行できる準備が整ったので 「発行」ボタンを押下します。
  18. 18. Azureへの発行 • URIに注目してください。 • 確かに 「○○.azurewebsites.net」 のアドレスで作成したものが 表示されています • 念のためにスマートフォンな どでもこのURIを表示してみ てください。
  19. 19. 時刻の取り扱い • /Views/Home/Index.cshtml • どこかに 「@DateTime.Now」を入れ て日時を表示します • ローカル実行してみます • JSTの日時で表示されます • YYYY/MM/DD HH/MI/SSの 形式です
  20. 20. 時刻の取り扱い • Azureに発行してみます • UTCで表示されています • 日付・時刻フォーマットも見 慣れぬフォーマットです
  21. 21. 時刻の取り扱い • /Views/Home/Index.cshtml • どこかに 「@DateTime.UtcNow」を入 れて日時を表示します • ローカル実行してみます • UTCの日時で表示されます • YYYY/MM/DD HH/MI/SSの 形式です
  22. 22. 時刻の取り扱い • Azureに発行してみます • DateTime.Nowも DateTime.UtcNowもUTCで表 示されています • 日付・時刻フォーマットも見慣 れぬフォーマットです • これらを踏まえローカルでも Azureでも表示形式を整形しJST で表示できるようにしよう
  23. 23. 時刻の取り扱い
  24. 24. 地域言語設定の取り扱い • Controllers/HomeController. csに下のように追記
  25. 25. 地域言語設定の取り扱い • View/Home/Index.cshtmlに 下のように追記
  26. 26. 地域言語設定の取り扱い • ローカルで実行
  27. 27. 地域言語設定の取り扱い • Azureで実行 https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.visualbasic.strings.strconv?view=netframework-4.8
  28. 28. AppSettingsについて • appSettingに任意のキーを入 れておきましょう
  29. 29. AppSettingsについて • ローカル実行 • Azure実行
  30. 30. AppSettingsについて • Azure Portal→AppService
  31. 31. AppSettingsについて • 構成 (アプリケーション設定タブ)
  32. 32. AppSettingsについて • +新しいアプリケーション設定をクリック
  33. 33. AppSettingsについて • AppSettingに入れたKeyとValueを入力 • Valueは入力したものからは変更してください
  34. 34. AppSettingについて • 保存を押下します
  35. 35. AppSettingについて • Azure Portalに設定したものに変更されています
  36. 36. ストレージエミュレータ • ローカルでストレージアカウントの動作をシミュレートできま す。 • ストレージの使い方を学習する目的なのでこちらを使います • WindowsFormsのプロジェクトで進めていきます
  37. 37. ストレージエミュレータ • スタート→Microsoft Azure→Microsoft Azure Storage Emulatorを起動
  38. 38. ストレージエミュレータ • はじめて起動するとLocalDB にデータベースが作成されま す • 各ストレージサービス用とし てHTTPポートが予約されま す
  39. 39. ストレージエミュレータ • ASP.NET Webアプリケー ション(.NET Framework)を 選択します
  40. 40. ストレージエミュレータ • Web APIを選択します
  41. 41. ストレージエミュレータ • WindowsAzure.Storageを Nugetしてプロジェクトに入 れます
  42. 42. ストレージエミュレータ • App.configにストレージエミュレータへの接続設定文字列を記 述しておきます Azureのストレージへの接続文字列はAzure Portalから取得できます ストレージアカウントの概要の[設定]セクションの[アクセスキー] ここから接続文字列を取得できる
  43. 43. ストレージエミュレータ • ModelsフォルダにMessageクラスを作成します
  44. 44. ストレージエミュレータ • Modelsフォルダにpostdataクラスを作成します
  45. 45. ストレージエミュレータ • ValuesController.cs
  46. 46. ストレージエミュレータ • ValuesController.csつづき
  47. 47. ストレージエミュレータ • ValuesController.csつづき
  48. 48. ストレージエミュレータ • Index.cshtml
  49. 49. ストレージエミュレータ • 動作させてみよう 入力して送信ボタン 押下でデータ追加
  50. 50. ストレージエミュレータ URI直接入力で 1番目のデータを削除 (0オリジン)
  51. 51. ストレージエミュレータ • Cloud Explorerからも同様のデータにアクセスできるか見てみ よう
  52. 52. 本日作成したサンプルについて https://tomokusaba.aa0.netvolante.jp/sakurug201912/Ex01.zip →Webのサンプル(azureへの発行情報は削除) https://tomokusaba.aa0.netvolante.jp/sakurug201912/Ex03.zip →ストレージエミュレタのサンプル
  53. 53. さらなる学習のために • MicrosoftはさまざまなサンプルコードをGitHubなどで提供し ています • ソースコードサンプルのポータルサイトもあります • https://azure.microsoft.com/ja-jp/resources/samples/?sort=0
  54. 54. おしまい
  55. 55. 時間があったら・・・ • Azure Functionsを動かしてみましょう
  56. 56. Azure Functions • Azure Functionsのテンプレートを使用
  57. 57. Azure Functions • 動作がわかりやすいHttp triggerで試します • Authorization Levelは今回はAnonymous
  58. 58. Azure Functions • そのまま、「Ctrl」+「F5」 で起動してみます • コンソールが起動して待ち受 けURIが表示されます • 左の場合は 「http://localhost:7071/api/ Function1?name=hoge」に アクセスしてみましょう
  59. 59. Azure Functions • 表示されましたか?
  60. 60. Azure Functions • コンソール側にはアクセスさ れたことを示すログが出てい ます
  61. 61. Azure Functions URIを決定(/API/Function1) トリガーの定義 GETメソッドのときの処理 POSTメソッドのときの処理 ステータスコード:200 ステータスコード:400
  62. 62. 本当におしまい

This is the procedure of the sakurug seminar at 2019/12/06.

Views

Total views

80

On Slideshare

0

From embeds

0

Number of embeds

10

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×