share facebook facebook twitter menu hatena pocket slack

2018.07.24 TUE

ionicプロジェクトでnodeの環境変数を使ってビルド環境を切り替えるのにちょっと面倒だった話

二神 暢彦

WRITTEN BY 二神 暢彦

こちらはあら便利カレンダー2018の記事です。

Webのフロントエンド開発においてwebpackを使ってビルドする場合、NODE_ENV=development npm run buildNODE_ENV=production npm run buildといった具合にnodeの環境変数を使ってビルド内容を切り替えることはよくあると思います。

ionicもwebpackをベースにビルドが実行されているため、同じようにできると思っていたら出来ず。。
ちょっと面倒なことをしなければならなかったので、記事にまとめました。

ionic関連のバージョンはこんな感じ

"ionic": "3.20.0",
"ionic-angular": "3.9.2",
"@ionic/app-scripts": "3.1.8",

Ionic公式に書いてあるやつ

IONIC_ENVなるものが定義されていてそれを参照することでビルド時に切り替えが出来るよ!って書いてあるのですが、、、
https://ionicframework.com/docs/developer-resources/app-scripts/

if (process.env.IONIC_ENV === 'prod') {
  console.log('we got a production buildp');
} else {
  console.log('we got a development build');
}

webpack.config.js内でしか参照できない!!

さきほどのIONIC_ENVはwebpackのconfigファイル内でしか参照できないです。
JSのソース内でIONIC_ENVを参照しても undefined が返ってくるだけです。

ionicプロジェクトでnodeの環境変数を使ってビルド環境を切り替える方法

  1. ionicのビルド時に参照するwebpack configを作成して指定する (指定がない場合は@ionic/app-scriptsモジュール内にあるwebpack.config.jsが参照されています)
  2. webpackに内包されているDefinePluginを使ってIONIC_ENVをJSソース内から参照できるよう定義しなおす
  3. npm run buildとかでコマンド実行する

これだけです。

webpack.config.jsを用意する

任意の場所にwebpack.config.jsを用意します。今回はプロジェクトのルートに置いています。
内容は以下のようになっています。

webpack.config.js

const webpack = require('webpack');
// デフォルトで使われているwebpack configを取得
const ionicConfig = require('@ionic/app-scripts/config/webpack.config');

// nodeの環境変数をDefinePluginによって再定義
const definePlugin = new webpack.DefinePlugin({
  IONIC_ENV: JSON.stringify(process.env.IONIC_ENV)
});

// デフォルトのwebpack configにマージ
ionicConfig[ process.env.IONIC_ENV ].plugins.push(definePlugin);
module.exports = ionicConfig;

ionicビルド時に参照するwebpack configを指定する

package.jsonに以下を追記します。

package.json

{
  "dependencies": {
↓↓↓↓↓追加
  "config": {
    "ionic_webpack": "./webpack.config.js"
  }
}

実際にJSソース内から参照

JSのソース内から以下のように参照できます

config.js

declare const IONIC_ENV: any;

    endpoint: {
      prod: 'https://prod.example.com',
      dev: 'https://dev.example.com'
    }[IONIC_ENV || 'dev']

TypeScriptの型定義が必要なため declare const IONIC_ENV: any; でやってますが、ここをもうちょっとスマートにしたいなーとおもってます。
が、とにかくこれで参照できるようになりました。

IONIC_ENV補足

IONIC_ENVは以下ionicコマンドによって値が切り替わります

  • ionic buildionic serveを実行すると dev
  • ionic build --prod を実行すると prod

ちなみにcordovaのビルド環境切り替えも他の方法で出来るようですが、さらにややこしそうでやってません。。
Ionic公式フォーラムなどでもビルド環境切り替えをもっとシンプルに切り替えられる方法がほしいという内容の投稿が以前からあがっているので、今後のアップデートで変わる可能性はありますが現状ではこの方法が1番最短かと思います。

元記事はこちら

ionicプロジェクトでnodeの環境変数を使ってビルド環境を切り替えるのにちょっと面倒だった話

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。