過去記事「Nuxt.jsのgenerateで環境変数を切り分ける時に使えるdotenvモジュール」でもNuxt.jsの環境変数を使ってURLを切り分ける方法についてまとめていましたが、今回は「cross-env」というものを使って環境ごとのURLを切り分ける方法を試してみたいと思います。   開発環境ではlocalhostで、本番環境では実際のドメインでパスを設定したい場合があるかと思いますが、そんな場合にビルドコマンドで切り替えられるようになります。まずはcross-envのモジュールをnpmでインストールしていきます。

$ npm install --save cross-env

  インストールが完了すると「package.json」で追加されているのが確認できます。これで準備が整いましたので設定を行います。 【package.json】※一部抜粋

{
  ..........
  "dependencies": {
    "cross-env": "^7.0.2",
    ..........
  }
  ..........
}

  今回は環境変数用に値を出力する専用のJSファイルを用意します。ここでは本番環境用（env.production.js）とステージング環境用（env.staging.js）そしてローカル環境用（env.development.js）の3つを用意しています。これらのファイルはnuxt.config.jsと同じディレクトリに配置しています。

nuxt
┣ dist
┣ src
   ............
┣ env.development.js
┣ env.staging.js
┣ env.production.js
┣ nuxt.config.js
   ............

  この環境変数用の中身を見ていきます。内容としてはシンプルで「BASE_URL」というキーを持つ値のオブジェクトを出力するようにしています。値には環境ごとのURLを入れておきます。それぞれの環境ごとに用意しておきます。 【env.**********.js】

// env.development.js
module.exports = {
  BASE_URL: 'http://localhost:3000/'
}

// env.staging.js
module.exports = {
  BASE_URL: 'https://staging.example.com/'
}

// env.production.js
module.exports = {
  BASE_URL: 'https://example.com/'
}

  これらの設定ファイルは「nuxt.config.js」で読み込んでいきますが、その際にどのファイルを参照するかを環境変数によって切り替わるようにしておきます。こうすることで環境変数に合わせたURLの値を取得することができます。 【nuxt.config.js】※一部抜粋

const environment = process.env.NODE_ENV
const envSettings = require(`./env.${environment}.js`)

export default {
  ............
  env: envSettings,
  ............
}

  そして「env」オプションに、環境変数別に取得した変数の値が入るようにしておきます。続いて、「package.json」のスクリプトを定義する際に、各コマンドごとに環境変数別のものを用意していきます。cross-envを使うことで、このように環境変数の値を設定することができます。 【package.json】※一部抜粋

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

  これでそれぞれの環境ごとにコマンドを実行することができ、その環境変数から対応したURLがコード上に適用されるようになります。コマンドで切り分けれるため、ファイルを編集したりする必要がないのは楽ですね。   実際にはこのように環境変数ごとのURLを切り分けられるようになることで、環境ごとの条件分岐ができるようになったり、サーバーサイドのAPIの切り替え、OGP設定でそれぞれの環境ごとに合わせたURLを指定することができます。 【nuxt.config.js】※一部抜粋

cosnt siteMeta = {
  url: process.env.BASE_URL || envSettings.BASE_URL
}
export default {
  head: {
    meta: [
      {
        hid: 'og:url',
        property: 'og:url',
        content: siteMeta.url
      },
      {
        hid: 'twitter:url',
        name: 'twitter:url',
        content: siteMeta.url
      }
      ............
    ],
    ............
  }
}

  環境変数から取得したURLの値は今回のケースですと「process.env.BASE_URL」と指定することで取得することができます。実際にコンソールで確認してみると表示されているのがわかります。

// JavaScript
console.log(process.env.BASE_URL)

// console
$ npm run dev
> http://localhost:3000/

 

---

  開発を続けていく中で環境ごとにURLが変わるというのは当然なので、このような形で切り分けができるようにしておくことが大事ですね。まだまだ慣れないこともありますが、ちょっとずつ勉強をしていこうと思います。   （参考にさせて頂いたサイト） Nuxtでcross-envを使い環境ごとに環境変数を分ける API: env プロパティ