ステージング環境を作ろうと思った経緯
昨日、記念すべき（？）初投稿の記事を公開しましたが、公開後に早速問題発覚しました。 公開した記事をiPhoneで表示確認したところ、サイト上のテキストがすべて（ゴシック体になる想定だったが）明朝体になってしまっていました。（スクショ撮っておけばよかった…次から気をつける）
一応PC/SP両方で見れるように画面を作っており、Chromeのデベロッパーツールで表示確認などもしていました。デベロッパーツール上ではPCもSPもゴシック体で表示されていたためヨシ！で公開してしまいましたが、iPhoneの実機だと明朝体になってしまっていました。
想定外のフォントが表示されてしまった原因は、すべてのテキストに全くfont-familyを設定していなかったことです（当然）。font-familyを指定しなかった場合、フォントはブラウザに任せるかんじになってしまうので、公開前に検証をしたmacOSのChromeだとゴシック体で表示されて、公開後に検証したiOSのChromeやSafariだと（おそらくヒラギノ）明朝で表示されたということですね。
公開してからじゃないと検証できない事項があるのダメだな…と思いしばらく悩んだのですが、「ステージング環境用意すればいいやん」と気付けました。ふだんから本業で散々やってることなのになぜすぐ思いつかなかったのか…。
Netlifyでステージング環境を用意する
NetlifyとGithubとを連携させると、Githubリポジトリのmasterブランチにpushもしくは他ブランチをmergeしたタイミングで変更が自動的にビルド・デプロイされます。
Netlifyでは、master以外のブランチを別の環境にデプロイすることもできます。
NetlifyのSite overviewからSite settings > Build & deploy > Continuous Deployment > Deploy contextsから、master以外にデプロイしたいブランチを設定することができます。
この設定は、新たにdevブランチをデプロイするようにする設定です。
修正→PR作成→実機で確認
1. font-familyが設定されていない件を修正する
Reactコンポーネントに下記のスタイルをあてます。
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;2. 変更をdevブランチにmergeする
業務で慣れていることもあり、一人開発ではありますがGit flowでブランチ運用しています。上記の修正はfeature/xxxxxxみたいなブランチでPRを作り、devにマージします。
変更がdevにマージされたら、devをmasterにマージするPRを作ります。すると、GithubのPRの画面に下記のようにビルド・デプロイの進捗が表示されます。（merge→PR closeしてしまってから記事を書いているので、また画像がない…；；参考サイトから引用しています）
画像の赤矢印のリンクを踏むと、devをビルド・デプロイしたステージング環境にアクセスできます。
3. 実機で確認する
Chromeの拡張でQRコード表示してiPhoneからステージング環境にアクセスするなどすれば、確認できます。
めでたしめでたし。
[余談]アイキャッチ画像作成が楽勝だった話
前回のポストに「サムネイル用意するのめんどくさい…」と書きましたが、Canvaっていうサービス使ったら楽勝でした。素材もたくさんあるし文字も簡単に入れられるし、最高やんけ！