Upgrade to Pro — share decks privately, control downloads, hide ads and more …

開発環境/本番環境を分けるシンプルな方法 with Ionic

kgsi
May 20, 2018

開発環境/本番環境を分けるシンプルな方法 with Ionic

「Webのこれからを語ろう」Ionic Meetup Tokyo #4のLTで喋った、Ionicの開発環境を切り替える方法の資料です。

kgsi

May 20, 2018
Tweet

More Decks by kgsi

Other Decks in Technology

Transcript

  1. 課題 Ionic v3 では、environment の切り替えるコマンドが提供されていない (v4 はAngular CLI でできる?) Push

    通知実装に必要なGoogleService-Info.plist ファイルは、引数を 渡すとかだけでは切り替えられない もちろん手動で上書きするなどで、簡単に環境を切り替える事はで きる。しかしいちいちコピーするのが面倒くさいし、ミスが起きや すい プロジェクトを開発と本番とで、分けて開発する状況でもない、そ んなの面倒くさい
  2. Ionic App Scripts とは https://github.com/ionic-team/ionic-app-scripts Ionic の標準Helper scripts package.json に書かれているが、ionic

    serve | build など標準のコマ ンドもionic-app-scripts から実行している ionic_cleancss 、ionic_copy 、ionic_watch など、build やwatch 時に標 準設定をOverriding してくれるCon g 機能を標準で提供
  3. Directory example ROOT ├─ setting └─ dev ├─ environment.ts ├─

    google-services.json └─ GoogleService-Info.plist └─ prod ├─ environment.ts ├─ google-services.json └─ GoogleService-Info.plist setting.copy.js
  4. setting.copy.js const envDir = (process.env.IONIC_ENV == 'prod') ? 'prod' :

    'dev'; module.exports = { copyFirebaseSetting: { src: [ `{{ROOT}}/setting/${envDir}/google-services.json`, `{{ROOT}}/setting/${envDir}/GoogleService-Info.plist` ], dest: '{{ROOT}}' }, copyEnvironment: { src: [`{{ROOT}}/setting/${envDir}/environment.ts`], dest: '{{SRC}}/environment' }, }