--- title: 何も変えてないのにAzure Static Web Apps上の個人ブログがダウンしたお話 tags: #azure #azure static web apps author: [Kazuki Yamabe](https://www.docswell.com/user/kdk_wakaba) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/DJYVXLXMJM.jpg?width=480 description: 2023/05/13 Global Azure 2023 Short session で発表したスライトです。個人ブログで利用しているAzure Static Web Appsのアップデートに気づかずサイトをダウンさせた経験を基に、PaaS利用時のメリット・デメリットやAzureのアップデート確認方法、Azureのサービスを利用した検証環境準備、運用に関する内容となります。 published: May 13, 23 canonical: https://www.docswell.com/s/kdk_wakaba/KW1XL8-2023-05-13-160000 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/DJYVXLXMJM.jpg) 何も変えてないのにAzure Static Web Apps上の 個人ブログがダウンしたお話 PaaS 利用時のリスクやAzure のアップデートなど、ちゃんと意識してる？ 2023/05/13 Global Azure 2023 Kazuki Yamabe # Page. 2 ![Page Image](https://bcdn.docswell.com/page/V7NM1413E8.jpg) アジェンダ ▪ 自己紹介 ▪ 発生事象 ▪ トラブルシューティング ▪ 問題の分析 ▪ 対策 ▪ まとめ 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/YJ9N5Q5PJ3.jpg) 自己紹介 名前：Kazuki Yamabe 会社：株式会社エーピーコミュニケーションズ 業務内容：企業向けサービスの運用業務全般と開発など ■SNS ▪ Twitter：@kdk_wakaba ▪ Linkedin：kdk-wakaba 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/GJ8KYGYXED.jpg) 発生事象 – 個人ブログの構成 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/LJLZ4G4N7R.jpg) ブログ記事書いたしサイトを 更新するか 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/47MVKQKQ7W.jpg) 記事公開っと。 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/P7R2X8XKJ9.jpg) コードも設定も 変えてないのに どうして…。 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/PJXD6865EX.jpg) トラブルシューティング – 発生箇所の切り分け 1. どのページがダウンしているか？ - microCMS のAPI を利用するページが全て500エラーとなる - API を利用しないページは問題なく表示される 2. microCMS 側の問題？ - microCMS で障害やAPI 使用量の制限は無し 3. ローカルPC 上で試してみる - ローカルPC 上だとエラーもなく表示される 4. 他のサービスでデプロイしたらどうか？ - Vercel に同じアプリケーションをデプロイしてみたら問題なく動く ⇛ SWA (Static Web Apps) 側に原因があるのでは？ 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/3JKX1K1RED.jpg) トラブルシューティング – SWA のアップデート情報確認 ▪ 検索していると、SWA に関するアップデートを確認する。 - https://github.com/Azure/static-web-apps/discussions/1066 訳: SWA でNext.js のstandalone をサポートしました。この機能を有効にするにはnext.config.js で output: “standalone” を追加します。 ⇛ standalone 設定はnext.config.js で既に設定していたため、どうして機能してないんだ？となる 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/LE35QZQGJ5.jpg) トラブルシューティング – 原因の特定 ▪ SWA のアップデートから数日、Discussion で以下内容のコメントが投稿される - https://github.com/Azure/static-web-apps/discussions/1066#discussioncomment4961799 訳: アプリをデプロイするとき、環境設定が見つからないために内部サーバーエラーが発生しました。これは、 standalone 機能のenv ファイルが .next/standalone フォルダーにコピーされないためです。 ⇛ env ファイルで環境変数を利用していたため、試しにnext.config.js の「output: “standalone”」を 削除したところ、ブログが表示されるようになりアップデートが原因であると特定。 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/8EDD9R9NEG.jpg) 問題の分析 – 問題点は何か？ ▪ PaaS 利用時のデメリットに対する考慮不足 - PaaS のメリットにばかり意識しており、デメリットに対する意識が低かった - 管理箇所の制限によるトラブルシューティングの複雑化 - 急なアップデートや仕様変更によるアプリケーションへの影響、など ▪ Azure サービスのアップデート確認、情報収集不足 - 何か大きなアップデートがあった時に確認する程度だった - サービスのアップデートに対し、積極的に情報を取りに行ってなかった ▪ 確認用環境の準備不足 - 開発時にブランチは切っていたが、実務のように細かく環境を分けていなかった - 実稼働中の環境へいきなりデプロイしていなければダウンしていなかった ▪ 運用の準備不足 - サービスの状況把握や監視についてもそこまで準備していなかった - いざという時の復旧策を準備していなかったため復旧までに時間がかかっていた 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/V7PXZWZNE8.jpg) 対策 – 問題に対する対策 ▪ 対策1: PaaS 利用時のメリット・デメリットの再認識 ▪ 対策2: 利用中のAzure サービスのアップデート確認 ▪ 対策3: SWA のブランチ環境を利用した検証環境の作成 ▪ 対策4: 外形監視・サービス状況把握のダッシュボード追加 ▪ 対策5: 障害、トラブル時の非常用環境の準備 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/2JVLW8WY7Q.jpg) 対策1 – PaaS 利用時のメリットやデメリットの再認識 ■メリット ▪ インフラの管理をクラウドプロバイダーに任せられることによる運用コストの削減 ▪ 開発者の認知負荷削減による開発スピードの向上 ▪ クラウド上の特性を活かしたアプリケーション開発を容易にできる、など ■デメリット ▪ ユーザー側でのコントロール範囲の制限 ▪ プラットフォーム依存による移植性、柔軟性の低下 ▪ プラットフォーム側の変更や障害に対応する能力を求められる ▪ コントロール範囲制限による障害時の原因切り分けの難化 ▪ 意図しないアップデートや仕様変更 今回はこの部分で 影響を受けた 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/5EGXD5DWJL.jpg) 対策2 – サービスのアップデート確認 ▪ Azure Update - Azure 全体のアップデート情報を確認できる。機能のGA、プレビュー、廃止など ▪ Microsoft Developer Blog、Community Hub などの公式ブログ - Microsoft の開発者などが書いているブログ。一部サービスのアップデート情報が流れることもある ▪ Azure サービスごとの不具合、機能リクエスト用GitHub - Issue やDiscussion を確認することでホットな機能や不具合情報も得られる - サービスによってはPublic のRoadmap を公開しているものもある ▪ コミュニティサイト - 一部サービスで公開しているサイトもある (例：Hello from Azure Static Web Apps など） ▪ SNS・動画サイト (Twitter やYouTube など) - 開発チームの管理しているアカウントからアップデートなどの情報を得られる - YouTube の動画投稿などを行っているコミュニティもあり - 例：Azure Static Web Apps チームのMonthly Standup、など 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/4JQ81Z1Q7P.jpg) 対策3 – SWA のブランチ環境で検証可能な環境を作成 ■SWA のブランチ環境とは GitHub などのリポジトリで作成したブランチごとのアプリケーション環境をデプロイできる機能。例えば developer とstaging のブランチを作成し、GitHub Actions などの定義ファイルに設定することで developer とstaging のブランチ内容からアプリケーションをデプロイしたSWA の環境を作成できる。 ▪ SWA のブランチ環境を使い、記事確認だけでなく不具合なども事前に確認できるように - 急なアップデートがあっても別の環境が壊れるだけで事故を防げるようになった 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/K742R3RYJ1.jpg) 対策4 – 可用性テストを利用した外形監視の追加 ■Application Insights の可用性テストとは 世界各地のポイントからWeb アプリケーションの外形監視などを行える機能。応答確認以外にSSL 証明 書の有効期限確認、カスタムヘッダーのテスト、カスタムアプリケーションを用いた独自のテストも実施可能。 テスト結果に応じたアラート追加も可能。 ▪ Application Insights の可用性テストでブログに対し外形監視を追加 - アクセス異常時にアラート通知を行うことで、いち早く異常検知する仕組みを構築する 16 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/LJ1MQ1QNEG.jpg) 対策4 – SWA のサービス状況把握 ▪ SWA とApplication Insights を連携し、サービス状況を把握できるようダッシュボードを追加 17 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/GJW3M8LMJ2.jpg) 対策5 – 障害、トラブル時の非常用環境の準備 ▪ SWA で障害やトラブルが発生した時のために、Vercel に同一のアプリケーションをデプロイしておく - DNS の切り替えのみで復旧時間の短縮につながる - Azure のリージョンやサービス障害、アップデートによる影響にも対応可能に 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/4EZVQ8MMJ3.jpg) 対策 – 対策実施後の効果 ▪ 対策実施後、同様の障害発生は今のところなし ▪ PaaS サービス利用時のリスク、サービスに対する運用意識について再認識できた ▪ Azure サービスのアップデートを確認することでアップデートに対するリスクだけでなく、最新の情報も得る ことができ学びが増えた 19 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/Y7656PN5EV.jpg) まとめ ▪ パブリッククラウドのPaaS を利用する際、PaaS のデメリットも意識し利用する ▪ 個人のサービスでも検証環境や障害時の異常検知などの運用周りをきちんと準備する ▪ Azure のアップデートや利用サービスの情報をこまめに確認し、重要な変更を見逃さないようにする ▪ いざという時の復旧策などを事前に準備しておく 20 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/G75Y6K5G74.jpg) 参考資料1 ▪ Azure Static Web Apps - https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview ▪ Application Insights 可用性テスト - https://learn.microsoft.com/ja-jp/azure/azure-monitor/app /availability-overview ▪ Azure Static Web Apps の監視 - https://learn.microsoft.com/ja-jp/azure/static-web-apps/monitor ▪ Azure Static Web Apps でブランチ プレビュー環境を作成する - https://learn.microsoft.com/ja-jp/azure/static-web-apps/branchenvironments?tabs=github-actions ▪ Vercel - https://vercel.com/ 21 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/9J2GMWNDJR.jpg) 参考資料2 ▪ Azure Update - https://azure.microsoft.com/en-us/updates/ ▪ Microsoft Developer Blogs ▪ https://devblogs.microsoft.com/ ▪ Blogs – Microsoft Community Hub - https://techcommunity.microsoft.com/t5/custom/page/page-id/Blogs ▪ Azure/static-web-apps (GitHub) - https://github.com/Azure/static-web-apps/ ▪ Hello from Azure Static Web Apps - https://www.azurestaticwebapps.dev/ 22 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/DEYVXLPMEM.jpg) ご清聴ありがとうございました。 23