1.はじめに
先ほどQiitaエンジニアフェスタなるものがあるらしいと知りました。
告知ページを見てみると…開催期間「2021/07/01 〜 2021/08/25」
・
・
・
「明日までだ！！！！！」ってなわけで、勢いでお題の「Static Web Apps」について書いてみました！
(恥ずかしながら、Static Web AppsがGAしていたことを今回のフェスタで知りました😗😗😗)
2. Static Web Appsとは
Static Web Appsは、日本語に直すと「静的Webアプリ」。
これだけでピンとくる人は来ると思いますが、静的Webアプリをすごく簡単にデプロイできるサービスです。
具体的には、GithubやAzure DevOps PipeLineから、Webアプリを自動的にビルドしてデプロイすることができます！素晴らしい。
GitHubはソースコードを”リポジトリ”といわれるWEB上の保管庫で共有し、複数人で協同し開発することができます。GitHub上でソースコードをコミット(ファイルの追加や変更の履歴をローカルリポジトリに保存する)し、プッシュ(リモートリポジトリにソースコードを送信する)したり、pullRequest(変更提案)を受け入れる度に、自動的にアプリがビルドされて、Static Web Appsが更新されます。
つまり、いつでも最新の状態でアプリが利用できるようになるわけですね。
さらに、Azure Functionsを合わせて利用することで、 Angular、React、Svelte、Vue などの JavaScript フレームワークとライブラリを使用した 最新の Web アプリケーションの構築をすることも可能です。便利ですね。
3. ストレージアカウントの静的サイトと何が違うの？
と思ったあなた。私も思いました😏
上記で記載した、GithubやAzure DevOps PipeLineから、Webアプリを自動的にビルドしてデプロイすることができる点が大きな違いです。
ストレージアカウントでは、静的なWebサイトは設置できるものの、何らかの工夫をしない限り自動的にデプロイはしてくれません。(やろうと思えばできます)
Static Web Appsでは、以下のようにリソース作成時、ポータル上からGitHubアカウントを連携するだけで簡単に連携することができます。
 |
|---|
その他の要素は細かいところはあるかもしれませんが、同じといえば同じですね。
ちゃんと負荷テストして検証すれば、性能的な違いも見えてくるのかもしれません(今回はやりませんが)。
4. 価格は？
なんとFreeプランがありまして、ある程度の機能は無料で利用することができます!素晴らしい。
趣味でサイトを運営したりする場合、無料でホスティングができるので、かなり便利です。
しかもWEBサーバーの管理等をしなくても、GitHubにアップロードしたソースコードに応じて自動的にデプロイしてくれる。便利すぎる…
それぞれの違いの詳細は、以下の表の通りです。
| 機能 | Free プラン(個人プロジェクトの場合) | Standard プラン(運用アプリの場合) |
|---|---|---|
| Web ホスティング | ✔ | ✔ |
| GitHub との統合 | ✔ | ✔ |
| Azure DevOps 統合 | ✔ | ✔ |
| グローバルに分散した静的コンテンツ | ✔ | ✔ |
| SSL 証明書の無料の自動更新 | ✔ | ✔ |
| ステージング環境 | アプリあたり 3 | アプリあたり 10 |
| アプリの最大サイズ | アプリあたり 250 MB | アプリあたり 500 MB |
| カスタム ドメイン | アプリあたり 2 | アプリあたり 5 |
| Azure Functions による API | マネージド | マネージドまたは独自の関数アプリの持ち込み |
| 認証プロバイダーの統合 | 事前構成済み(サービスで定義済み) | カスタム登録 |
| サービス レベル アグリーメント (SLA) | なし | 99.95％ |
引用元:
5. ちょっと残念な点
はい、ここまでハイテンションに紹介してきましたが、ちょっと残念な点もあります。
Azure Functionsのリージョンが限られる
Azure Static Web Apps では、Azure Functions を介してサーバーレス API エンドポイントが提供されています。
しかし、今のところStatic Web Appsで利用するAzure Functions とステージング環境のリージョンは、「Central US」「East US 2」「East Asia」「West Europe」「West US2」の5つのリージョンに限られています。
これは「Azure Functionsは日本リージョンにないとだめだ！」っていう要件があると、困っちゃいますね🤔
個人的にはどこのリージョンであってもあまり関係ないと思いますが。
ドキュメントに冗長化について記載がない
コンテンツをグローバル ホスティングしていることは記載があるのですが、どのように可用性を担保するのかについてドキュメントに記載がなく、ちょっと不安を感じますね🤔
「大丈夫。SLA99.95%だよ。」といわれれば「お、おう」といわざる得ないのですが…この0.05%にこだわる会社さんも多いもので。
ApplicationgatewayやTrafficManagerとかで冗長化構成とれるのかな？とも思いますが、確証なしです。(少なくともTrafficManagerはストレージアカウントでは非推奨ですね)
まぁこの辺のドキュメント類は、時が経つにつれ、整っていくでしょう！😁
6.一押しポイント
なんといっても、面倒なこと考えず、Githubと自動的に連携できることでしょう！(この記事で3回目の言及)
DevOps系のPipeLineを構成するのにも準備が必要ですし、ある程度管理費もかかります。これを一つのサービスで実現できてしまうことが素晴らしい。
7. 終わりに
はい、というわけで今回は滑り込みでStatic Web Appsについて記事を書いてみました。
運用アプリとして使うのは少し疑問が残るものの、個人開発で利用するにはもってこいの便利なサービスです！
興味を持った方は是非利用してみてください！
それでは！