開発をする中で、expressからmockを返したり、localのserverに繋いだり、本番環境に繋いでテストしたりと環境変数を使い分けたい時があると思います。

今回はNuxt.jsでコマンドで環境変数を使い分けたい時にどうするか？について記述いたします。

著者がzenn側で記述した、以下記事の環境変数設定方法になります。

色々なやり方がありますので、あくまで一例としてご拝読頂ければと思います。

環境

PC: MacBook Pro (Intel Core 2016)
OS: macOS Montery12.0.1
フロントエンド:
- Node.js 16.9.1
- npm 7.21.1
- Nuxt.js 2.15.8
- TypeScript 4.5.4

ライブラリのインストール

OSに関係なく環境変数を切り分けられるように、 cross-env をインストールします。

npm i -D cross-env

ファイルの準備

続いて、コマンドごとに読み込む環境変数の値を変えたいのでファイルを作成します。

今回は以下の3ファイルをプロジェクトフォルダ直下に作成いたします。

touch .env.local.js
touch .env.development.js
touch .env.production.js

ファイルの中身を作成

中身は適宜変更されて下さい。

.env.local.js

module.exports = {
  API_URL: 'http://localhost:8881',
};

.env.development.js

module.exports = {
  API_URL: 'http://localhost:8000',
};

.env.production.js

module.exports = {
  API_URL: 'https://hoge.com',
};

それぞれの役割

作成したファイルの役割は以下の通りで想定しています。

.env.local.js： expressから固定のmockデータを返してフロントで完結させる
.env.development.js： LaravelやJavaなどlocalでserverを立てて繋ぎこみ確認をする
.env.production.js：本番環境へ繋ぐ

nuxt.config.jsの修正

nuxt.config.js を以下のように修正します。

nuxt.config.js

const deploymentEnv = process.env.NUXT_ENV_DEPLOYMENT || 'development';
const environment = require(`./.env.${deploymentEnv}.js`);

export default {
  env: environment,
  axios: { proxy: true },
  proxy: {
    '/api': `${environment.API_URL}`,
  },

proxyの設定もしているので、CORS対策も考慮しています。

package.jsonのscriptsを修正

package.jsonのscriptsを以下のように修正します。

package.json

"scripts": {
  "local": "cross-env NUXT_ENV_DEPLOYMENT=local nuxt & npm run mock:api",
  "dev": "cross-env NUXT_ENV_DEPLOYMENT=development nuxt",
  "prod": "cross-env NUXT_ENV_DEPLOYMENT=production nuxt",
  "mock:api": "node ./infrastructure/mock/index.ts",
},

簡単に解説いたしますと、cross-env でcross-envを叩いて、 NUXT_ENV_DEPLOYMENT=local の部分がそれぞれの環境変数になります。

例えば、npm run local を叩いた時は、 process.env.NUXT_ENV_DEPLOYMENT === 'local' となります。

.gitignoreの設定

そして、リポジトリにpushされないように .gitignore に以下を追加しておきましょう。

.env.*

これで、それぞれのコマンドを叩いた時は以下のようになります。

npm run local > API_URL = 'http://localhost:8881'
npm run dev > API_URL = 'http://localhost:8000'
npm run local > API_URL = 'https://hoge.com'

以上でNuxtでの環境変数の使い分けの一例でした。

ご拝読有難うございました。

Nuxtで環境変数を使い分ける

環境