Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
159
Help us understand the problem. What is going on with this article?
@TakahiRoyte

Nuxtでcross-envを使い環境ごとに環境変数を分ける

More than 1 year has passed since last update.

cross-envはNodeのライブラリでnpmスクリプト実行時に任意の環境変数を設定できます。
これを利用して、開発(ローカル)、検証、本番環境の設定切り替えが可能なビルドを実現します。

各環境の英語と日本語の対応付は以下です。

  • 開発環境 = development environment
  • 検証環境 = staging environment
  • 本番環境 = production environment

利用するファイルは以下です。すべてディレクトリ直下に置いています。

  • env.development.js (開発環境用ファイル)
  • env.staging.js (検証環境用ファイル)
  • env.production.js (本番環境用ファイル)
  • package.json (環境変数設定を含んだnpmスクリプトを記述するファイル)
  • nuxt.config.js (環境変数に応じた設定ファイルを読み込む)

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

まずプロジェクトのディレクトリでcross-envをインストールします。

$ npm install --save cross-env

各種設定ファイルの作成

JavaScriptファイルで作ります。
今回はAPIのベースURLを定義します。値は適宜読み替えてください。

  • env.development.js
module.exports = {
  apiBaseUrl: 'http://localhost:8000'
}
  • env.staging.js
module.exports = {
  apiBaseUrl: 'http://stg.your-api.com/api'
}
  • env.production.js
module.exports = {
  apiBaseUrl: 'http://your-api.com/api'
}

package.jsonのnpmスクリプトの記載

npmスクリプトのbuildstartを、開発、検証、本番環境用に3つに分けます。そして先頭にcross-env NODE_ENV=XXXXXXと足すことで環境変数NODE_ENVを切り替えコマンド実行させます。
コマンドは、開発用にbuild、検証用にbuild:stg、本番用にbuild:prodといった形に分けています。(開発がbuild:devでないのはもともとあるbuildコマンドを消すことで発生する影響のリスク回避です)

{
  ...

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

  ...

}

nuxt.config.jsの修正

nuxt.config.jsではnpmスクリプトで渡された変数を元に読み込むファイルを切り替えます。
テンプレートリテラルを使い、${process.env.NODE_ENV}の部分で読み込む環境を指定します。
その後、Nuxtの設定の1つであるenvプロパティを利用してアプリで利用可能な値として定義します。

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

module.exports = {

  ...

  env: envSet

  ...

}

envで利用した値の利用方法

env プロパティ(Nuxtドキュメント)

コード内でprocess.env.apiBaseUrlと定義することで値を利用できます。

注意点

2018/06/15現在、日本語ドキュメントでは翻訳されていないのですが、Nuxtのprocess.envは少しクセがあります。というのは、上記の設定でprocess.env.apiBaseUrlは問題なく取得できるのですがprocess.envは空のオブジェクトとして認識される点です。

これはNuxtがWebpack内でprocess.env.XXXXXXを実体として変換した状態でビルドを行うからです。

ビルド前

if (process.env.test == 'testing123')

ビルド後

if ('testing123' == 'testing123')

なのでコード内でprocess.envは利用しないで、process.env.XXXXXまで利用するようご注意ください。

159
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
TakahiRoyte
Continuous learning engineer, values lean Agile, Lean, User-centric mindsets.
tdc-soft
TDCソフトは、自主自立の精神のもと、自由な発想を育み、情報技術の力をもって社会に貢献するビジョンを持った企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
159
Help us understand the problem. What is going on with this article?