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
860
開発環境/本番環境を分けるシンプルな方法 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.1k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
580
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.4k
チームではじめるUIデザイン / Getting Started with Figma
kgsi
2
600
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
14k
Other Decks in Technology
See All in Technology
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
210
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
320
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
1
150
受託開発でもアジャイル開発できました / Agile in Contract Development
takaking22
9
4.3k
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
380
入門 バックアップ
ryuichi1208
18
6.7k
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
350
プロダクト開発の貢献をアピールするための目標設計や認知活動 / Goal design and recognition activities to promote product development contributions.
oomatomo
5
860
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
350
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
1.9k
SageMaker学習のツボ / The Key Points of Learning SageMaker
cmhiranofumio
0
170
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
320
Featured
See All Featured
Designing for Performance
lara
604
68k
Infographics Made Easy
chrislema
239
18k
A designer walks into a library…
pauljervisheath
202
24k
Designing the Hi-DPI Web
ddemaree
280
34k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
9
1.2k
How to name files
jennybc
77
99k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
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