Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クラウドにはAzure App Serviceがある / dist29-azure-appse...
Search
miyake
October 25, 2019
Technology
2
970
クラウドにはAzure App Serviceがある / dist29-azure-appservice
[DIST.29](
https://dist.connpass.com/event/147744/
) で発表した「クラウドにはAzure App Serviceがある」のスライドです。
miyake
October 25, 2019
Tweet
Share
More Decks by miyake
See All by miyake
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
250
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
160
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.6k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
820
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
810
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
miyake
0
1.4k
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
320
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
940
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.4k
Other Decks in Technology
See All in Technology
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
偏光画像処理ライブラリを作った話
elerac
1
170
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
890
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
240
短縮URLをお手軽に導入しよう
nakasho
0
150
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
AIエージェント入門
minorun365
PRO
31
18k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
620
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Site-Speed That Sticks
csswizardry
4
410
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Transcript
クラウドには Azure App Service がある DIST.29 @kazuyukimiyake 1
About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP (
for Microsoft Azure ) Vue.js-jp, TypeScript-jp コアスタッフ DIST.20 「あなたと私のタスク管理」 スピーカー 2
Azure App Service のススメ 3
Azure App Service Microsoft Azure の PaaS の中核サービス Azure は
PaaS から始まったので、もはや Azure の中核サービスと⾔ってもいい クラウドネイティブな Web アプリの開発・運⽤に⽋かせないプラットフォーム Web アプリそのものだけでなく周辺もカバーする MVC ベースの Web アプリ API ベースの アプリ バックエンドサービス バッチ処理 4
App Service のサービス形態 App Service は 「Web Apps」 か 「Functions」
で動かす (App Service は論理的なサービスの呼称) 5
Azure App Service - Web Apps で何が動かせるか アプリフレームワークを使った Web アプリ
Laravel Express Nuxt.js (Universal) ASP.NET Core Spring Boot etc.. 使いたいアプリケーションスタックを選択できる メジャーなものはあらかじめ⽤意されている(PHP, Node.js, Python, .NET, Java) 好きな Docker イメージも選択可能 6
App Service Plan でコストを最適化する 開発⽤の無料プラン、安価な共有プラン、従量課⾦プラン(Functions ⽤)もある 専有プランでは、リソースの範囲内でサイトを追加可能(追加コストなし) 7
アクセス増⼤や障害に強い = PaaS のメリットを享受 アクセス増⼤にはオートスケールで対応 プラットフォーム起因の障害は基本的に⾃動で復旧される OS やミドルウェアレベルのセキュリティパッチも⾃動適⽤ 8
無停⽌でのリリース、サイト更新 デプロイメントスロットを活⽤する カナリアリリースもできる 9
Azure App Service のはじめかた まず Azure サブスクリプションを準備しよう VS Code の
Azure 機能拡張からはじめるといいかも GitHub を使っている⼈は、リポジトリの更新をトリガーに⾃動デプロイ可能 本格運⽤なら Azure Pipelines, GitHub Actions からのデプロイがオススメ 10
DEMO Nuxt.js (ユニバーサル SSR) を App Service にデプロイしてみる 11
その他の使える機能たち カスタムドメイン / 証明書 IP 制限 / ソーシャルログイン連携(Easy Auth) ログ、アクセス解析(Application
Insights 利⽤) VNET 統合(プレビュー) ・・・常に進化中 参考ドキュメント 公式ドキュメント(⽇本語) 公式学習サイト: Microsoft Learn 12
静的 Web サイトはどうする︖ Static Web Sites ホスティングの利⽤ SPA ベースのフロントエンド CDN
と組み合わせるとスケールする Netlify のような⾼機能な DevOps 機能はまだ提供されていない 13
SPA のバックエンドは Functions でサーバーレス化 Azure Functions は数ステップの操作で外部公開 API を作成できる API
Gateway の作成などは不要 フロントエンド、バックエンド全てサーバーレスで完結する いろいろな⾔語で開発可能 Node.js Python C# Java Powershell 14
フルサーバーレス(SPA + API) の例 Vue.js + Azure Functions + SendGrid
VueFes Japan 2018 の⼀⻫メール配信はこれを使った 15
DEMO Vue.js + Azure Functions で サーバーレス(AI も)︕ 16
My Favaorite Azure PaaS / Serverless products 17
(補⾜)App Service の開発チームはとてもオープン スタートアップのような開発スタイル(※三宅調べ) ユーザーのフィードバックを真剣に聞いてくれる OSS で公開されている機能も多い 18
ご清聴ありがとうございました︕ TSConf JP 2020 開催します︕ 19