Nuxt3でprocess.envに環境データを渡す方法 ~ node.jsのprocess確認 ~
はじめに
環境変数を適切に管理することで、開発環境と本番環境で異なる設定を簡単に切り替えたり、機密情報をコードベースから分離してセキュリティを向上させたりすることができます。しかし、環境変数の設定方法や管理手法にはいくつかのアプローチが存在し、それぞれにメリットとデメリットがあります。
この記事では、process.envにデータを渡す2つの主要なアプローチについて詳しく解説します。
A: Node.jsの実行環境のenvにデータを渡す
システムレベルやデプロイ時に環境変数を設定し、アプリケーションが起動時にこれらの変数をprocess.envから取得する方法です。
B: dotenvを利用してプロセス毎にprocess.envにデータを渡す
dotenvパッケージを使用して、アプリケーション起動時に.envファイルから環境変数を読み込み、process.envに設定する方法です。
それぞれの設定方法を理解して、用途に応じて使いこなせるようにしたいです。
プロセスとは
プログラムにおけるプロセスとは、プログラムの実行中の状態や、プログラムの実行単位を指します。
プログラムがオペレーティングシステム（OS）からメモリ領域などの割り当てを受けて処理を実行している状態です。
Node.jsにおけるprocessとは
processは、Node.jsのグローバルオブジェクトであり、現在実行中のNode.jsプロセスに関する情報や制御機能を提供します。Nuxt.jsはサーバーサイドレンダリング（SSR）をサポートするため、processオブジェクトを活用して環境変数やプロセス情報にアクセスします。
process.envの情報は何ものか
process.envは、実行中のNode.jsアプリケーションの環境情報です。processは、env情報も含めた様々な情報を含んでいます。
Nuxtアプリケーション実行時でもこのprocessを通じて、実行中のNode.jsアプリケーションの環境情報を取得することが可能です。
process.envにデータを渡す2つのアプローチ
環境変数は、アプリケーションの設定や機密情報を管理するために広く利用されています。Node.jsおよびNuxt.jsアプリケーションでは、process.envを通じてこれらの環境変数にアクセスできます。以下では、process.envにデータを渡す2つの主要なアプローチについて詳しく説明します。
A:node.jsの実行環境のenvにデータを渡す
Node.jsの実行環境自体に環境変数を設定する方法です。この方法では、システムレベルやデプロイ時に環境変数を設定し、アプリケーションが起動時にこれらの変数をprocess.envから取得します。
シェルから直接設定する
export NUXT_APP_API_BASE_URL_SERVER=http://localhost:80/api
export NUXT_APP_API_BASE_URL_CLIENT=http://localhost:8080
node app.js
dockerコンテナ起動時に環境変数を設定（dockerコンテナ利用の場合）
※docker-compose.ymlを省略して記載
version: '3.8'
services:
nuxt:
image: your-nuxt-image
environment:
NUXT_APP_API_BASE_URL_SERVER: http://localhost:80/api
NUXT_APP_API_BASE_URL_CLIENT: http://localhost:8080
ports:
- "3000:3000"
networks:
- app-network
B:dotenvを利用してproccess毎にprocess.envにデータを渡す
dotenvパッケージを使用して、アプリケーション起動時に.envファイルから環境変数を読み込み、process.envに設定する方法です。Nuxt3では、デフォルトでdotenvの利用設定がされているため、ルートディレクトリに.envファイルが存在し、NUXT_ OR NITRO_ プレフィックス で変数を指定すればprocess.envに変数データを格納してくれます。
# .envファイルの例
NUXT_APP_API_BASE_URL_SERVER=http://localhost:80/api
NUXT_APP_API_BASE_URL_CLIENT=http://localhost:8080
process.envを確認してみよう
A:node.jsの実行環境のenvにデータを渡した場合
A-1:env情報を出力
アプリケーション実行環境でenv情報を確認 ※コンテナ利用している場合は、コンテナ内部で
printenv
下記のようなenv情報が出力されます。
NUXT_APP_API_BASE_URL_SERVER・NUXT_APP_API_BASE_URL_CLIENTは、
NODE_VERSION=18.17.1
HOSTNAME=
YARN_VERSION=1.22.19
SHLVL=1
HOME=/root
TERM=xterm
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
HOST=0.0.0.0
PWD=/nuxt/app
TZ=Asia/Tokyo
NUXT_APP_API_BASE_URL_SERVER=http://localhost:80/api
NUXT_APP_API_BASE_URL_CLIENT=http://localhost:8080
A-2:Node.js REPLを利用して確認
アプリケーション実行環境でenv情報を確認 ※コンテナ利用している場合は、コンテナ内部で
node
> console.log(process.env.NUXT_APP_API_BASE_URL_SERVER);
http://localhost:80/api
> console.log(process.env.NUXT_APP_API_BASE_URL_CLIENT);
http://localhost:8080
B:dotenvを利用してproccess毎にprocess.envにデータを渡した場合
B-1:env情報を出力
こちらでは確認することが出来ません。なぜなら、Nodeの環境変数には含まれていないからです。dotenvを利用しているのでランタイム実行時に、dotenvを利用してprocess.envに情報を書きこんいます。
B-2:Node.js REPLを利用して確認
こちらも「A-2:Node.js REPLを利用して確認」同様に確認しようとしても、出力することが出来ません。
REPL セッションでは、dotenv をインポートしていないため、.env ファイルは読み込まれません。dotenv パッケージは、それをインポートし config() を呼び出したファイルのプロセス内でのみ .env ファイルを読み込みます。
node
> const dotenv = require('dotenv');
> dotenv.config();
> console.log(process.env.NUXT_APP_API_BASE_URL_SERVER);
http://localhost:80/api
> console.log(process.env.NUXT_APP_API_BASE_URL_CLIENT);
http://localhost:8080
最後に
node.js周り、まだまだ勉強中なので修正すべき事項などがあればコメント頂けますと幸いです。
参考資料
Node.js process.env
nuxt3 runtimeconfig
dotenv
Discussion