ionic(cordova) config.xmlを環境(development、production)毎に分ける
以前から気になっていた内容。
ionic か corodova の標準の機能でありそうだけどドキュメント眺めたり検索してもよくわからない。みんな必要な機能な気がするがどうやるのが正しいのだろうか。
解決したかったこととしては以下
・アプリのBundle Identifierやアプリ名を本番用と開発用とで分けたい
・cordovaプラグインでインストールの際にAPIキー等の指定が必要なものをどうするか
今回は前者の話で、それを解決するにはconfig.xmlを環境毎に切り替えられるようにする必要がある。
ionic prepare や ionic build すると各platform以下へconfig.xmlを元にプロジェクトを作成するので、これらが行われる前にconfig.xmlを書き換えることにした。
今回はenvironmentディレクトリを作成して、その配下に以下を用意する。
config.xml.tpl : config.xmlのひながた
config.dev.json : development環境の設定
config.pro.json : production環境の設定
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <widget id="${BUNDLE_ID}" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> ・・・
environment/config.dev.json
{ "BUNDLE_ID": "com.example.dev" }
environment/config.pro.json
{ "BUNDLE_ID": "com.example.pro" }
ionic1ではgulpが使われているので、gulpfile.jsを編集。
また、ひながたをjsonファイルの値で置換するときに、es6-template-strings というモジュールを使ったのでインストールしておく。
$ npm install --save es6-template-strings
gulpfile.js
var fs = require('fs'); var compile = require('es6-template-strings/compile'); var resolveToString = require('es6-template-strings/resolve-to-string'); // config.xml var templateData = fs.readFileSync('./environment/config.xml.tpl', 'utf8'); var configFile = process.env.ENV == 'PRODUCTION' ? 'config.pro.json' : 'config.dev.json'; var configPath = './environment/' + configFile; var configData = fs.readFileSync(configPath, 'utf8'); var config = JSON.parse(configData); var compiled = compile(templateData); var content = resolveToString(compiled, config); fs.writeFileSync('./config.xml', content);
build または prepareを行う
## 今回は環境変数でdevelopmentかproductionかをわたす $ export ENV=PRODUCTION $ ionic prepare
iOSの場合は、xcodeからプロジェクトを開くと、Bundle Identifierが環境毎に書き換わることが確認できた。以上です。
参考URL
https://stackoverflow.com/questions/37816035/using-environment-variables-parameterizing-config-xml