Remix v2 でクライアントサイドに環境変数を渡す方法

2024.9.25

実践と知見

こんにちは。Gaji-Laboの村上です。
使われることが増えてきた Remix v2 で、クライアントサイドに環境変数を渡す方法について紹介します。
通常、環境変数はサーバーサイドでのみ使用されるべきですが、特定のケースではクライアントサイドで使用したい場合もあります。

ただし、クライアントサイドに渡す情報は第三者に見られる可能性があるため、非常に慎重に取り扱う必要があります。
APIキーやデータベースの接続情報などの機密情報は、絶対にクライアントサイドに渡さないでください。

1. window オブジェクトと dangerouslySetInnerHTML を使う

まず最初に、公式ドキュメントでも推奨されている window オブジェクト と dangerouslySetInnerHTML を使う方法を紹介します。
これは、ルートの loader 関数から環境変数を返し、インラインスクリプトを使用してクライアントサイドでグローバルに利用可能にする方法です。

1-1. .env ファイルの例

以下のような環境変数が .env ファイルに定義されていると仮定します。

HOGE_KEY="xxxxxxxhoge"
FUGA_KEY="xxxxxxxfuga"

1-2. ルートの loader からクライアントサイドに環境変数を ENV として渡す

次に、loader 関数を使用して、これらの環境変数を ENV として渡します。

export async function loader() {
  return json({
    ENV: {
      HOGE_KEY: process.env.HOGE_KEY,
      FUGA_KEY: process.env.FUGA_KEY,
    },
  });
}

1-3. ENV を window オブジェクトに設定

クライアントサイドで useLoaderData と dangerouslySetInnerHTML を使用して、ENV を window オブジェクト に設定します。

export async function loader() {
  return json({
    ENV: {
      HOGE_KEY: process.env.HOGE_KEY,
      FUGA_KEY: process.env.FUGA_KEY,
    },
  });
}

export function Root() {
  const data = useLoaderData<typeof loader>();
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <script
          dangerouslySetInnerHTML={{
            __html: `window.ENV = ${JSON.stringify(
              data.ENV
            )}`,
          }}
        />
        <Scripts />
      </body>
    </html>
  );
}

1-4. window.ENV を確認する

ルート以外のページで window.ENV を確認してみましょう。
クライアントサイドでしかアクセスできないため、useEffect フックや if (typeof document !== "undefined")を使用して window.ENV の値が利用可能なタイミングでアクセスします。

export default function Foo() {
  if (typeof document !== "undefined") {
    console.log(window.ENV)
  }

  return (
    <div>
      <h1>foo</h1>
    </div>
  )
}

ページを表示すると、HOGE_KEY と FUGA_KEY がコンソールに表示されます。

1-5. window.ENV の型エラーを解消する

window.ENV を使用すると、TypeScript で次のような型エラーが発生します。
プロパティ 'ENV' は型 'Window & typeof globalThis' に存在しません。
これを解消するために、次のように型定義を行います。

interface Window {
  ENV: {
    HOGE_KEY: string;
    FUGA_KEY: string;
  };
}

これにより、TypeScriptでの型エラーが解消されます。

参考

https://remix.run/docs/en/main/guides/envvars
https://remix.run/docs/en/main/guides/constraints

2. useRouteLoaderDataを使う

2つ目の方法は、公式の GitHub の Discussions で提案されている、useRouteLoaderData フックを使う方法です。
window オブジェクトを使うのではなく、loader から返されるデータにアクセスするため、クライアントサイドの安全性を少し向上させたい場合に役立ちます。
特に、dangerouslySetInnerHTML を避けたい場合におすすめです。

2-1. ルートの loader からクライアントサイドに ENV を返す

まず、.envファイルに環境変数を設定し、loader 関数で環境変数を返します。
この部分は、「1. window.ENV と dangerouslySetInnerHTML を使う方法」と同じです。

HOGE_KEY="xxxxxxxhoge"
FUGA_KEY="xxxxxxxfuga"

export async function loader() {
  return json({
    ENV: {
      HOGE_KEY: process.env.HOGE_KEY,
      FUGA_KEY: process.env.FUGA_KEY,
    },
  });
}

2-2. useRouteLoaderData で ENV を利用する

ルート以外のページでも、useRouteLoaderData を使ってルートの loader から渡された環境変数にアクセスできます。
これにより、各ページで直接 ENV にアクセスできるため、環境変数を使いやすくなります。

import { useRouteLoaderData } from "@remix-run/react";
import type { loader as rootLoader } from "~/root";

export default function Foo() {
  const rootData = useRouteLoaderData<typeof rootLoader>("root")!;
  console.log(rootData.ENV);

  return (
    <div>
      <h1>foo</h1>
    </div>
  )
}

参考

https://github.com/remix-run/remix/discussions/8704#discussioncomment-8397380

3. Vite を使っている場合

Remix v2 は、デフォルトでビルドツールとして Vite を採用しています。
そのため、Vite を使っている場合は、環境変数の名前に VITE_ という接頭辞をつけることで、import.meta.env を使って環境変数にアクセスできます。

3-1. .env ファイルの設定

Vite ではクライアントサイドに渡したい環境変数に、接頭辞 VITE_ を設定します。

VITE_HOGE_KEY="xxxxxxxhoge"

3-2. クライアントサイドでの環境変数の使用

export default function Foo() {
  console.log(import.meta.env.VITE_HOGE_KEY);

  return (
    <div>
      <h1>foo</h1>
    </div>
  );
}

これにより、環境変数 VITE_HOGE_KEY の値がコンソールに表示されます。

参考

https://ja.vitejs.dev/guide/env-and-mode

4. root の ErrorBoundary で環境変数を使いたい場合

ErrorBoundary 内では、useLoaderData や useRouteLoaderData を使って、環境変数にアクセスすることはできません。
これは、useLoaderDataがErrorBoundary内で動作しないことや、useRouteLoaderData が undefined を返す場合があるためです。

それでも、root の ErrorBoundary 内で環境変数を使いたい場合には、公式の GitHub の Discussions で提案されているプロジェクトが参考になります。
https://github.com/kiliman/remix-global-data

具体的なユースケースとして、エラーハンドリングが必要な場合や、エラーページでも特定の環境変数を参照する必要がある場合に、このアプローチが役立ちます。

参考

https://github.com/remix-run/remix/discussions/9043
https://github.com/kiliman/remix-global-data

最後に

今回紹介した複数の方法を活用することで、状況に応じて最適な環境変数の管理・使用が可能になります。

Gaji-Labo はスタートアップに頭数や技術だけを提供するのではなく、チームの一員として成長を担うことを価値としています。
その価値を出せるよう(セキュリティを配慮するのは当然として)、この記事に書いたような状況に応じた判断や最適な実装ができる引き出しを増やしていきたいと思います。

そんなふうに専門技術を軸にさまざまなスタートアップへチームワークを提供したいエンジニアやデザイナーの方はとてもGaji-Labo に向いていると思います。
カジュアル面談でお話ししませんか？いますぐ転職を考えていない方でも歓迎です！

Gaji-Labo フロントエンドエンジニア向けご案内資料

Gaji-Labo は Next.js 開発の実績と知見があります

フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。

「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」

フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする！

投稿者 Sena Murakami

アシスタントフロントエンドエンジニア。 Webマーケティング会社でマークアップエンジニアとして経験を積み、Gaji-Laboに入社。デザインの意図を汲み取ったマークアップが得意です。チームを俯瞰してリードできるエンジニアになることが目標です。趣味はバドミントンやバレーボール、キャンプなど。

Remix v2 でクライアントサイドに環境変数を渡す方法

1. window オブジェクトと dangerouslySetInnerHTML を使う

1-1. .env ファイルの例

1-2. ルートの loader からクライアントサイドに環境変数を ENV として渡す

1-3. ENV を window オブジェクトに設定

1-4. window.ENV を確認する

1-5. window.ENV の型エラーを解消する

参考

2. useRouteLoaderDataを使う

2-1. ルートの loader からクライアントサイドに ENV を返す

2-2. useRouteLoaderData で ENV を利用する

参考

3. Vite を使っている場合

3-1. .env ファイルの設定

3-2. クライアントサイドでの環境変数の使用

参考

4. root の ErrorBoundary で環境変数を使いたい場合

参考

最後に

Gaji-Labo フロントエンドエンジニア向けご案内資料

Gaji-Labo は Next.js 開発の実績と知見があります

関連

タグ

投稿者 Sena Murakami

Remix v2 でクライアントサイドに環境変数を渡す方法

1. window オブジェクト と dangerouslySetInnerHTML を使う

1-1. .env ファイルの例

1-2. ルートの loader からクライアントサイドに 環境変数を ENV として渡す

1-3. ENV を window オブジェクトに設定

1-4. window.ENV を確認する

1-5. window.ENV の型エラーを解消する

参考

2. useRouteLoaderDataを使う

2-1. ルート の loader からクライアントサイドに ENV を返す

2-2. useRouteLoaderData で ENV を利用する

参考

3. Vite を使っている場合

3-1. .env ファイルの設定

3-2. クライアントサイドでの環境変数の使用

参考

4. root の ErrorBoundary で環境変数を使いたい場合

参考

最後に

Gaji-Labo フロントエンドエンジニア向けご案内資料

Gaji-Labo は Next.js 開発の実績と知見があります

関連

タグ

投稿者 Sena Murakami

合わせて読みたい記事

Remix v2 の JsonifyObject と r…

Remix v2 の JsonifyObject と S…

Node.js v18 にアップデートしたら gatsb…

Next.js+CSS Modules(scss含む) …

最近の記事

OOUI の概念モデリングから、議論の起点を作る

Spectral を使って OpenAPI のエラーチェ…

MeetingBarの全画面通知でオンラインミーティング…

OpenAPI で動的なキーを設定する

1. window オブジェクトと dangerouslySetInnerHTML を使う

1-2. ルートの loader からクライアントサイドに環境変数を ENV として渡す

2-1. ルートの loader からクライアントサイドに ENV を返す