🙋♀️: すいませーん、なんだか私のiPhoneで表示が不思議なんですが見てもらっていいですか？
🙋♂️: すいませーん、僕のAndroidで動作がちょっとおかしいんですけどバグってますか？
🙋: すいませーん、Teamsのタブから見るとどうも挙動が意図しないような気がします！
👨👩👧👦: すいませーん、すいませーん、すいませーん...
.
.
.
🐻❄️: わァ... うぅ...
なんてこと、ありませんか？
モバイルでのデバッグって大変！
普段Webアプリを開発されている方なら、モバイル向けのレイアウト確認には開発者ツールでモバイル表示に切り替えて確認するのが一般的でしょう。とても簡単ですし、私も普段はそうしています。
しかし、実際にモバイル向けに作っていると、不思議なことにiPhoneあるいはAndroidでしか発生しない表示崩れや挙動の問題がよくあります。
これらの問題はOSのバージョン、ブラウザ、解像度、セキュリティ設定、アドレスバーの位置などその要因は多岐にわたります。
さらにコミュニティオではTeams上で動作するアプリも作っており、その場合Teams内のタブでiframeで動作するため、こちらもまた独特な問題が発生することがあります。
自分の持っている端末だけであればポートフォワードやプロキシでデバッグできるのですが、他の人の端末での検証がなかなかしづらいという問題があります。
コミュニティオはフルリモートワークということもあり、ちょっと繋いでやってみて～なんてこともできません。このため何か対策が必要でした。
Azure Static Web Apps (SWA) とは
ここで登場するのがAzure Static Web Apps (SWA)です。
SWAは、Microsoft Azureが提供するホスティングサービスで、静的なWebアプリケーションを簡単にホスティングできます。
Azure Functionsを使ってサーバーレスなバックエンドAPIを追加できたり、Azure ADと連携した認証をかけられたりと便利な機能があります。
また、GitHub Actionsと連携してCI/CDを行うことで、PRごとに異なるステージング環境を自動で作成することもできます。
普通のデプロイ
コミュニティオでは画面側はすべてSWAを使ってホスティングしており、GitHubと連携していてmasterブランチにマージされたら開発環境に自動でデプロイされるようにしています。
モバイルのデバッグをより簡単にするために、まず考えつくこととしてはSWAにデプロイしてから確認するという方法です。
でも待ってください。まだ確実になってない、トライアンドエラーのふわふわコードを実機で見たいがためにコミットして、masterブランチにマージしてデプロイするのはちょっと心理的に抵抗がありませんか？
「じゃあGitHub連携じゃなくてローカルからデプロイすればいいじゃないか」、と思ったあなた、お察しがよくてすばらしい！
しかしSWAの制限としてGitHubと連携してしまうと、以降GitHubからしかデプロイできないという制約があり、ローカルからデプロイすることができないのです。
ローカルからあえてのデプロイ
ふわふわコードをデプロイしないことには実機確認できない、でもGitHubにコミットしたくない！
でもGitHub連携したらローカルデプロイできない。。。
そこで思い切って専用のSWAを別途作りました。これがとても快適です。
- 事前に
npm install -g @azure/static-web-apps-cliでAzure CLIをインストールしておく - ローカルでトライアンドエラーでコードを書く
-
npm run buildでサクッとビルド -
swa deploy ./distでデプロイ
これだけの簡単ステップでiPhoneでもAndroidでもTeamsでも確認できるようになります。
そして諸々動作が確認できて初めてGitHubにコミットする、というのがコードベースのごちゃつきを防ぐためにも良いんじゃないかと思っています。
別解
別の方法として、GitHubに作業ブランチでコミットしたあと、masterにマージせずに固定の環境にデプロイして確認するというのも便利です。
SWAの機能を使ってもPRごとに任意の環境にデプロイしてもいいですし、PRを作ることなくGitHub Actionsを使ってブランチを選択的に任意の環境にデプロイするようにしてもいいでしょう。
ちなみにコミュニティオでは後者のブランチを選択的に任意の環境にデプロイする、という方法も併用しており、こちらも非常に便利です。
まとめ
SWAを使ってローカルからデプロイすることでモバイル環境やTeamsでのデバッグが捗ります。
同じような悩みでお困りの方はぜひお試しください！
Discussion