20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug
•
0 likes•1,597 views
2018年12月01日 JAZUG きたあず Azure Storage 静的 Web サイト ホスティング #きたあず #jazug
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug
Similar to 20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug (20)
More from Katsuya Shimizu
20181201 Azure Storage 静的 Web サイト ホスティング #きたあず #jazug
- 1. 2018.12.01 JAZUG札幌支部（きたあず） 第21回勉強会 Azure Storage 静的 Web サイト ホスティング しみみん @KatsuYuzu
- 2. 自己紹介 しみみん@KatsuYuzu Community CLR/H 12月15日（土） CLR/H #clrh108 ～力こそパワー～ • PowerShell セッション • Flow + PowerApps セッション • Flow + PowerApps ハンズオン 仕事 業務システム開発 2
- 3. アジェンダ Azure Storage 静的 Web サイト ホスティング Web サイトの作り方 Azure Face API を使ったデモ 3
- 5. Azure Storage 静的 Web サイト ホスティング （プレビュー機能のためご利用時に変更されている可能性があります）
- 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. Azure Storage Azure BLOB テキストおよびバイナリ データのための高度にスケーラブルなオブジェクト ストア。 Azure Files クラウドまたはオンプレミスのデプロイ用のマネージド ファイル共有。 Azure キュー アプリケーション コンポーネント間の信頼性の高いメッセージングのための メッセージング ストア。 Azure テーブル 構造化データのスキーマレス ストレージのための NoSQL ストア。 7 静的 Web サイト ホスティングに使うストレージ https://docs.microsoft.com/ja-jp/azure/storage/common/storage-introduction
- 9. 静的 Web サイト ホスティング 特徴 $web コンテナー に Web サイトをホスティング 静的なサイトに最適 ⇔ 動的なサイト: サーバー処理に依存するアプリケーション • 例えば、サーバーサイドレンダリングなど • WebApps を使おう 静的コンテンツ ホスティング パターン • 静的コンテンツの要求をアプリケーションから分離 • 他のリソースよりも安価なストレージを活用 • パフォーマンス、コストの最適化 9
- 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. 実は…… 静的コンテンツ ホスティング パターンは前から存在していた × 機能 ○ 設計パターン 先駆者が Azure を駆使して自前で実装していたが茨の道 × 仮想ディレクトリ × デフォルトサイト 現在、公式に実装され、プレビュー段階 11
- 12. Web サイトの 作り方 Azure Face API を 使ったデモ 記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。 Copyright (C) 2010 - 2018 SQUARE ENIX CO., LTD. All Rights Reserved.
- 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. Azure Face API とは Azure Face API Azure Face API は、画像に含まれている人の顔を検出、認識、分析するた めのアルゴリズムを備えたコグニティブ サービスです。 特徴 様々な API がある • 顔検出, 顔検証, 似た顔の検索, 顔のグループ化, 人物の特定 15 https://docs.microsoft.com/ja-jp/azure/cognitive-services/face/overview
- 16. Web サイトの作り方 ストレージアカウントの作成 静的な Web サイトの有効化 Azure DevOps 連携 Web サイトを作成 Azure Face API の呼び出し コミット & プッシュ 16
- 17. ストレージアカウントの作成 17
- 18. ストレージアカウントの作成 18 アカウントの種類は StorageV2 を必ず選択する。 他のアカウントの種類では静的 Web サイト ホスティ ングができない。
- 22. Azure DevOps 連携 22 Azure File Copy のタスクを追加したあと Version を 2 に変更してください。 Version 1 では $web パスへのコピー時にアルファ ベット以外が含まれていてエラーになります。
- 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. Azure Face API の呼び出し
- 26. Azure Face API の呼び出し https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236
- 27. コミット & プッシュ 27
- 28. CI 28
- 29. まとめ 29
- 30. まとめ 静的 Web サイト ホスティング とは ストレージを活用してパフォーマンス、コストを最適化する設計パターンを 実装した機能 サーバーレスアーキテクチャと相性が良い Web サイトの作り方 ～Azure Face API を使ったデモ～ ファイルを配置するだけ 連携して DevOps を実現可能 Face API はとっても簡単 チュートリアルでホムペデビュー まずは使ってみよう コミュニティのメンバーと交流して色々聞いてみよう 30
- 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