Nuxt.jsで環境変数を設定する

こんにちは。アイレットデザイン事業部のフロントエンドエンジニアの須永です。アイレットデザイン事業部ではInside UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回はNuxt.jsで環境変数を使うための設定をします。

本番環境や検証環境、開発環境など複数の環境で開発する際、APIのパスなどを環境によって使い分けたい時があると思います。
その時にこれからご紹介していく設定をすることで、環境による使い分けをすることが出来ます。

cross-envをインストール

cross-envを使うことでビルド時に環境変数を設定することが出来ます。

yarn add cross-env

envファイルを作成

ディレクトリ直下に各環境ごとの設定ファイルを作成します。

・env.production.js（本番環境）

module.exports = {
apiBaseUrl: 'http://example.com/api'
// 本番環境用のAPIパス
}

・env.staging.js（検証環境）

module.exports = {
apiBaseUrl: 'http://stg-example.com/api'
// 検証環境用のAPIパス
}

・env.development.js（開発環境）

module.exports = {
apiBaseUrl: 'http://localhost:8000/api'
// 開発環境用のAPIパス
}

nuxt.configにenv設定を入れる

上記の各環境用ファイルを呼び出すための設定をnuxt.config.jsに追加します。

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

export default {
〜
env:envSet
}

※NODE_ENVとはNode.js で使われる環境変数の名前

package.jsonにスクリプトを記載

build 、start 、 generateをそれぞれの環境で使えるようにスクリプトを記載します。

{
〜
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
"build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
"build:dev": "cross-env NODE_ENV=\"development\" nuxt build",
"start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
"start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
"start:dev": "cross-env NODE_ENV=\"development\" nuxt start",
"generate:prod": "cross-env NODE_ENV=\"production\" nuxt generate",
"generate:stg": "cross-env NODE_ENV=\"staging\" nuxt generate",
"generate:dev": "cross-env NODE_ENV=\"development\" nuxt generate"
},
〜
}

env設定を使用してみる

設定した値を呼び出すには process.env.＊＊＊ のように記述します。

console.log(process.env.apiBaseUrl)
// 環境によって異なる値が表示される

以上の設定をすることで、環境変数を使い分けることが出来ます。
Nuxt.jsで環境を作っていく上での参考になれば幸いです。