Closed13

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との通信をする
これでどうだ

にー兄さんにー兄さん

いわずもがな、SignalR Serviceをtypescriptで扱っていて
フロントがvueという構成はこの記事のほぼ丸コピである

今回はviteだったりvueのバージョンが3だったりSWA使ったりする当たりは
この記事のアプデみたいなところはある

https://blog.okazuki.jp/entry/2019/03/09/174622

にー兄さんにー兄さん

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にプロキシを設定できた

このスクラップは2022/01/07にクローズされました