Azure Static Web App で音声分析Webアプリケーションを開発しました
概要
音声を録音し、その音声を分析した結果を表示するアプリ「VoiceTypeAnalyzer」を開発しました。
技術構成
- フロントエンド：Next.js, TypeScript, Tailwind CSS
- バックエンド：Python, FastAPI, librosa
- インフラ : Azure Static Web Apps, Azure Container Apps
背景
昨今MBTIなどの診断系Webアプリケーションが流行っているので似たようなサービスを作りたいなといろいろ考えた結果音声を分析してくれるアプリを作ってみました。
ユーザーがブラウザ上で声を録音し、その音声をサーバーへ送り、Python ライブラリである librosa で声のタイプを診断して返します。
問題１：Azure Static Web Apps に付属する Azure Functions でバックエンドが動かない
Azure Static Web Apps でフロントエンドをホスティングすることはできましたが、同時に生成されるAzure Functions では 0.50 GB のストレージ容量があるらしく、容量オーバーで断念。
問題２：Azure Functions で librosa がホスティングできない
Azure Static Web Apps の付属 Azure Functions ではバックエンドのデプロイができなかったので、別リソースで Azure Functions を作成し、デプロイしました。
ただ、librosa 自体は純粋な Python パッケージですが、ネイティブコードを含み、ビルドやシステムライブラリが必要らしいです。Azure Functions ではそれらがビルドできずエラーになるようでした。（おそらく）
他のライブラリのインポートは問題ないが、librosa だけインポートができなかった。
リポジトリのrequirements.txt（該当箇所）
azure-functions
fastapi
uvicorn[standard]
pydantic
numpy
numba<0.60
soundfile
cffi
audioread
scikit-learn
joblib
decorator
librosa
setuptools
google-api-python-client
google-auth
google-auth-httplib2
python-dotenv
上のように numba<0.60 を指定したり、依存を明示しても、Azure Functionsのビルド環境によっては llvmlite（numbaの依存） のビルドが失敗しました。
対処方法
Docker コンテナでカスタムイメージを作成して Azure Container Apps を動かすことで解決しました。
- すべての依存関係（特に
llvmliteやnumba） をあらかじめビルド済みのイメージに組み込む - Azure Functions ではなく、Azure Container Apps でコンテナイメージのデプロイをする
まとめ
Azure Functions 上でも不可能ではないのかもしれませんが、現状自分の技術だと Docker を使ったほうが早いと思い Azure Container Apps で動かしました。
Next.jsでフロントもバックも作ったことはあったけど、別の言語で作ったことはなかったので勉強になりました。
ということで完成したWebアプリはこちらです。
無料で使えるので触ってみてください。