15分でわかる！Azure Static Web Apps
2 likes976 views
「[ONLINE] LIFF × Azure Static Web Apps ハンズオン」での事前説明資料 https://linedevelopercommunity.connpass.com/event/182282/
![15分でわかる！
Azure Static Web Apps
平林 拓将（ひらりん）
himarin269 / himanago
[ONLINE] LIFF × Azure Static Web Apps ハンズオン
2020/8/25](https://image.slidesharecdn.com/azurestaticwebapps-200825105751/85/15-Azure-Static-Web-Apps-1-320.jpg)
15分でわかる！Azure Static Web Apps
- 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. まとめ • フロントエンドエンジニア待望の Ｓｔａｔｉｃ Ｗｅｂ Ａｐｐｓ • ＳＰＡ や静的サイトジェネレーターなどと組み合わせ 実運用するのにちょうどよいサービス • ＧｉｔＨｕｂ との統合が手軽で便利 • ＬＩＦＦ をはじめとした ＬＩＮＥ ＡＰＩ との相性も◎