2022年9月24日　JAZUG12周年記念LT大会 ホームページのリニューアルで、これまでの手法が踏襲できなくなっていたことや、安価で高速閲覧ができる対応サービスを検討していた。それに成功した影響により、2つのサービスを比較してみた結果を話すことにした。

1. Azure Web Apps VS Azure Static Web Apps
Kenshiro Fukuda
@Kenshiro_fukuda
http://akatoku.tokyo/
JAZUG 12周年総会 LT大会 その１

2. 自己紹介
昨年5月から某研究学園都市エリアで勤務している新人社内SE
それ以前からシステム系の学習やこのようなイベントに参加をして
いたが、疫病の蔓延で一時中断していたが、この夏から少しずつ復
帰。
HP：http://www.akatoku.tokyo/

3. Web Apps 気づいた2つの形態
Web Apps
 Azure App Service は、Web アプリケーション、REST
API , およびモバイル バックエンドをホストするための
HTTP ベースのサービスです。 開発には、.NET , .NET
Core , Java , Ruby , Node.js , PHP , Python のうち、お気
に入りの言語をご利用いただけます。 アプリケーショ
ンの実行とスケーリングは、Windows ベースの環境と
Linux ベースの環境の両方で容易に行うことができま
す。
 App Service は、セキュリティ、負荷分散、自動スケー
リング、自動管理などの Microsoft Azure の機能を、ア
プリケーションに追加するだけではありません。 Azure
DevOps , GitHub , Docker Hub およびその他のソースか
らの継続的デプロイ、パッケージ管理、ステージング
環境、カスタム ドメイン、TLS/SSL 証明書など、
DevOps 機能を利用することもできます。
Static Web Apps
 Azure Static Web Apps は、コード リポジトリから Azure にフル スタックの
Web アプリを自動的にビルドしてデプロイするサービスです。Azure Static Web
Apps のワークフローは、開発者の日常のワークフローに合わせて調整されてい
ます。 アプリは、コードの変更に基づいてビルドおよびデプロイされます。
 Azure Static Web Apps リソースを作成すると、Azure は GitHub または Azure
DevOps と直接やり取りして、選択したブランチを監視します。 コミットをプッ
シュするたび、または監視対象のブランチへの pull request を受け入れるたび
に、ビルドが自動的に実行されて、自分のアプリと API が Azure にデプロイされ
ます。
 通常、静的 Web アプリは、Angular , React , Svelte , Vue , Blazor など、サーバー
側のレンダリングが不要なライブラリとフレームワークを使用して構築されま
す。 これらのアプリには、アプリケーションを構成する HTML , CSS , JavaScript ,
およびイメージ アセットが含まれます。 従来の Web サーバーでは、これらのア
セットは、必要な API エンドポイントと共に 1 台のサーバーから提供されます。
 Static Web Apps では、静的アセットは従来の Web サーバーから分離され、世界
各地の地理的に分散したポイントから提供されます。 この分散により、ファイ
ルがエンド ユーザーに物理的に近づくため、ファイルの提供が大幅に高速にな
ります。 さらに、API エンドポイントはサーバーレス アーキテクチャを使用し
てホストされます。これにより、完全なバックエンド サーバーが不要になりま
す。
Docs.Microsoft.comより引用

4. ん？何を言っているのかわからん・・・
＜ざっくりまとめると＞
 Web Appsでは、App Servicesが入っているサーバーを利用して管理
者による管理を行うことが可能。
 Static Web Appsでは管理者側から細かい設定をすることはできない
分、ユーザー側としては快適にWebサイトを閲覧することが可能。
 Web Appsの課金請求ではマシン等に左右されるが、Staticでは大ま
かに２段階に分かれる。
 「ソース管理設定をいつ行うか？」「もうつなげてもいいか？」が
カギとなる
 場合によってはオプション契約（CDN）の解約も可能となる。

5. 課金請求体系
azure.microsoft.com/ja-jp/pricing/details/app-service/windows/ より引用
＜Web Apps＞
＄0.40/時間

6. 課金請求体系
azure.microsoft.com/ja-jp/pricing/details/app-service/static/ より引用
＜Azure StaticWeb Apps＞

7. 通常のWeb Appsの画面
１から製作ができるように
様々な機能が搭載されている。
Static Web Appsの画面
Webサイト作成をメインにし
ているため、ポータルの範囲
が限られる。
ポータルの画面比較

8. 実際、同じサイトを用いた結果は？
※ 同じソースをそのまま上げた当初の結果を出しています。

9. App ServicesとStatic Web Appsで初回ビルド
App Services Static Web Apps

10. Static Web Appsでは・・・
 当初はCSV形式での読み込みを断念しようとしたが、JavaScriptの読
み込みは可能ということが判明した
 IE11のEOF対応に伴う強制リダイレクトの設定を復元させることにした
 CSV形式からの読み取りについては、コードのエラー反応は出なかったが、コードにマウス
を当ててみると、次の画像が出たので・・・
「；」を入れてみたところ・・・

12. このことから・・・
• Static Web Appsでのホームページリニューアルを試みる場合、
Localhostや通常のApp Servicesではエラーに気づくことは難し
い。
• その場合は、Visual Studioを開いてみて、コードエラーがなくても
型式の部分にマウスを当てると一つ答えが出る。
• どんなエラーを吐き出すかは実際アップしてみないとわからない
ところ・・・

13. いいじゃん、Static Web Apps？？
早い・安い・うまい （設定は要確認）
自動デプロイで、プッシュ＝アップロード
リージョンも気にすることなかれ
↓
ホームページにもってこい！！

14. 今後良いという判断が出れば・・・
１．リニューアル対応に向けて
研究用とホームページ用のアカウントを分離させる
２．リソースを限定し、対応させる
公開は専用リポジトリからアクセスする意識の確立
３．コンテンツの充実に向けて日々の書き上げ作業

15. ご清聴ありがとうございました