昨日の Microsoft のカンファレンス MS Build 2020 で新たな App Service ファミリーとして、 Azure Static Web Apps (Azure App Service Static Web Apps) というフロントエンド向けの新しい Azure サービスが発表されました。
ひとまず無料で試せます！
フロントエンドの静的コンテンツのデプロイ先としては Netlify や Firebase Hosting が有名どころですがそれに近いサービスですかね。さらに、こちらは Azure Functions の統合機能とかもあり、色々試してみたい気持ちはありますが...
ひとまずこちらの新サービスにシンプルな SPA をデプロイするところまで試したいと思い、
まずはシンプルな Angular サンプルをデプロイする という極めてシンプルなものを試してみようかなと思います！！
(色んな機能を紹介を知りたい方はごめんなさい...)
と、その前に簡単にそのサービスの補足をしておきます。
Azure Static Web Apps (Preview)
正式名は Azure App Service Static Web Apps らしいです。
Azure Portal の日本語だと "静的 Web アプリ (プレビュー)" とのことです。
こちらは SPA (Single Page Application) やら SSG (Static Site Generator) やらを含む HTML, CSS, JS 等の静的コンテンツを配信する新しい Azure サービス (プレビュー) です。
こんなに早くブログが公開されていることがびっくりですが、以下もう纏められている良記事がありますので、ご参照いただければと思います。
Azure App Service に Static Web Apps が登場！
また、SSG の Gatsby のチュートリアルなども公式の Docs に公開されています。
Tutorial: Publish a Gatsby site to Azure Static Web Apps Preview
ということで、早速、触ってみます。今回は Angular のサンプルをそのまま使います。
前提
- Node.js, npm 等の Angular を開発するための Node 周りのものは揃ってる
- Angular CLI も入っている
- 有効な Azure サブスクリプションを持っている
上記の詳しい説明は省きますが一応、以下に参考情報を添えておきます。
以下はかなり前に書いたもので Update しておらずですが... Mac (上) なり Windows (下) なりで上記の環境構築をするにあたり、多少参考になるかと思います...。
Angular CLI でサンプルアプリ生成 / ローカル動作確認
ステップ2: ワークスペースと初期アプリケーションを作成する の手順をまず実施します。
具体的には以下のコマンドを実行します。(ひとまずアプリ名は my-app のままにしますが適宜変更ください)
ng new my-app
ステップ3: アプリケーションを実行する を参考に以下のコマンドを実行し、"http://localhost:4200/" でローカル動作確認をします。
cd my-app
ng serve --open
上記を GitHub の自分自身の任意のリポジトリにデプロイしてください。
やり方はなんでも良いです。わからない方は以下もご参考になればと思います。
【メモ】GitHubでgit clone〜git pushまで - cloneではなくローカルからリモートまでリポジトリ構築する場合
Azure Static Web Apps リソースを作成
GitHub にデプロイができたら、次は Azure Portal に進み、以下のように 上部検索バーなどで、"静的 Web アプリ (プレビュー)" というのを検索し、リソースの作成を進めます。
リソース作成画面を進めていきますが、1ページ目で GitHub アカウントでサインインを行う部分があるのでこちらでサインインし、先ほどデプロイしたリポジトリやブランチを選びます。
次のビルドページに進みます。以下のような感じで設定して進みます。
- アプリの場所は / なのでそのままで大丈夫
- API の場所は今回 Functions も利用しないのでそのままで大丈夫
- アプリの成果物の場所は先ほどのサンプルの Angular アプリのビルドは dist/"app-name" つまり dist/my-app に出力されるので、そこを指定
作成画面まできたら、作成ボタンを押して作成します。
問題なければ、リソースが作成されます。
デプロイ完了 ~ 動作確認
リソースデプロイ後にリソースに移動すると、以下のような物が出ているかもしれません。
こちらをクリックすると、GitHub Actions にて Oryx がこの Angular アプリのビルドとデプロイを行うワークフローの実行状況やその結果や、先ほどの設定項目等を基に作成された yml の workflow ファイルなどを確認できます。
上記のワークフローの実行完了を確認したら、Azure Static Web Apps のリソース画面に戻り、[概要] に書いてある URL をクリックします。
そうするとおなじみの以下の画面が出てくるので成功です。
なんとも簡単にデプロイができましたね！！
今日はこれだけですが、もちろん他の SPA スタックにも適用できますし、SSG のデプロイ先にも使えたり、Functions との統合もあったりとしっかり充実してそうです。
その他 : Azure Static Web Apps 記事
今回は本当にシンプルな Angular のサンプルアプリをデプロイしてみただけですが、もし興味があり、Vue.js のデプロイや Functions の統合等を試したい方は是非早速丁寧な記事が UP されていたので、以下もお好みで試していただければと思います。
上記のブログの方はさらに WASM も試している模様です。
Azure App Service Static Web Apps に Blazor WASM と Azure Functions をデプロイする
また公式でも色々試せるものがあるみたいなので是非お試しください！