Cordovaにて環境ごとに変数を切り替えたい

前提・実現したいこと

Cordovaを用いてiPhone/Android両対応のネイティブアプリを開発しています。
VueやAngularなどのフレームワークは使用せず、純粋なJavascriptとjQueryのみによる実装です。
Railsで開発しているバックエンドAPIにAjaxにて通信する処理が多数含まれます。

バックエンド側はStaging環境とProduction環境の２つを用意していることから、
Cordova（フロントエンド）側についても同様にStaging用とProduction用の2種類を用意したいと考えています。
Vueなどを使用していれば、環境ごとのConfigファイルを用意して接続先情報を切り替えることができますが、
純粋なJavascriptのみで開発しているCordovaの場合、どのように環境変数を切り替えてBuildをすれば良いのでしょうか。
いろいろと調査をしておりますが、有益な情報が見つけられておりません。
参考になる情報をお持ちの方がいらっしゃれば、ご教示いただけないでしょうか。

補足情報（FW/ツールのバージョンなど）

Cordova 7.1.0

行動規範の内容に同意します

回答1件

自己解決

本件自己解決しましたので、どなたかのお役に立てばと思い記入します。
Cordovaのフックという機能を用いて実現できました。

1 以下のファイルを作成（自分はフォルダから新たに作成しました）
これが環境ごとに切り替える（置換する）文字列となります。

project_root¥build¥config¥project.json
{
  "stage": {
    "api_server_url" : "'https://server_for_staging.com'" 
  },
  "production": {
    "api_server_url" : "'https://server_for_production.com'" 
  }
}

2 config.xmlに以下を追加。

<hook src="www/js/changeEnvVariables_afterPrepare.js" type="after_prepare" />

3 project_root¥www¥js¥changeEnvVariables_afterPrepare.jsというファイルを作成。
コードの中央部分にある"../platforms/ios/www/js/index.js"が置換対象のファイルなので、
他にjsファイルがあればそれも追記する。

#!/usr/bin/env node
// this plugin replaces arbitrary text in arbitrary files
//
// Look for the string CONFIGURE HERE for areas that need configuration
//
var fs = require('fs');
var path = require('path');
var rootdir = process.argv[2];
function replace_string_in_file(filename, to_replace, replace_with) {
  var data = fs.readFileSync(filename, 'utf8');
  var result = data.replace(to_replace, replace_with);
  fs.writeFileSync(filename, result, 'utf8');
  console.log(to_replace, replace_with);
}
var target = "stage";
if (process.env.TARGET) {
  target = process.env.TARGET;
}
if (rootdir) {
  var ourconfigfile = path.join(rootdir, "config", "project.json");
  var configobj = JSON.parse(fs.readFileSync(ourconfigfile, 'utf8'));
  // CONFIGURE HERE
  // with the names of the files that contain tokens you want
  // replaced. Replace files that have been copied via the prepare step.
  var filestoreplace = [
    "../platforms/ios/www/js/index.js",
    "../platforms/android/assets/www/js/index.js",
  ];
  filestoreplace.forEach(function(val, index, array) {
    var fullfilename = path.join(rootdir, val);
    if (fs.existsSync(fullfilename)) {
      // CONFIGURE HERE
      // with the names of the token values. For example,
      // below we are looking for the token
      // /*REP*/ 'api.example.com' /*REP*/ and will replace
      // that token
      replace_string_in_file(fullfilename,
      "api_server_url",
      configobj[target].api_server_url);
      // ... any other configuration options
    } else {
      // console.log("missing: "+fullfilename);
    }
  });
}

4 置換対象のjsファイルにて、当該箇所を以下の通り修正。私はajaxの中でurlを記載していたので、
その部分を修正しました。

（修正前）

url: 'https://server_for_staging.com'

（修正後）

url: api_server_url

上記の修正を行ったのち、以下のコマンドでビルドするとそれぞれの環境に応じたURLに置換されています。

TARGET=stage cordova build ios
TARGET=production cordova build ios

仕組みとしては以下の通りです。
0. www¥jsフォルダ以下のjsファイルがビルドされ、platforms¥iosおよびandroidの下にコピーされる。
0. ビルド後に、config.xmlに記載されたフックが起動され、changeEnvVariables_afterPrepare.jsが実行される。
0. コピーされたplatforms¥iosおよびandroid以下のjsファイルを対象に、api_server_urlという文字列が、それぞれの環境のURLに置換される。

とりあえずなんとか動かすところまでの検証のみなので、誤り部分があるかもしれませんが、自分の備忘録も兼ねて投稿しておきます。

参考URL：
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
http://intown.biz/2014/05/13/build-configurations-in-cordova-using-hooks/
https://qiita.com/KNaito/items/65587f5d51974e8b4adf

投稿2018/09/21 07:14

psuke

総合スコア202