日々ろぐ

人に優しく٩( 'ω' )و

Azure Static Web Apps でのホスティングのこと

タイトルの通り。

前回、Azure App Service のことを調べたので、その流れで Azure Static Web Apps も軽く触って見ました。

massyuu.hatenablog.com

Azure Static Web Apps ?

静的サイトをホスティングするサービスです。
Azure 版の Firebase Hosting とか Netlify みたいなものかなと思ってます。
ただ、APIの管理に関して、Azure Functions を同じプロジェクトに内包してビルドすることができ、CROSを気にせず、かつバックエンドもフロントエンドも一緒に管理することができるようです。
Azure 環境で SPA とか JAMStack を実装する時にはやりやすいんだろうなーという印象。

なお、今回は Microsoft Lean にある Azure Static Web Apps の Vue.js のテンプレートを触ってみています。

docs.microsoft.com

他にも Angular や React のテンプレートも用意されています。

ホスティングまでの流れ

Azure App Service の時と同じように、リソースを作成してビルドするだけ...と思ったんですが、デプロイが GitHub Actions 前提になっているように感じました。
以下のように、リソース作成画面で GitHub 連携をしっかり主張してます。

static web app リソース作成画面01

で、ここで GitHub アカウントと連動させると、リポジトリを選択するフォームが表示されます。

static web app リソース作成画面02

また、ビルドに関しての設定は以下のようになっています。
アプリ本体の場所(ビルド対象)や公開フォルダの指定、API(Azure Function)の置き場所などが指定できるようです。

static web app リソース作成画面03

ちなみに、まだ Public Preview ということで SKU は Free プランしかないようです。
リージョンに関しても、選択できる地域は5個ほどでした。

リソースを作成してポータルを確認すると、GitHub Actions を確認してねと言われます。
※この時点で、すでにワークフローが自動生成されている模様。

f:id:massyuu-d:20200707171029p:plain

workflow

その後、ビルドを実行して対象の URL で確認するだけでアプリを確認することができます。
ただの静的サイトだったらこれだけで、API が必要な場合も同プロジェクト内に Azure Functions を作るだけなので管理は楽なんだろうなーと思います。

お試しとか価格とか

Microsoft Lean でサンドボックス使えば無料で試せるし、そもそもホスティングは無料です。
ただ、あくまで Public Preview の段階なので、GAされたらまだわからないですね。
容量も100MBまでなので、そこらへんも含めて確認が必要かなと。

認証とか

Firebase Authentication のように、各種プロバイダでのユーザー認証ができるようです。
対象は
・Azure AD
GitHub
Facebook
Google
Twitter
Azure AD があるのが、MSならではって感じですね。
認証についてはまだ未確認なのでここでは割愛。

docs.microsoft.com

とりあえず今日はここまで。