Slide 1

Slide 1 text

クラウドには Azure App Service がある DIST.29 @kazuyukimiyake 1

Slide 2

Slide 2 text

About Me 三宅 和之 @kazuyukimiyake 株式会社ゼンアーキテクツ CTO Microsoft MVP ( for Microsoft Azure ) Vue.js-jp, TypeScript-jp コアスタッフ DIST.20 「あなたと私のタスク管理」 スピーカー 2

Slide 3

Slide 3 text

Azure App Service のススメ 3

Slide 4

Slide 4 text

Azure App Service Microsoft Azure の PaaS の中核サービス Azure は PaaS から始まったので、もはや Azure の中核サービスと⾔ってもいい クラウドネイティブな Web アプリの開発・運⽤に⽋かせないプラットフォーム Web アプリそのものだけでなく周辺もカバーする MVC ベースの Web アプリ API ベースの アプリ バックエンドサービス バッチ処理 4

Slide 5

Slide 5 text

App Service のサービス形態 App Service は 「Web Apps」 か 「Functions」 で動かす (App Service は論理的なサービスの呼称) 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

App Service Plan でコストを最適化する 開発⽤の無料プラン、安価な共有プラン、従量課⾦プラン(Functions ⽤)もある 専有プランでは、リソースの範囲内でサイトを追加可能(追加コストなし) 7

Slide 8

Slide 8 text

アクセス増⼤や障害に強い = PaaS のメリットを享受 アクセス増⼤にはオートスケールで対応 プラットフォーム起因の障害は基本的に⾃動で復旧される OS やミドルウェアレベルのセキュリティパッチも⾃動適⽤ 8

Slide 9

Slide 9 text

無停⽌でのリリース、サイト更新 デプロイメントスロットを活⽤する カナリアリリースもできる 9

Slide 10

Slide 10 text

Azure App Service のはじめかた まず Azure サブスクリプションを準備しよう VS Code の Azure 機能拡張からはじめるといいかも GitHub を使っている⼈は、リポジトリの更新をトリガーに⾃動デプロイ可能 本格運⽤なら Azure Pipelines, GitHub Actions からのデプロイがオススメ 10

Slide 11

Slide 11 text

DEMO Nuxt.js (ユニバーサル SSR) を App Service にデプロイしてみる 11

Slide 12

Slide 12 text

その他の使える機能たち カスタムドメイン / 証明書 IP 制限 / ソーシャルログイン連携(Easy Auth) ログ、アクセス解析(Application Insights 利⽤) VNET 統合(プレビュー) ・・・常に進化中 参考ドキュメント 公式ドキュメント(⽇本語) 公式学習サイト: Microsoft Learn 12

Slide 13

Slide 13 text

静的 Web サイトはどうする︖ Static Web Sites ホスティングの利⽤ SPA ベースのフロントエンド CDN と組み合わせるとスケールする Netlify のような⾼機能な DevOps 機能はまだ提供されていない 13

Slide 14

Slide 14 text

SPA のバックエンドは Functions でサーバーレス化 Azure Functions は数ステップの操作で外部公開 API を作成できる API Gateway の作成などは不要 フロントエンド、バックエンド全てサーバーレスで完結する いろいろな⾔語で開発可能 Node.js Python C# Java Powershell 14

Slide 15

Slide 15 text

フルサーバーレス(SPA + API) の例 Vue.js + Azure Functions + SendGrid VueFes Japan 2018 の⼀⻫メール配信はこれを使った 15

Slide 16

Slide 16 text

DEMO Vue.js + Azure Functions で サーバーレス(AI も)︕ 16

Slide 17

Slide 17 text

My Favaorite Azure PaaS / Serverless products 17

Slide 18

Slide 18 text

(補⾜)App Service の開発チームはとてもオープン スタートアップのような開発スタイル(※三宅調べ) ユーザーのフィードバックを真剣に聞いてくれる OSS で公開されている機能も多い 18

Slide 19

Slide 19 text

ご清聴ありがとうございました︕ TSConf JP 2020 開催します︕ 19