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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Azure Static Web Apps を試してみた!

Download to read offline

.NETラボ 勉強会 2021年4月で登壇したときのスライドです。

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Azure Static Web Apps を試してみた!

  1. 1. ハッシュタグ: #dotnetlab
  2. 2. ハッシュタグ: #dotnetlab 自己紹介 大田 一希 (Kazuki Ota) 日本マイクロソフト シニア カスタマー エンジニア  SNS: Twitter @okazuki  Blog、Tech articles:  かずきのBlog@hatena: https://blog.okazuki.jp  Qiita: https://qiita.com/okazuki  Zenn: https://zenn.dev/okazuki  GitHub: https://github.com/runceel  ReactiveProperty、Livet のメンテナー C#, WPF, UWP, Xamarin, Microsoft Azure (Azure Functions, Web App), TypeScript  好きなもの  食べ物は肉系、上に書いた技術、ゲーム (スマブラ 1860h、モンハン ワールド 1400h、モンハン RISE 120h、etc…)  苦手意識があるもの  静的型付け言語じゃないもの (JavaScript、Python、Ruby、etc…)
  3. 3. ハッシュタグ: #dotnetlab 本セッションの目的 Static Web Apps 試してみようかなって思ってもらう
  4. 4. ハッシュタグ: #dotnetlab 最初に Static Web Apps は 2021 年 4 月時点でプレビューになります。 プレビュー期間中は無料で提供されています。
  5. 5. ハッシュタグ: #dotnetlab もくじ • Static Web Apps とは • Static Web Apps の特徴 • GitHub との連携 • フォールバック対応 • 認証と承認 • Static Web Apps CLI • デモ • まとめ
  6. 6. ハッシュタグ: #dotnetlab
  7. 7. ハッシュタグ: #dotnetlab Static Web Apps とは • 静的サイトをホスティングするためのサービス • ホスティング可能な言語・フレームワーク • プレーンな HTML/JavaScript で生成されたサイト • Angular • React • Svelte • Vue • Gatsby • Hugo • VuePress • Jekyll • Blazor • etc... Static Web Apps Deploy
  8. 8. ハッシュタグ: #dotnetlab Static Web Apps の特徴 静的 Web サイトに加えて Azure Functions もデプロイ可能 • API のデプロイ場所も兼ねる • 静的 Web サイトからの呼び出し時に CORS の構成が不要 • /api 以下で HttpTrigger の関数を公開可能 Static Web Apps
  9. 9. ハッシュタグ: #dotnetlab GitHub との連携 Azure Static Web Apps を作ると… • GitHub Actions のワークフローが生成されます • 指定したブランチに更新があったときにアプリケーションをデプロイ • Pull Request の内容を確認するための環境を作成してデプロイ 参考:チュートリアル: Azure DevOps を使用して Azure Static Web Apps を発行する
  10. 10. ハッシュタグ: #dotnetlab フォールバック対応 staticwebapps.config.json で index.html へのフォールバックの設定 が可能 { ... 省略 ... "navigationFallback": { "rewrite": "/index.html", "exclude": [ "/images/*.{png,jpg,gif}", "/css/*" ] }, ... 省略 ... } SPA でクライアント サイドのルーティングの URL に直接ア クセスしてきた時に index.html にフォールバックする設定 Azure Static Web Apps を構成する | Microsoft Docs
  11. 11. ハッシュタグ: #dotnetlab 認証と承認 • 以下のアカウントでログイン可能 • Azure Active Directory • GitHub • Facebook • Google • Twitter • Static Web Apps のロール管理画面でユーザーを管理 Azure Static Web Apps の認証と承認 | Microsoft Docs
  12. 12. ハッシュタグ: #dotnetlab 認証と承認 • ログイン画面を出すためのエンドポイントも提供 • Azure Active Directory : /.auth/login/aad • GitHub : /.auth/login/github • Facebook : /.auth/login/facebook • Google : /.auth/login/google • Twitter : /.auth/login/twitter • ログイン用のリンクが簡単に作成可能 <a href=“/.auth/login/twitter”>Twitter でログイン</a> Azure Static Web Apps の認証と承認 | Microsoft Docs
  13. 13. ハッシュタグ: #dotnetlab 認証と承認 staticwebapps.config.json で承認の設定が出来る { "routes": [ { "route": "/login", "rewrite": "/.auth/login/aad" }, { "route": "/*", "allowedRoles": ["authenticated"] } ], ... 省略 ... } /login でアクセスしてきたら Azure AD 用のログイン画面に遷 移する Azure Static Web Apps の認証と承認 | Microsoft Docs それ以外のルートには authenticated のロールが必要
  14. 14. ハッシュタグ: #dotnetlab クライアント側とサーバー側での認証情報へのアクセス クライアントから認証情報の取得 • /.auth/me に GET リクエストを投げることで取得可能 サーバーでの認証情報の取得 • リクエスト ヘッダーの x-ms-client-principal に base64 でエン コーディングされて上記の JSON 格納が格納 { "identityProvider": "facebook", "userId": "d75b260a64504067bfc5b2905e3b8182", "userDetails": "user@example.com", "userRoles": [ "anonymous", "authenticated" ] } レスポンス Azure Static Web Apps の認証と承認 | Microsoft Docs
  15. 15. ハッシュタグ: #dotnetlab 応答のオーバーライド staticwebapps.config.json で 400、401、403、404 が発生したとき のレスポンスのカスタマイズが可能 { ... 省略 ... "responseOverrides": { "401": { "statusCode": 302, "redirect": "/login" }, "404": { "rewrite": "/custom-404.html", "statusCode": 200 } } ... 省略 ... } 401 が発生したときに /login にリダイレクト 404 が発生したときに custom-404.html の内容を返す Azure Static Web Apps を構成する | Microsoft Docs
  16. 16. ハッシュタグ: #dotnetlab Static Web Apps CLI ローカルでの Static Web Apps のエミュレートが可能 • staticwebapps.config.json の設定が反映された状態で動作 • テスト用認証情報の生成 • SWA に統合された Azure Functions もエミュレートできる • SPA フレームワークや Azure Functions の開発用サーバーとの連携も可能 Azure/static-web-apps-cli: Azure Static Web Apps CLI ✨ (github.com)
  17. 17. ハッシュタグ: #dotnetlab これが無くせる ローカルでは動いていたのに デプロイしたら動かない!!
  18. 18. ハッシュタグ: #dotnetlab Static Web Apps CLI の使い方 • インストール npm install -g @azure/static-web-apps-cli npm install -g azure-functions-core-tools@3 --unsafe-perm true • 実行方法 (代表的なものだけ抜粋) • 現在のフォルダーで実行 swa start • 所定のフォルダーで実行 swa start ./dist • API も一緒に実行 swa start ./dist --api ./my-api-folder • 開発サーバーと連携して実行 swa start http://localhost:XXXX --api=http://localhost:YYYY Azure/static-web-apps-cli: Azure Static Web Apps CLI ✨ (github.com)
  19. 19. ハッシュタグ: #dotnetlab
  20. 20. ハッシュタグ: #dotnetlab まとめ  Azure Static Web Apps  最高の静的 Web サイトのホスティング環境になりそう  API もホスト可能  CI/CD 連携あり  認証・承認もあり  ローカルで確認できる(個人的に好きなポイント)
  21. 21. ハッシュタグ: #dotnetlab 参考情報 • Azure Static Web Apps のドキュメント | Microsoft Docs • Azure Static Web Apps - Learn | Microsoft Docs
  22. 22. ハッシュタグ: #dotnetlab © Copyright Microsoft Corporation. All rights reserved.

.NETラボ 勉強会 2021年4月で登壇したときのスライドです。

Views

Total views

452

On Slideshare

0

From embeds

0

Number of embeds

143

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×