Zenn
😽

Turborepoでの環境変数の受け渡し方法

2023/06/16に公開
Next.js
Vercel
Turborepo
tech

はじめに

Turborepo に含まれる各ワークスペースへ、ルートで設定された環境変数を受け渡す方法を紹介します。

以下がソースコードです。

https://github.com/hayato94087/turborepo-nextjs-env-sample

環境を構築

今回は、以下のリポジトリを git clone し、turborepo-nextjs-env-sample というい名称で GitHub のリポジトリを作成し、変更内容をプッシュします。Vercel のアプリケーションも turborepo-nextjs-env-sample というい名称で作成しデプロイします。

https://github.com/hayato94087/turborepo-nextjs-sample

$ git clone https://github.com/hayato94087/turborepo-nextjs-sample.git
$ cd turborepo-nextjs-sample
$ git remote set-url origin https://github.com/hayato94087/turborepo-nextjs-env-sample.git
$ git branch -M main
$ git push -u origin main

環境変数ファイルを作成

環境変数ファイル .env.local を作成し、環境変数を記載します。

$ touch .env.local
.env
DEBUG_MESSAGE="HELLO WORLD"

Vercel の環境変数も設定します。

  1. Settings をクリック
  2. Environment Variables をクリック
  3. Key に DEBUG_MESSAGE を入力
  4. Value に HELLO WORLD を入力
  5. Save をクリック

turbo の設定を修正

turbo コマンドの設定は turbo.json に記載されています。（参考）

今回は環境変数を設定するために、以下のように修正します。

  • globalEnv に環境変数のキーを指定します。
turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
+  "globalEnv": ["DEBUG_MESSAGE"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

dotenv-cliのインストール

環境変数を使うために、dotenv-cli をルートにインストールします。（参考）

--workspace-root オプションを付けることで、モノレポのルートにパッケージをインストールできます。

$ pnpm add -D dotenv-cli --workspace-root

package.jsonを修正

dotenv-cli を使って、環境変数を読み込み、turbo コマンドでタスクを実行できるようにします。

package.json
{
  "private": true,
  "scripts": {
-   "build": "turbo run build",
+   "build": "pnpm with-env turbo run build",
-   "dev": "turbo run dev",
+   "dev": "pnpm with-env turbo run dev",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+   "with-env": "dotenv -e .env.local --"
  },
  "devDependencies": {
    "@turbo/gen": "^1.9.7",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "prettier": "^2.5.1",
    "turbo": "latest"
  },
  "packageManager": "pnpm@7.15.0",
  "name": "turborepo-nextjs-sample"
}

page.tsxを修正

apps/web/app/page.tsx
import { Button, Header } from "ui";

export default function Page() {
+  console.log(process.env.DEBUG_MESSAGE);
  return (
    <>
      <Header text="Web" />
      <Button />
+     <div>{process.env.DEBUG_MESSAGE}</div>
    </>
  );
}

変更内容をプッシュします。

$ git checkout main
$ git add .
$ git commit -m "update"
$ git push origin main

ローカルで実行

ローカルで実行させます。

$ pnpm dev --filter=web

http://localhost:3000/ をブラウザで環境変数が出力されていることを確認します。

サーバログへの出力も確認できます。

web:dev: HELLO WORLD

Vercelで実行

Vercel でもデプロイされているので確認できます。

まとめ

Turborepo に含まれる各ワークスペースへ、ルートで設定された環境変数を受け渡す方法を紹介しました。

Discussion