Azureには静的Webアプリという、名前の通り静的なWebサイトをホスティングするサービスがある。
静的Webアプリ（Azure Static Web Apps）
GitHubやAzure DevOps（Azure Repo？）と連携してホスティングするので、CI/CDでの運用が容易に行える。
また、Azure Functionsと統合してAPI処理できるため、明示的なAzure Functionsのデプロイ無しに連携が可能。
その他、SSL証明書が自動適用されるなど、運用が非常に簡易におこなえるWebサイトホスティングサービス。
静的WebアプリでWebサイトをホスティングする。
VSCodeを使って、簡単なWebアプリをホスティングしてみる
１．GitHubリポジトリの作成
割愛
2.VSCodeでGitHubリポジトリに接続
新しいウィンドウを開いてクローン
3.静的Webアプリを作成
VSCodeでコマンドパネルを開いて「>Azure Static Web Apps: Create Static Web App…」を実行
Sign in to Azure
アプリ名を入力
デプロイリージョンを選択
Webフレームワークを選択（今回はReact）
このあたりも規定で作成します。
この時点で静的Webアプリがデプロイされる
４．Webアプリ用のindex.htmlを作成
ここから静的Webサイトを構築するために、index.htmlを作成
index.htmlの中身を作成
適当なサンプルやAgent AIなどで作成する。
今回はFigmaテンプレートを利用（本題と関係ないので手順は割愛）
index.htmlをローカルで確認
デプロイ前ならindex.htmlを右クリックしてShow in BrowserでUIを確認できる。
この時点では静的Webアプリではデプロイされていない
Azure PortalのリソースでURLをクリックするとデプロイされているかどうかわかる。
### ５．index.htmlをデプロイ
更新したindex.htmlをデプロイするには、GithubにpushすればGitHub Actionsが実行され勝手にデプロイされる
git add .
git commit -m "最初のコミット"
git push origin mainGitHubのActionsを見るとワークフローが実行されている。
先ほどのAzure PortalのURLから見ると、画面の更新を確認できる。
ここまでで静的なWebサイトのホスティングが完了したので、
続いて、Azure Functionsを連携させる。
１．Azure Funtionsのデプロイ
デプロイ方法はMicrosoft Learnに従って行う。
VSCodeのコマンドパネルから「Azure Static Web Apps: Create HTTP Function…」を実行
言語はJavaScript
関数名は「message」（初期はHttpTrigger1みたいなのになっている）
Enterを押すと処理が開始され一気にいろいろファイルが追加される。
これでgit pushすればAzure Functions自体のデプロイが完了する。
なんの処理も入れてないからUIに変化はないが、静的WebアプリのリソースからAPIを見るとマネージドで関数アプリが入っているのがわかる。
2. Azure Functionsの修正
修正内容はかなりお任せだが、app.jsを叩いていろいろな処理が動的に呼び出されるように修正
本日限定キャンペーンがUTCの23:59に合わせてカウントダウンしたり、コミュニティダッシュボードなどの数字が動的に更新されるようになった。
３．修正内容のデプロイ
静的Webアプリのマネージドで統合したAzure FunctinosもmainブランチへのpushをトリガーにGithub Actionsが起動し自動デプロイされる。
Azure Portalのリンクから、ローカルテストと同様の画面が出てくれば完了。
まとめ
今回は静的WebアプリとAzure Functionsの統合されたデプロイについて解説しました。
ここからDBやAPI Managemtを使った3rd製品のAPI連携などでいろいろなことができるので試してみたいです。
コメント