Vite + Reactプロジェクト上でNetlifyの環境変数が取得できない

発生した問題

Netlifyというホスティングサービスを用いて、Vite(React)プロジェクトを展開しており、メンテナンス中の画面の切り替えをNetlify内の環境変数によって制御しようと色々と試したが、ソースコード上でNetlify内の環境変数を取得できなかった。

動作環境

package.json

...
"dependencies": {
    "@emotion/react": "^11.13.5",
    "@emotion/styled": "^11.13.5",
    "@fontsource/material-icons": "^5.1.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.9",
    "@mui/material": "^6.1.9",
    "@reduxjs/toolkit": "^2.5.0",
    "@storybook/cli": "^8.4.7",
    "@testing-library/jest-dom": "^6.6.3",
    "konva": "^9.3.18",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.53.2",
    "react-konva": "^19.0.1",
    "react-redux": "^9.2.0",
    "use-image": "^1.1.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/addon-themes": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.1",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-perfectionist": "^4.3.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "eslint-plugin-sort-keys": "^2.3.5",
    "eslint-plugin-storybook": "^0.11.1",
    "globals": "^15.12.0",
    "happy-dom": "^15.11.7",
    "husky": "^9.1.7",
    "lint-staged": "^15.2.10",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
    "storybook": "^8.4.7",
    "ts-node": "^10.9.2",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.16.0",
    "vite": "^6.0.1",
    "vite-tsconfig-paths": "^5.1.4",
    "vitest": "^2.1.6"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ],
    "rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    }
  },
  "lint-staged": {
    "*.ts": "eslint --fix",
    "*.tsx": "eslint --fix",
    "*.{ts,tsx,js,jsx}": "prettier --write"
  }

試したこと

特定の環境変数に設定する

Reactのプロジェクト、という観点から考え、色々と調べたところ

Netlifyでは、環境変数のキーが NETLIFY_ または REACT_APP_ で始まる場合に
ビルド時に自動的に公開される。

という旨の記載が、公式ドキュメントまたは他有志サイトにあったため実践した。
が、現状に変化はなかった。

解決方法

環境変数の取得を以下の通りに行っていた。

  const displayState = process.env.REACT_APP_DISPLAY_STATE;

この取得方法だと、2つの観点からVite上で環境変数を取得できないことがわかった。

1. 環境変数のプレフィックスは、Netlifyならびにソースコード上でVITE_を用いていない
2. 環境変数の取得方法として、import.meta.envを用いていない

これを踏まえて、以下の通りに修正したところ、ちゃんとNetlify上で設定している環境変数が取得できた。

  const displayState = import.meta.env.VITE_DISPLAY_MODE;

補足

ローカル上の.envファイルの値はimport.meta.envでなくても取得できていたため、その点で原因究明が遅れてしまった。
また、従来通りprocess.envにて取得する方法もあるようなので、私自身はそちらに合わせています。

参考

先人が歩んだ知識の道に感謝…🙏