Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps

Ff7f1f76468f46a1c5c84b9238a4b162?s=47 miyake
July 15, 2020
Technology
2
1.4k

Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps

Serverless Meetup Japan Virtual #2 のセッション資料です。
https://serverless.connpass.com/event/181523/

Ff7f1f76468f46a1c5c84b9238a4b162?s=128

miyake

July 15, 2020
Tweet

More Decks by miyake

See All by miyake
Design and implementation of Cosmos DB Change Feed-centric architecture
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
0
420
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
2
950
2020 年下半期 Cosmos DB の更新まとめ
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
0
390
Front-end web applications with Azure Static Web Apps
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
0
370
Hack Azure! #1 - Azure Serverless でオンライン決済基盤をつくる / hack-azure-1
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
1
460
Azure PaaS/Serverless の最新情報をキャッチアップしよう / Azure PaaS and Serverless Update
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
1
1.2k
Front-end web application development with Azure PaaS & Serverless, 2020 Update!
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
2
660
会計 freee SDK の 開発プロセスとアーキテクチャ /freee biztechfrontier2020 miyake
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
0
570
フロントエンド開発ベストプラクティス on Azure / Best Practices for Front-End Web Development on Azure
Ff7f1f76468f46a1c5c84b9238a4b162?s=48 miyake
1
930

Other Decks in Technology

See All in Technology
Power Automate for desktopで 配信環境を改善してみた話
C97407daeb9ad3a654e6a0ad8701b972?s=48 akiika
0
390
PMMやプロダクト関係者と協働するために役割を整理した話 / 20220810_pdmtipslt
Cdf97a1b1b132c56582773c3ba09a3a6?s=48 rakus_dev
0
130
Life Hacker with LINE Bot and GitHub API
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
5.8k
ログラスを支える技術的投資の仕組み / loglass-technical-investment
F109e64829df9d89239079d68689c938?s=48 urmot
9
2k
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
1
240
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
E7f82c6db76f340b8ccc175d4330405b?s=48 sakon310
4
540
賢く「振り分ける」ための Topology Aware Hints #k8sjp / Kubernetes Meetup Tokyo 52nd
332f89cc697355902a817506b6995f2b?s=48 ytaka23
1
390
20220731 如何跟隨開源技術保持你的職涯發展
D907136acebc72f1df878541b26f271a?s=48 pichuang
0
120
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門（駆け足版）
Cc073a7c6b0a79918ff1da48acb709e7?s=48 kkmory
0
230
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
3
640
Reactコンポーネントにおけるテスト手法の選択肢
2917a3c430817eb71086f8973c06ebba?s=48 sakito
5
2.1k
EKS AnywhereとIAM Anywhereを組み合わせてみた
28dd434482959f605e535fb81f691326?s=48 regmarmcem
0
430

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
131
21k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
87
8.6k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.9k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k

Transcript

  1. Azure Static Web Apps で実現する Serverless CMS Serverless Meetup Japan

    Virtual #2 Kazuyuki Miyake 1

  2. About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP (

    for Microsoft Azure ) Vue.js-jp, typescript-jp 運営スタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/ 2

  3. Azure Static Web Apps Preview 主な特⻑ スタティックサイトに最適化されたホスティング GitHub Actions と統合された

    CI/CD Azure Functions によるサーバーレス API の統合 詳細 公式ドキュメント（⽇本語） de:code 2020 でも関連セッションを公開しています（2D 推奨） 3

  4. デプロイの仕組み GitHub Actions と統合された CI/CD 4

  5. 統合された API リポジトリに BFF (APIs) を共存させることが可能 Azure Functions (Node.js) で実装する

    5

  6. Azure Static Web Apps のユースケース SPA: Single Page Application ブラウザ上で実⾏される（サーバーランタイムが不要の）Web

    アプリ SSG: Static Site Generator (JAM Stack を含む) プレレンダリングされた静的コンテンツベースの Web アプリ その他 BFF（Backends For Frontends）は統合 API 機能を利⽤して実現可能 SSR（Server-Side Rendering）には対応していない 6

  7. SSG - Static Site Generator 動的コンテンツを 事前にレンダリング し静的ファイルを⽣成する Jekyll, Gatsby,

    HUGO, Next.js, Nuxt.js など 7

  8. Git ベースの SSG コンテンツは Git リポジトリで管理 リポジトリ内の markdown 等でコンテンツを作成、更新 データベースや

    CMS サーバー が不要 Git の運⽤に慣れた開発者向け 8

  9. nuxt/content による SSG Nuxt.js の Git-based Headless CMS モジュール ->

    公式サイト content/ ディレクトリ内にファイルを書き込む Markdown 内で Vue コンポーネントが利⽤可能（︕） 9

  10. DEMO nuxt/content + Azure Static Web Apps 10

  11. SSG（Git-based） + Azure Static Web Apps ⾃動⽣成された GitHub Actions の

    YAML を⼀部カスタマイズする app_build_command : フレームワーク指定の Generate コマンドを呼ぶ 11

  12. API-based SSG (JAM Stack) コンテンツは Headless CMS で管理 Headless CMS

    提供の管理画⾯でコンテンツを作成、更新 ビルドプロセスの中で CMS の API からコンテンツを取得する ⼀般ユーザーがコンテンツ更新をするのに向いている 12

  13. Contentful Headless CMS サービス -> 公式サイト コンテンツ管理画⾯は提供され、コンテンツ⾃体は API で取得する フロントエンドは⾃分で作る（⾃由度が⾼まる）

    個⼈ブログなどを WordPress から移⾏する⼈が増えている 13

  14. DEMO Contentful + Nuxt.js + Azure Static Web Apps 14

  15. JAM Stack + Azure Static Web Apps プレビュー当初に存在していたバグが解消されて実現できるように︕ Webhook トリガーで

    GitHub Actions を実⾏するように YAML を構成する 15

  16. Reference Microsoft Docs – Azure Static Web Apps 公式ドキュメント https://docs.microsoft.com/ja-jp/azure/static-web-apps/

    サンプルコード集 - Azure Static Web Apps Gallery Community Projects https://github.com/microsoft/static-web-apps-gallery-code-samples Microsfot Learn Azure Static Web Apps で Angular、React、Svelte、または Vue の JavaScript アプリと API を発⾏する Gatsby と Azure Static Web Apps で静的 Web アプリを作成して発⾏する 16

  17. fin. ご清聴ありがとうございました︕ 17