狠狠撸

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

本セッションの目的
Static Web Apps 試してみようかなって思ってもらう

最初に
Static Web Apps は 2021 年 4 月時点でプレビューになります。
プレビュー期間中は無料で提供されています。

もくじ
? Static Web Apps とは
? Static Web Apps の特徴
? GitHub との連携
? フォールバック対応
? 認証と承認
? Static Web Apps CLI
? デモ
? まとめ

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

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

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

フォールバック対応
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

認証と承認
? 以下のアカウントでログイン可能
? Azure Active Directory
? GitHub
? Facebook
? Google
? Twitter
? Static Web Apps のロール管理画面でユーザーを管理
Azure Static Web Apps の認証と承認 | Microsoft Docs

認証と承認
? ログイン画面を出すためのエンドポイントも提供
? 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>

認証と承認
staticwebapps.config.json で承認の設定が出来る
{
"routes": [
{
"route": "/login",
"rewrite": "/.auth/login/aad"
},
{
"route": "/*",
"allowedRoles": ["authenticated"]
}
],
... 省略 ...
}
/login でアクセスしてきたら Azure AD 用のログイン画面に遷
移する
それ以外のルートには authenticated のロールが必要

クライアント側とサーバー側での認証情報へのアクセス
クライアントから認証情報の取得
? /.auth/me に GET リクエストを投げることで取得可能
サーバーでの認証情報の取得
? リクエストヘッダーの x-ms-client-principal に base64 でエン
コーディングされて上記の JSON 格納が格納
{
"identityProvider": "facebook",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "user@example.com",
"userRoles": [ "anonymous", "authenticated" ]
}
レスポンス

応答のオーバーライド
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

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)

これが無くせる
ローカルでは動いていたのに
デプロイしたら動かない！！

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)

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

参考情報
? Azure Static Web Apps のドキュメント | Microsoft Docs
? Azure Static Web Apps - Learn | Microsoft Docs

狠狠撸

Azure Static Web Apps を試してみた！

More Related Content

Azure Static Web Apps を試してみた！