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

まずはVite vue-ts環境で/apiを使えるようにするのが先かな

いわずもがな、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にプロキシを設定できた

SignalRを作成
Freeプラン+Serverlessモードに変更したもの

このスクラップは2022/01/07にクローズされました
ログインするとコメントできます