SignalR+Azure Functions+Static Web Appsでサーバーレスなチャットアプリを作るMS Tech Campメモ
にー兄さんMS Tech Camp 12でSignalRを使ったサーバーレスチャットのデモをすることになったので
そのための準備をしていく
にー兄さんSignalRを使うにあたり、デモをするためにはリアルタイム通信ができるクライアントも開発しなくてはいけない
そうなると何かしらのクライアントアプリを作成しなくちゃいけないんだけど、たぶんWebクライアントが一番簡単なので、それも一緒に開発する
正直1時間のハンズオンにしては内容がもりもりになってしまうので
視聴者を置いていく形になりそう
にー兄さんWebクライアントを作るんだったら、せっかくなのでSWAを使ってAzureにデプロイまでをしてしまいたい
ということは必然的にローカル開発になる
もうそうなったら好きな技術スタックをつあったほうがやりやすい
SWAでAzureFunctionsを使うのであれば、Functions統合機能を使うと
リポジトリも増えなくていいかもしれない
せっかくなのでモダンな構成で
Vite＋Vue3＋TypeScriptそしてSWAのfunctions統合をデプロイし、
signalrとの通信をする
これでどうだ
にー兄さんswaを使うのであれば、使ったことのないswa-cliを使って見たい
参考になりそうなサイトを張っていき
にー兄さんまずはVite vue-ts環境で/apiを使えるようにするのが先かな
にー兄さんSignalR＋Functions に関しては前に作ったログが参考になる
にー兄さんいわずもがな、SignalR Serviceをtypescriptで扱っていて
フロントがvueという構成はこの記事のほぼ丸コピである
今回はviteだったりvueのバージョンが3だったりSWA使ったりする当たりは
この記事のアプデみたいなところはある
にー兄さんSWA-CLIのnpmパケページも参考になりそう
にー兄さんswa-cliは基本グローバルインストールで使うモノっぽいけど、自分はあまり環境汚すの好きじゃないのでローカルで使うことにした
"preview:swa": "yarn swa start http://localhost:3000 --run \"yarn dev\""
package.jsonのスクリプトをこんな感じにすればVite環境でもSWAをエミュレートできた
にー兄さん多分apiのコンフィグも入れればAzureFunctions統合もエミュレートできる
もちろんhmrもちゃんと動作した
起動スクリプトが長くなりそうなので、swaのconfigファイルも作ったほうがいいかも
にー兄さん/apiいかにhttpトリガーを作ったところ、
api内にnode_modulesをインポートしてapi内で起動したAzureFunctionsを
swa start http://localhost:3000 --run "yarn dev" --api-location /apiって感じにすればキャッチ出来て
/apiにプロキシを設定できた
にー兄さんSignalRを作成
Freeプラン＋Serverlessモードに変更したもの
にー兄さんなんだかんだ、あまりつまることなくSignalRも実装できて
普通に動くようになったよ