ReactとRailsアプリケーションにおける環境変数を無理やり共通化したかった

背景

この記事では、Reactをフロントエンドとして、Railsをバックエンドとして使用するアプリケーションの例を取り上げ、両者間での環境変数の共有方法について説明します。

問題の概要

ReactとRailsの両方で使用する環境変数がある場合、例えばAPIのエンドポイントやOAuthのクライアントIDなどがある場合に、これらの環境変数の管理が同期的である方が好ましいよな？(個人的な意見)と思いました。

考えた解決策

バックエンド（Rails）の .env ファイルから環境変数を読み取り、
それをフロントエンド（React）用の .env ファイルに転送するシェルスクリプトの作成。
この方法により、環境変数の一元管理が可能になりそうだと思った。

スクリプトの実装

# バックエンドの .env ファイルのパス
BACKEND_ENV_PATH="./backend/.env"

# フロントエンドの .env ファイルのパス
FRONTEND_ENV_PATH="./frontend/.env"

# フロントエンドの .env ファイルをクリアする
> $FRONTEND_ENV_PATH

# バックエンドの .env ファイルを読み込み、すべての変数をフロントエンドの .env に書き出す
while IFS= read -r line || [[ -n "$line" ]]; do
  # 空行またはコメント行を無視する
  if [[ ! $line =~ ^\# ]] && [[ ! -z $line ]]; then
    line="REACT_APP_$line"
    echo "$line" >> $FRONTEND_ENV_PATH
  fi
done < $BACKEND_ENV_PATH

使用方法

上記のスクリプトを env_sync.sh という名前で保存。
スクリプトに実行権限を付与。スクリプトを実行して .env ファイルを同期。

注意点

スクリプトは開発環境でのみ使用し、本番環境への直接の適用は避ける。
環境によって異なる環境変数を適宜管理する。

まとめ

ReactとRailsを用いたアプリケーション開発において、環境変数を効率的に共有するための方法として、シェルスクリプトを利用したアプローチを考えました。この考え方はきっと正しくないので、突っ込んでもらえると助かります。
この方法で環境変数の一元管理を可能にしたかったです。