「[ONLINE] LIFF × Azure Static Web Apps ハンズオン」での事前説明資料 https://linedevelopercommunity.connpass.com/event/182282/

1. 15分でわかる！
Azure Static Web Apps
平林 拓将（ひらりん）
himarin269 / himanago
[ONLINE] LIFF × Azure Static Web Apps ハンズオン
2020/8/25

2. About me
• name： 平林 拓将（ひらりん）
• work： テクニカルトレーナー＆開発
• award/title:
- Microsoft MVP for Azure（2019.11～）
- LINE API Expert（2020.3～）
• like:
- C# / serverless / cross-platform
• social:
- Twitter：@himarin269
- GitHub：himanago
- Blog：http://himanago.hatenablog.com/

3. Azure
Static Web Apps
Microsoft Azure に新登場の
静的Webサイトホスティングサービス
Preview

4. 静的Webサイト？
• 「静的なHTML」によるWebサイト
</>
ブラウザ
あらかじめ用意された
固定のHTMLファイル
動的なサイトの場合は
DBのデータなどをもとに
HTMLを動的に生成
サーバーのAPIなどを叩いて
動的に表示を切り替えたり
DBAPI
JS CSS 画像＋
JSフレームワークによる
SPAなどもこれ

5. Azureで静的サイトホスティングといえば…
•Web Apps•Blob Storage
• HTMLファイルを置くとWebページ
として使える機能がある
• 単純な用途なら十分なものの、
本格的なサイトの実運用には物足りない
• Node.js アプリとしてホスト
• 静的サイト用ではないのでもったいない
（オーバースペック）

6. Azure Static Web Apps 登場 ！！

7. Azure Static Web Apps の特徴
リポジトリ
Static Web App
</>
Push/PR
連携（強制）
自動ビルド
デプロイ
GitHubとの統合による自動ビルド・デプロイ

8. Azure Static Web Apps の特徴
</>
ブラウザ
API クロスオリジン制約を
気にすることなく
アクセス可能
/front
/api
バックエンドAPI（Azure Functions）を
同一リポジトリで開発・デプロイ

9. Azure Static Web Apps の特徴
カスタムドメイン SSL証明書（無料）
認証・認可 グローバル分散
ステージング環境でのPRレビュー
実運用にうれしい機能が盛りだくさん！

10. 制限事項
• API の言語は JavaScript（TypeScript）のみ
• フロントエンドには Ｂｌａｚｏｒ ＷｅｂＡｓｓｅｍｂｌｙ（Ｃ＃）なども
使用可能
• API で使えるトリガーは HTTP のみ
• 入出力バインディングも制限あり
• 統合できるのは GitHub のみ
• Ａｚｕｒｅ ＤｅｖＯｐｓ 対応はあるかな…？

11. くわしくは…
• Microsoft Docs
• https://docs.microsoft.com/ja-jp/azure/static-web-apps/

12. VS Code 拡張機能
• Ａｚｕｒｅ へのリソース作成から設定まで
Static Web App の開発・管理をばっちりカバー

13. 手を動かして学ぼう
• Microsoft Learn
• Azure Static Web Apps で Angular、React、Svelte、
または Vue の JavaScript アプリと API を発行する
https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-
api/
• Gatsby と Azure Static Web Apps で静的 Web アプリを
作成して発行する
https://docs.microsoft.com/ja-jp/learn/modules/create-deploy-static-webapp-gatsby-
app-service/
• 拙作ハンズオン
• Azure サーバーレステクノロジー体験ハンズオン
～イベント駆動でつなげよう～ ※ＬＩＮＥ Ｂｏｔとの連携あり
https://github.com/himanago/azure-serverless-event-driven-bot-hands-on
本日のハンズオンのほかにも…

14. まとめ
• フロントエンドエンジニア待望の Ｓｔａｔｉｃ Ｗｅｂ Ａｐｐｓ
• ＳＰＡ や静的サイトジェネレーターなどと組み合わせ
実運用するのにちょうどよいサービス
• ＧｉｔＨｕｂ との統合が手軽で便利
• ＬＩＦＦ をはじめとした ＬＩＮＥ ＡＰＩ との相性も◎