JMDC TECH BLOG

JMDCのエンジニアブログです

GitHub PR毎の環境をUIで区別しやすくしました!

こんにちは。@dtaniwakiこと谷脇です。github.com

私は現在は産業保健向けのサービス「Pep Up for WORK」の開発に携わっています。
Pep Up for WORKは社員1人1人を元気にし、活気ある組織作りを実現することを目的としたサービスです。

去年書いたGitHub PR毎に独立環境を構築の記事なのですが、チーム内でだいぶ市民権を得まして、今はほとんどの動作確認作業をdev-nで行うようになりました。techblog.jmdc.co.jp

一方で、dev-n環境が乱立することにより動作確認環境の間違いが発生するようになってしまいました。
特に記事の最後に紹介しているフロントエンドとバックエンドで任意のPRを組み合わせると、どの組み合わせの画面を見ているかパッと見わからず混乱します。
そのため、UIで環境を区別しやすくしてみたので紹介します。

まず、管理画面の構築にActive Adminを使っているのですが、こちらは私が10年前に作ったrack-dev-markというgemを使えば簡単に実現できます。github.com

このgemを入れてデプロイ時の環境変数をセットするだけで、以下のようにPR番号をUIに出せるようになります。

管理者向けページ(Railsモノリス)

このgemは当初はRailsモノリス用に作ったのですが、実はSPAにも応用できます。
X-Rack-Dev-Mark-EnvというHTTP Response Headerを自動で挿入してくれるので、フロントエンドでAPI実行後のフック等でこの値を読み込み、バックエンドのPR番号として、フロントエンドのビルド時にセットしたフロントエンドのPR番号と合わせてUIに出します。

ユーザ向けページ(SPA)

CORSの場合はAccess-Control-Expose-Headersがないと値を読めないので注意してください。
*UI上で邪魔な時もあるので、クリックしたら消えるようにしておくのがコツです。

これで複数の環境を跨いで作業している時でも、自分が今どの環境を触ってるか見失わなくなりました。
特に、本番環境と間違えて作業してしまったら大変なことになりますからね!
複数環境使い分けている方は是非トライしてみてください。

 

最後に、Pep Up for WORKを一緒に開発していただける方も募集しているので、こちらもぜひご覧ください!hrmos.cohrmos.co