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

開発環境/ 本番環境を分けるシンプルな方法 with Ionic 「Web のこれからを語ろう」Ionic Meetup Tokyo #4
:LT @kgsi ( e-bird inc )

自己紹介 Shinichi Kogiso (@kgsi) 株式会社イー・バード所属、Ionic 歴は4 ヶ月もともとデザイナー、今はエンジニア/ 主にフロントエンド担当 twitter:
https://twitter.com/kgsi qiita: https://qiita.com/kgsi

お題 Ionic の開発・本番環境ってどう分けていますか？

環境ごとに分けたいもの環境変数 Cloud サービスのエンドポイント Platform 用ファイル（Google-service.json とか） Cordova のCon g.xml
（重要）などなど..

課題 Ionic v3 では、environment の切り替えるコマンドが提供されていない（v4 はAngular CLI でできる？） Push
通知実装に必要なGoogleService-Info.plist ファイルは、引数を渡すとかだけでは切り替えられないもちろん手動で上書きするなどで、簡単に環境を切り替える事はできる。しかしいちいちコピーするのが面倒くさいし、ミスが起きやすいプロジェクトを開発と本番とで、分けて開発する状況でもない、そんなの面倒くさい

面倒くさいので楽をしたい！プリミティブに開発したい

解決策 Ionic App Scripts

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 機能を標準で提供

作業の流れ 1. 本番/ 開発でフォルダ分けして、切り替えたいファイルを設置 2. ionic_copy を通して設定ファイルを作成、コピー元のディレクトリと設定先のディレクトリを設定 3. ionic
serve | prepare | build などを実行する時に引数--prod , --dev を渡して本番/ 開発を切り替える 4. Done

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

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' }, }

package.json （抜粋） "config": { "ionic_copy": "./config/setting.copy.js" } コマンド例 $ ionic
cordova build --prod

この実装の良いところ webpack.config を弄らなくて済む（個人的に重要）公式で用意されているスクリプトしか使わないのでプリミティブに実装できるやってることはただのコピーなので、内部的に処理をかき分ける必要がない複雑なテストを行う必要がない場合は非常に楽ちん

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

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

kgsi

More Decks by kgsi

Other Decks in Technology

Featured

Transcript