やりたいこと
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/ディレクトリを作成して格納しました。
API_BASE_URL=http://localhost:4000/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=development
FRONT_BASE_URL=http://localhost:3000/
API_BASE_URL=http://staging.hogehoge.com/api/v1
AXIOS_DEBUG_MODE=true
NODE_ENV=staging
FRONT_BASE_URL=http://staging.hogehoge.com/
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
"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使いましたが、便利ですね。
もっとイケてる方法があれば、ぜひ教えてください!