React + Azure Functions(.NET 6) を Azure Static Web Apps で公開する

みなさん、Azure Static Web Apps を使っていますか。そう、GitHub と連携して静的アプリとAzure Functions を自動で公開できるすごいサービスです。GitHub に push してプルリクするだけでステージング環境まで自動でデプロイされちゃいます。しかもFreeプランなら無料。すごすぎる。

参考Azure Static Web Apps のドキュメントdocs.microsoft.com

最近 Blazor WebAssembly + Azure Functions (.NET 6)にも対応したということで、今後さらに使用機会が増えると予想されます。しかし、実際のプロジェクトで Blazor WebAssembly を採用するのはまだ先になりそうです。実運用では React や Vue.js を採用することが多いのではないでしょうか。

当社でもフロントは React をよく使っていますが、サーバサイドは実行速度や過去の資産を流用できることもあり、.NET で開発することが多いです。チュートリアルや色々なサイトを眺めてみましたが、Azure Static Web Apps で React を採用する場合、API も JavaScript で記述されているケースばかりでした(当然だとは思いますが)。そこで、なんとかReact + Azure Functions(.NET 6) で Azure Static Web Apps を利用できないか試してみた、というのが今回の記事になります。

React App

サンプルなので基本的には create-react-app しただけです。その他、TypeScript で開発する用に ESLint や Prettier の設定をしています。

Azure Functions

Api フォルダを作ってそこに .NET 6 のAzure Functions を配置します。ついでに Blazor WebAssembly の検証もしたかったため、参考サイトからの流用です。

Azure Static Web Apps

以下の設定値で作成しました。

項目	設定値
アプリの場所	/
APIの場所	Api
出力先	※空
ビルドのプリセット	React

GitHub Actionsのログを眺めながら待ちます。

Detecting platforms...
Detected following platforms:
  dotnet: 6.0.0
Version '6.0.0' of platform 'dotnet' is not installed. Generating script to install it...


Source directory     : /github/workspace/Api
Destination directory: /bin/staticsites/ss-oryx/api


Downloading and extracting 'dotnet' version '6.0.100' to '/opt/dotnet/6.0.100'...
Downloaded in 7 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: dotnet...
Done in 12 sec(s).

おお？
自動的に.NET 6 のプロジェクトと認識しているようです。そのまま待っていたらすべてのActionが成功しました。特に苦労することなく React + Azure Functions(.NET 6) の構成で Azure Static Web Apps にデプロイできました。実際にデプロイされたサイトはこちらになります。「C# API(.NET 6)」をクリックすると Azure Functions が動作していることも確認できます。