nuxtjs/cross-envを利用して環境ごとに設定を変更する

参考ページ

github.com

インストール

yarn add cross-env

環境ごとの設定ファイルを作成する

• configフォルダを作成して、その中に各環境の設定ファイルを作成する

-config/env.development.jsファイルを作成して下記のように記載する

module.exports = {
    apiBaseUrl: 'https://dev.example.com',
}

-config/env.staging.jsファイルを作成して下記のように記載する

module.exports = {
    apiBaseUrl: 'https://stg.example.com',
}

-config/env.production.jsファイルを作成して下記のように記載する

module.exports = {
    apiBaseUrl: 'https://prod.example.com',
}

nuxt.config.jsファイルの設定

• サーバーの環境変数であるNODE＿ENVの値によって参照する設定ファイルを変更する処理を入れる

const appEnvironment = require(`./config/env.${process.env.NODE_ENV || 'development'}.js`)

export default {

(省略)

  env: appEnvironment,

(省略)

}

package.jsonファイルの設定

• script内のサーバー起動時にNODE＿ENVの値を設定して起動できる状態にする

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

利用方法

• page/index.vue内で設定した環境変数を取得する方法は下記のように記述するだけで取得することができる

process.env.apiBaseUrl