Nuxt.jsでdotenvを用いた環境毎のデプロイを実現する3step

やりたいこと

Nuxt.js良いですよね。
【npm】nuxt@dotenv を使って、
バックエンドのAPIを投げ分けている設定をしているのですが、Generateの度に「.env」ファイルを書き換えなくてはいけない！という問題を解決すべく、以下のコマンドを作りました。

# Staging環境用
npm run generate:staging

# 本番環境用
npm run generate:production

[環境] Webアプリ開発
・フロントエンド：Nuxt.js
・バックエンド(API)：Ruby on Rails

[前提] npm-script

Node.js+npm での package.json の機能の1つです。今回はタスク管理機能を使って実現しました。

タスク管理

ビルドやユニットテストの実行などをタスクとして定義できる。
タスクは Shell スクリプトとして記述し、定義されたタスクは Teminal から npm run TASKNAME コマンドで実行可能。
参考サイト)
npm-scripts で Web フロントエンド開発を管理する

やったこと

npm-scriptで.envファイルを常に切り替えてgenerateを以下3手順
1. npm-run-allインストール（複数の npm-scripts を実行するためのコマンドラインツール)
2. 「.env」ファイルを環境分作成
3. package.jsonにてscript作成

1. npm-run-allインストール

# scriptでのタスクを複数実行用
npm install npm-run-all

2. 「.env」ファイルを環境分作成

env/ディレクトリを作成して格納しました。

env/.env_development

API_BASE_URL=http://localhost:4000/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=development
FRONT_BASE_URL=http://localhost:3000/

env/.env_staging

API_BASE_URL=http://staging.hogehoge.com/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=staging
FRONT_BASE_URL=http://staging.hogehoge.com/

env/.env_production

API_BASE_URL=https://api.hogehoge.com/api/v1
AXIOS_DEBUG_MODE=false
NODE_ENV=production
FRONT_BASE_URL=https://hogehoge.com/

3. package.jsonにてscript作成

以下の5つを追加しています。

    "copy_env_development": "cp env/.env_development .env",
    "copy_env_staging": "cp env/.env_staging .env",
    "copy_env_production": "cp env/.env_production .env",
    "generate:staging": "npm-run-all -s copy_env_staging generate copy_env_development",
    "generate:production": "npm-run-all -s copy_env_production generate copy_env_development

package.json

  "scripts": {
    "dev": "nuxt -s",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "copy_env_development": "cp env/.env_development .env",
    "copy_env_staging": "cp env/.env_staging .env",
    "copy_env_production": "cp env/.env_production .env",
    "generate:staging": "npm-run-all -s copy_env_staging generate copy_env_development",
    "generate:production": "npm-run-all -s copy_env_production generate copy_env_development"
  }

以上です！
これで以下コマンドでgenerate可能です。

# Staging環境用
npm run generate:staging

# 本番環境用
npm run generate:production

最後に

超絶力技です！初めてnpm script使いましたが、便利ですね。
もっとイケてる方法があれば、ぜひ教えてください！