Azure Static Web Apps を試してみた！

ハッシュタグ: #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 を試してみた！

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Azure Static Web Apps を試してみた！

Ähnlich wie Azure Static Web Apps を試してみた！ (20)

Mehr von 一希大田

Mehr von 一希大田 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)