🔥

Azure Static Web AppsでNext.jsのSSRが動くようになったので何をやっているのか調べる

2022/11/12に公開

Azure

Next.js

Serverless

tech

なんか似たようなNext.jsのサーバレス環境の投稿ばかりしている気がするけど、Azureでもサーバーサイドのインテグレーションが追加されていたので調べてみた。モチベーションとしてはこういうプラットフォーム側を作りたい。

使い方

Azure Static Web AppsというのはAzure環境のNetlifyやFirebase Hostingのようなホスティング環境で、そこにNext.jsのSSRやAPI Routes対応(hybrid Next.js)が追加されたのでそのチュートリアルが書いてあるページ。

GitHubにNext.jsアプリケーションが入っているリポジトリを作る
AzureのコンソールからAzure Static Web Appsに接続する
デプロイして完了

をポチポチ操作していれば終わるのでユーザーから見たらVercelと似たようなステップまで簡略されている。

デプロイで何をやっているのか

上記のとうりデプロイの詳細が隠されているが以下の手順を実行している

AzureがホストするAzure/static-web-apps-deployというGitHub Actionをユーザーのレポジトリにセットアップする
MSがホストする mcr.microsoft.com/appsvc/staticappsclient というDocker imageを取ってきてバイナリを実行
ユーザーのリポジトリが解析されAzure Static Web Appsにアップロードされる
Azureインフラ内部でnext_functionという専用のFunction Appが作成され接続される
静的ファイルとFunctionのルーティングの設定などはAzureはよしなに行なってくれる模様

Azure/static-web-apps-deploy

Azure Static Web Appsを作成する時にGitHubに接続すると作成されるAction。自分のリポジトリに勝手に追加されているので定義を見ることが可能。

StaticSitesClientコマンドが実体というのがわかる

StaticSitesClient

Azure Static Web Appsにソースコードをアップロードする時に利用されるプログラム。ソースコードは公開されていないらしい(ファイル構成から.NET Coreで作られているのがわかる)。

GitHub Actionsの定義から upload というコマンドに app_location, api_location, output_location などを渡していることがわかる。

これはAzureのコンソースから設定できるプロパティと同じ。

next_function

Azure内部で作成されるFunction App。コンソールのStatic Web App->APIから存在を確認できる。

az functionapp list しても自分がオーナーのリソースに出てこなく実装も見ることができないけど、Next.jsのSSRやAPI Routesのエントリーポイントになっていると思われる。

Tips(1) StaticSitesClientのデバッグ

StaticSitesClientはパブリックなDocker imageなので手元に持ってきて叩くことが可能。

$ docker pull mcr.microsoft.com/appsvc/staticappsclient:stable
$ docker run -it mcr.microsoft.com/appsvc/staticappsclient:stable /bin/staticsites/StaticSitesClient --help

DeploymentId: a98d1214-8a96-43c4-adec-364a1a377fcb

StaticSitesClient 1.0.0
Copyright (C) 2022 StaticSitesClient

  run        (Default Verb)

  upload     Uploads App and Api artifacts.

  close      Submits PR close message.

  help       Display more information on a specific command.

  version    Display version information.

ローカルのNext.jsビルドをデプロイする時はこう(GitHub通さないのでGitHubのトークンは不要)

docker run -v $PWD:/app -it mcr.microsoft.com/appsvc/staticappsclient:stable \
    /bin/staticsites/StaticSitesClient upload \
    --apiToken $AZURE_STATIC_WEB_APPS_API_TOKEN \
    --app /app \
    --workdir /app \
    --outputLocation .next/

$AZURE_STATIC_WEB_APPS_API_TOKEN は az staticwebapp secrets list -n $MYAPP で取ってこられる。

Tips(2) swa-cli

Azure Static Web Appsに直接デプロイできるswaコマンド。swaだけ打つとどんどん自動でデプロイまで進めていこうとするので、vercel-cli(now.sh)の血を引き継いでいると思われる。

現在はこのNext.jsインテグレーションはswaさんは対応していないとドキュメントに書いてあるが、内部的にはStaticSitesClientをダウンロードしてきて実行しているのでいずれswa deployで完結できそう。

感想

ソースコードが公開されていない部分が多いのに特徴を感じたが、よく考えたらVercelやNetlifyもインフラ部分は透過的に実行されているので似たようなものかもしれない。