Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
開発環境/本番環境を分けるシンプルな方法 with Ionic
Search
kgsi
May 20, 2018
Technology
0
960
開発環境/本番環境を分けるシンプルな方法 with Ionic
「Webのこれからを語ろう」Ionic Meetup Tokyo #4のLTで喋った、Ionicの開発環境を切り替える方法の資料です。
kgsi
May 20, 2018
Tweet
Share
More Decks by kgsi
See All by kgsi
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
コミュニティとおかねの話 / Community and Money
kgsi
0
140
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.8k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
850
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.4k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
5k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
4
3.4k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
620
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.7k
Other Decks in Technology
See All in Technology
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
110
Grafana Meetup Japan Vol. 6
kaedemalu
1
190
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
340
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
モダンフロントエンド 開発研修
recruitengineers
PRO
9
6k
モバイルアプリ研修
recruitengineers
PRO
5
1.6k
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
800
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
110
生成AI時代のデータ基盤
shibuiwilliam
1
1.3k
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
180
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
410
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
890
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building Applications with DynamoDB
mza
96
6.6k
A Tale of Four Properties
chriscoyier
160
23k
Documentation Writing (for coders)
carmenintech
73
5k
Docker and Python
trallard
45
3.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
500
Transcript
開発環境/ 本番環境を分ける シンプルな方法 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 を弄らなくて済む(個人的に重要) 公式で用意されているスクリプトしか使わないのでプリミティブに 実装できる やってることはただのコピーなので、内部的に処理をかき分ける必 要がない 複雑なテストを行う必要がない場合は非常に楽ちん
Ionic App Scripts で 快適な開発環境ライフを! © 2018 kgsi