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

1. ハッシュタグ: #dotnetlab

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. ハッシュタグ: #dotnetlab
本セッションの目的
Static Web Apps 試してみようかなって思ってもらう

4. ハッシュタグ: #dotnetlab
最初に
Static Web Apps は 2021 年 4 月時点でプレビューになります。
プレビュー期間中は無料で提供されています。

5. ハッシュタグ: #dotnetlab
もくじ
• Static Web Apps とは
• Static Web Apps の特徴
• GitHub との連携
• フォールバック対応
• 認証と承認
• Static Web Apps CLI
• デモ
• まとめ

6. ハッシュタグ: #dotnetlab

7. ハッシュタグ: #dotnetlab
Static Web Apps とは
• 静的サイトをホスティングするためのサービス
• ホスティング可能な言語・フレームワーク
• プレーンな HTML/JavaScript で生成されたサイト
• Angular
• React
• Svelte
• Vue
• Gatsby
• Hugo
• VuePress
• Jekyll
• Blazor
• etc...
Static Web Apps
Deploy

8. ハッシュタグ: #dotnetlab
Static Web Apps の特徴
静的 Web サイトに加えて Azure Functions もデプロイ可能
• API のデプロイ場所も兼ねる
• 静的 Web サイトからの呼び出し時に CORS の構成が不要
• /api 以下で HttpTrigger の関数を公開可能
Static Web Apps

9. ハッシュタグ: #dotnetlab
GitHub との連携
Azure Static Web Apps を作ると…
• GitHub Actions のワークフローが生成されます
• 指定したブランチに更新があったときにアプリケーションをデプロイ
• Pull Request の内容を確認するための環境を作成してデプロイ
参考：チュートリアル: Azure DevOps を使用して Azure Static Web Apps を発行する

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. ハッシュタグ: #dotnetlab
認証と承認
• 以下のアカウントでログイン可能
• Azure Active Directory
• GitHub
• Facebook
• Google
• Twitter
• Static Web Apps のロール管理画面でユーザーを管理
Azure Static Web Apps の認証と承認 | Microsoft Docs

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. ハッシュタグ: #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. ハッシュタグ: #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. ハッシュタグ: #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. ハッシュタグ: #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. ハッシュタグ: #dotnetlab
これが無くせる
ローカルでは動いていたのに
デプロイしたら動かない！！

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. ハッシュタグ: #dotnetlab

20. ハッシュタグ: #dotnetlab
まとめ
 Azure Static Web Apps
 最高の静的 Web サイトのホスティング環境になりそう
 API もホスト可能
 CI/CD 連携あり
 認証・承認もあり
 ローカルで確認できる（個人的に好きなポイント）

21. ハッシュタグ: #dotnetlab
参考情報
• Azure Static Web Apps のドキュメント | Microsoft Docs
• Azure Static Web Apps - Learn | Microsoft Docs

22. ハッシュタグ: #dotnetlab
© Copyright Microsoft Corporation. All rights reserved.