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
870
開発環境/本番環境を分けるシンプルな方法 with Ionic
「Webのこれからを語ろう」Ionic Meetup Tokyo #4のLTで喋った、Ionicの開発環境を切り替える方法の資料です。
kgsi
May 20, 2018
Tweet
Share
More Decks by kgsi
See All by kgsi
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.5k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
750
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.3k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
4.8k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
3.2k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
580
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.4k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
610
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
14k
Other Decks in Technology
See All in Technology
10分でわかるfreeeのQA
freee
1
3.4k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
570
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
初心者に Vue.js を 教えるには
tsukuha
5
390
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Testing 201, or: Great Expectations
jmmastey
38
7k
A Philosophy of Restraint
colly
203
16k
Building Adaptive Systems
keathley
38
2.2k
We Have a Design System, Now What?
morganepeng
50
7.2k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Faster Mobile Websites
deanohume
304
30k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Making Projects Easy
brettharned
115
5.9k
Bash Introduction
62gerente
608
210k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
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