FIXER cloud.config Tech Blog
無料でも使える新サービス「Azure Static Web Apps」はここまでできる！
2021年09月16日 11時00分更新
本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「無料の新サービス Azure 「Static」 Web Apps はここまでできる！ #Azureリレー」を再編集したものです。
今回は2020年の5月に発表され、2021年5月に正式に一般公開されたばかりのホヤホヤサービスである「Azure Static Web Apps」についてご紹介します。
AzureでWebアプリをデプロイしようと思ったら真っ先に思い浮かぶのはAzure Web Appsです。
Azure Web AppsはPaaSの一種であり、.NETやJava、Node.js、PHP、Pyhton等多様な言語で書かれたWebアプリをインフラのことを気にすることなくデプロイできるのが特徴になります。
また、静的なサイトのホストティングということでは 「Azure Storageでの静的Webサイトホスティング」という方法もあります。
既にいくつかの選択肢があるなかで新たに追加された「Azure Static Web Apps」は何が特徴なのでしょうか。
1. 安価
Static Web Appsには二種類の料金プランがあります。
ひとつはなんと無料、もうひとつは1008円／月*アプリです。
両者の違いを簡単に説明すると以下のようになります
・転送できるデータ容量に上限（月間100GB）があるかどうか
・アプリに付与できるカスタムドメインの数（2 or 5）
・カスタム認証が使えるかどうか
・アプリを格納するストレージ容量（500MB or 2GB）
・Azure Functionsの接続方法（後述）
・SLA（Azureにおいては可用性を保証するサービスごとに決められた値。Static Web Apps は99.95%）を提供するかどうか
趣味サイトやお店のちょっとしたサイトくらいであれば無料版で十分だと思います。
※注：公式サイトやドキュメントを確認しましたが、無料版の商用利用に関する制限は特に書かれていませんでした。ただし、無料版は月間転送量が100GBを超えるとサイトにアクセスできなくなりますのでご注意ください。
デプロイ後に変更することもできるのでとりあえずFree版でリソースを立てて必要になったらStandardに変更するのがおすすめです。
2. 自動のGlobal Content Distribution (グローバル分散コンテンツ)
Azure Static Web Appsでは世界規模のCDNが自動で構築されます。
これによって高い可用性と、世界中のどこからでも高速なレスポンスを実現しています。
前述の「Azure Storageに静的サイトをホスティング」を用いた場合には別途Azure CDNなどを用いていろいろと設定しないと実現できないことを勝手にやってくれるのはお得感があります。
また、デプロイ時に指定したリージョンはAPIの実行環境の指定とステージング環境にのみ使用されているようです。
3. 容易なCI／CD の構築
Azure Static Web Appsは現在、CI／CDを用いた方法でのみデプロイすることが可能です。
そう聞くとなんだか難しそうで気後れしてしまうかもしれませんが、GitHubかMicrosoft Dev Opsのアカウントを持っていればものの数分でパイプラインを構築可能です。
最後に実際にCI／CDを構築する手順を解説しますので、お楽しみに！（？）
4. Azure Functionsとの連携がスムーズ
Azure Static Web AppsにはAzure Functionsを用いたAPIエンドポイントが用意されています。
Azure Functionsとはサーバーレスコンピューティングと呼ばれるサービスで、実行環境についての考慮をすることなくプログラムを実行させることができます。
Static Web AppsにおけるFunctionsには「マネージド関数」と「独自関数の持ち込み」の2つの構成があります。
マネージド関数では、いくつかの制限（Azure FunctionsによるAzure Static Web AppsでのAPIのサポート | Microsoft Docs）がありますが CI／CD のパイプラインを構成するときにFunctionsアプリのソースコードがある場所を指定するだけでよしなにやってくれます。
独自関数の持ち込みでは、制限が緩い代わりにFunctionsのリソースの生成なども自分で行う必要があります。
また、独自関数を使いたい場合はStatic Web AppsのStandardプランである必要があります。
どちらの方法であっても同じオリジンとして提供されるため、カスタムCORSルールを必要としません。
これによって簡単、安全にAPIを用いたウェブサイトを構築することができます。
まとめ
今回はAzure Static Web Appsの特徴をご紹介しました。
安い！ 速い！ 簡単！ の三拍子そろった素晴らしいサービスなので皆さんもぜひ使ってみてください。
特に無料プランでも十分な性能がありますので、まずはお試しでどうぞ！
（おまけ）実際にCI／CDを構築してみる
1. Azure Portalでリソースを作成画面に入る
2. GitHubのアカウントでサインインする
3. サインインしたアカウントで自動デプロイしたいリポジトリとブランチを指定する
4. 静的アプリのフレームワークを選択する
5. アプリの場所とAPIの場所、出力先を入力して確認及び作成を押す
アプリの場所、APIの場所はいずれもソースコードの含まれるフォルダへのパスです。
移動してビルドコマンドを叩ける場所と言い換えてもいいかもしれません。
ここで注意して頂きたいのは、アプリの場所、APIの場所はリポジトリ直下からのパスですが、出力先はアプリの場所からビルドした時の生成物の相対パスであるということです。
ややこしいですが、ビルドのプリセットでCustomではなくフレームワークを選択している場合にはデフォルトでそれっぽい値が入るのでそれを参考にするとよいと思います。
やってみれば簡単系なのでぜひとも試してみてくださいね！
参考
Static Web Apps の SLA | Microsoft Azure
App Service Static Web Apps の仕組みを探る（非公式） – しばやん雑記 (shibayan.jp)
佐藤 晴輝／FIXER
フロントからバック、ネットワークまである程度触れるガジェットオタクです。
好きな言語は C# で IoT と画像処理が得意です。
