Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Nuxt.js 2020.09.09

Nuxt.jsでcross-envを使って本番環境と開発環境のURLを切り分けてみる

Tags: ,,,,

過去記事「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 プロパティ

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?