[小ネタ] React の index.html から.env ファイルを参照する

Reactのindex.htmlから環境変数を参照する

#React

2022.02.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ケーススタディ

index.html に Google Analytics のタグを DEVとSTG の二つの環境別にそれぞれ埋め込む必要がありました。

解決方法

環境変数を格納する.envファイルをそれぞれ作成します。 React の環境変数の命名規則として頭にREACT_APPをつける必要があるのでお作法に従います。

.env.development

REACT_APP_GA_TAG_MANAGER_ID=GTM-N34****

.env.stg

REACT_APP_GA_TAG_MANAGER_ID=GTM-KFD****

index.html

次に環境変数を参照したい html ファイルで%<変数名>%の形式で文字列として参照します。具体的には以下のような実装になりました。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ...meta tags and styles are omitted -->

    <!-- Google Tag Manager -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({"gtm.start": new Date().getTime(), event: "gtm.js"});
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != "dataLayer" ? "&l=" + l : "";
        j.async = true;
        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
        f.parentNode.insertBefore(j, f);
      })(
        window,
        document,
        "script",
        "dataLayer",
        "%REACT_APP_GA_TAG_MANAGER_ID%",
      );
    </script>
    <!-- End Google Tag Manager -->
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript
      ><iframe
        src="https://www.googletagmanager.com/ns.html?id=%REACT_APP_GA_TAG_MANAGER_ID%"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      ></iframe
    ></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="root"></div>
  </body>
</html>