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.

20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug

564 views

Published on

2018年12月01日 JAZUG きたあず
Azure Storage 静的 Web サイト ホスティング
#きたあず #jazug

  • Be the first to comment

20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug

  1. 1. 2018.12.01 JAZUG札幌支部(きたあず) 第21回勉強会 Azure Storage 静的 Web サイト ホスティング しみみん @KatsuYuzu
  2. 2. 自己紹介 しみみん@KatsuYuzu Community CLR/H 12月15日(土) CLR/H #clrh108 ~力こそパワー~ • PowerShell セッション • Flow + PowerApps セッション • Flow + PowerApps ハンズオン 仕事 業務システム開発 2
  3. 3. アジェンダ Azure Storage 静的 Web サイト ホスティング Web サイトの作り方 Azure Face API を使ったデモ 3
  4. 4. 本日のゴール 対象者 クラウドがまだ雲の上のことだという人 ゴール Azure を使ってみようかな 4
  5. 5. Azure Storage 静的 Web サイト ホスティング (プレビュー機能のためご利用時に変更されている可能性があります)
  6. 6. Azure Storage 静的 Web サイト ホスティングとは Azure Storage 高い可用性とセキュリティ、耐久性、スケーラビリティ、冗長性を備えた クラウド ストレージ 静的 Web サイト ホスティング $web という名前のストレージ コンテナーから直接、静的コンテンツ (HTML、CSS、 JavaScript、画像ファイル) を提供できます 6 https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website https://docs.microsoft.com/ja-jp/azure/storage/
  7. 7. Azure Storage Azure BLOB テキストおよびバイナリ データのための高度にスケーラブルなオブジェクト ストア。 Azure Files クラウドまたはオンプレミスのデプロイ用のマネージド ファイル共有。 Azure キュー アプリケーション コンポーネント間の信頼性の高いメッセージングのための メッセージング ストア。 Azure テーブル 構造化データのスキーマレス ストレージのための NoSQL ストア。 7 静的 Web サイト ホスティングに使うストレージ https://docs.microsoft.com/ja-jp/azure/storage/common/storage-introduction
  8. 8. Azure BLOB 特徴 ファイルの配信、書き込みに最適 概念 8 https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blobs-introduction#blob-service-concepts
  9. 9. 静的 Web サイト ホスティング 特徴 $web コンテナー に Web サイトをホスティング 静的なサイトに最適 ⇔ 動的なサイト: サーバー処理に依存するアプリケーション • 例えば、サーバーサイドレンダリングなど • WebApps を使おう 静的コンテンツ ホスティング パターン • 静的コンテンツの要求をアプリケーションから分離 • 他のリソースよりも安価なストレージを活用 • パフォーマンス、コストの最適化 9
  10. 10. 静的 Web サイト ホスティング 使い方 Deployment 上記で作成される $web コンテナーにファイルを置くだけ • AzCopy • Storage Explorer • Visual Studio Team System • Visual Studio Code 拡張機能 • etc… 10 https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website
  11. 11. 実は…… 静的コンテンツ ホスティング パターンは前から存在していた × 機能 ○ 設計パターン 先駆者が Azure を駆使して自前で実装していたが茨の道 × 仮想ディレクトリ × デフォルトサイト 現在、公式に実装され、プレビュー段階 11
  12. 12. Web サイトの 作り方 Azure Face API を 使ったデモ 記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。 Copyright (C) 2010 - 2018 SQUARE ENIX CO., LTD. All Rights Reserved.
  13. 13. https://bit.ly/2E39J52
  14. 14. デモの構成 今回の構成 シンプルな構成 • アクセスキーを html に書いてある(ダメ。ゼッタイ。) • 本来は Azure Functions などを経由してください • 認証やアクセスキーのセキュアなアクセスができます • 静的な Web サイト ホスティング、認証、サーバーレスアーキテクチャすべて詰まったチュートリアル • https://docs.microsoft.com/ja-jp/azure/functions/tutorial-static-website-serverless-api-with-database 14 Azure Blob Storage Azure Cognitive Services(Face API)
  15. 15. Azure Face API とは Azure Face API Azure Face API は、画像に含まれている人の顔を検出、認識、分析するた めのアルゴリズムを備えたコグニティブ サービスです。 特徴 様々な API がある • 顔検出, 顔検証, 似た顔の検索, 顔のグループ化, 人物の特定 15 https://docs.microsoft.com/ja-jp/azure/cognitive-services/face/overview
  16. 16. Web サイトの作り方 ストレージアカウントの作成 静的な Web サイトの有効化 Azure DevOps 連携 Web サイトを作成 Azure Face API の呼び出し コミット & プッシュ 16
  17. 17. ストレージアカウントの作成 17
  18. 18. ストレージアカウントの作成 18 アカウントの種類は StorageV2 を必ず選択する。 他のアカウントの種類では静的 Web サイト ホスティ ングができない。
  19. 19. 静的な Web サイトの有効化 19
  20. 20. Azure DevOps 連携 20
  21. 21. Azure DevOps 連携 21
  22. 22. Azure DevOps 連携 22 Azure File Copy のタスクを追加したあと Version を 2 に変更してください。 Version 1 では $web パスへのコピー時にアルファ ベット以外が含まれていてエラーになります。
  23. 23. Azure DevOps 連携 23
  24. 24. Web サイトを作成 24 Bootstrap の Starter template からいじりはじめた https://getbootstrap.com/docs/4.1/getting- started/introduction/#starter-template ↑をメモ帳などのエディターに張り付けて html で保 存 Bootstrap のサンプルからデザインを拝借 https://getbootstrap.com/docs/4.1/examples/ 好きなサンプルを開く [右クリック] > [ページのソースを表示]
  25. 25. Azure Face API の呼び出し
  26. 26. Azure Face API の呼び出し https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236
  27. 27. コミット & プッシュ 27
  28. 28. CI 28
  29. 29. まとめ 29
  30. 30. まとめ 静的 Web サイト ホスティング とは ストレージを活用してパフォーマンス、コストを最適化する設計パターンを 実装した機能 サーバーレスアーキテクチャと相性が良い Web サイトの作り方 ~Azure Face API を使ったデモ~ ファイルを配置するだけ 連携して DevOps を実現可能 Face API はとっても簡単 チュートリアルでホムペデビュー まずは使ってみよう コミュニティのメンバーと交流して色々聞いてみよう 30
  31. 31. 参考 Azure Storage の概要 - Azure のクラウド ストレージ | Microsoft Docs https://docs.microsoft.com/ja-jp/azure/storage/common/storage-introduction Azure Storage での静的 Web サイト ホスティング | Microsoft Docs https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-static-website 静的コンテンツ ホスティング | Microsoft Docs https://docs.microsoft.com/ja-jp/azure/architecture/patterns/static-content-hosting Azure でサーバーレス Web アプリを作成する | Microsoft Docs https://docs.microsoft.com/ja-jp/azure/functions/tutorial-static-website-serverless-api-with-database Face API とは - Azure Cognitive Services | Microsoft Docs https://docs.microsoft.com/ja-jp/azure/cognitive-services/face/overview 31

×