How to implement Deployment environment in Expo EAS Build

Reference

Installing app variants on the same device - Expo Documentation
https://docs.expo.dev/build-reference/variants/

Environment variables in Expo - Expo Documentation
https://docs.expo.dev/guides/environment-variables/

Build schema for eas.json - Expo Documentation
https://docs.expo.dev/build-reference/eas-json/

1. &YQP
   &"4
   #VJMEͰ %FQMPZNFOU
   FOWJSPONFOUΛ࣮૷͢Δํ๏ !NSUSZ
   
   
2. © JMDC Inc. ࣗݾ঺հ w !NSUSZ@
   w 4IJOOPTVLF
   :BNBNPUP
   w +.%$
   *OD
   w 4PGUXBSF
   &OHJOFFS
   .PCJMF
   
   &OHJOFFSJOH
   .BOBHFS
   w 3FBDU
   /BUJWF
   .BUTVSJ
   
   4UBGG
   🥳 2
3. © JMDC Inc. %FWFMPQNFOU
   
   4UBHJOH
   
   1SPEVDUJPO
   ؀ڥΛͭ͘Δͧʂ 3 Develop API Production API Staging API jp.co.jmdc.pepup jp.co.jmdc.pepup.develop jp.co.jmdc.pepup.staging
4. © JMDC Inc. ΍Δ͜ͱ w ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ w &"4
   #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ w ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ 4
5. © JMDC Inc. ؀ڥ͝ͱʹ ΞϓϦͷ*%Λมߋ͢Δ
6. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ ΞϓϦʹ͸*%͕͋Δ
   w"OESPJE
   "QQMJDBUJPO
   *%
   wJ04
   #VOEMF
   *%
   6 jp.co.jmdc.pepup
7. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ ಉ͡*%ͷΞϓϦΛෳ਺Πϯετʔϧ͢Δ͜ͱ͸Ͱ͖ͳ͍ 7 jp.co.jmdc.pepup jp.co.jmdc.pepup jp.co.jmdc.pepup
8. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ ؀ڥ͝ͱʹݸผͷIDΛઃఆ͢Δඞཁ͕͋Δ 8 jp.co.jmdc.pepup jp.co.jmdc.pepup.develop jp.co.jmdc.pepup.staging
9. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ BQQKTPOͷ୅ΘΓʹ
   BQQDPOGJH<KTcUT>
   Λར༻͢Δ
   w ؀ڥม਺Λࢀর͠ɺಈతʹॻ͖׵͑Δ͜ͱ͕Ͱ͖Δ 9
10. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ CLI $ APP_VARIANT=staging npx expo start app.config.ts // APP_VARIANT is 'staging' 
 const APP_VARIANT = process.env.APP_VARIANT; 
 
 export default { 
 ..., 
 } 10
11. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ BQQDPOGJHUT
    ͷ࣮ྫ
    const APP_VARIANT = process.env.APP_VARIANT 
 
 const IS_PROD = APP_VARIANT === 'production' 
 const APP_NAME = IS_PROD ? 'PepUp' : `PepUp (${APP_VARIANT})` 
 const APP_ID = IS_PROD ? 'jp.co.jmdc.pepup' : `jp.co.jmdc.pepup.${APP_VARIANT}` 
 
 export default { 
 name: APP_NAME, 
 ios: { 
 bundleIdentifier: APP_ID, 
 }, 
 android: { 
 package: APP_ID, 
 }, 
 }; 11
12. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ 
    OQY
    FYQP
    DPOGJH
    Ͱઃఆ஋ͷ֬ೝ͕Ͱ͖Δ
    $ APP_VARIANT=staging npx expo config 
 
 { 
 name: 'PepUp (staging)', 
 ios: { 
 bundleIdentifier: 'jp.co.jmdc.pepup.staging', 
 ..., 
 }, 
 android: { 
 package: 'jp.co.jmdc.pepup.staging', 
 ..., 
 }, 
 } 12
13. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹ
    ΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ
14. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ MPDBM։ൃ࣌͸ɺTIFMM্ʹ؀ڥม਺Λઃఆ͠ɺ؀ڥΛ੾Γସ͑ͨ
    14 CLI͔Βઃఆ ؀ڥม਺ Build
15. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ &"4
    #VJME࣌͸ɺFBTKTPOʹ؀ڥม਺Λઃఆ͠ɺ؀ڥΛ੾Γସ͑Δ
    15 eas.json ؀ڥม਺ Build
16. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ FBTKTPO
    ͷ
    +40/
    TDIFNB
    { 
 "build": { 
 // ೚ҙͷ໊લͰBuild VariantΛ࡞ΕΔ
 "BUILD_PROFILE_NAME_1": { 
 // ؀ڥม਺
 "env": { 
 ..., 
 } 
 }, 
 "BUILD_PROFILE_NAME_2": { 
 ..., 
 }, 
 } 
 } 16
17. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ FBTKTPO
    ͷ࣮ྫ
    { 
 "build": { 
 "staging": { 
 "env": { 
 "APP_VARIANT": “staging" 
 } 
 }, 
 "production": { 
 "env": { 
 "APP_VARIANT": “production" 
 } 
 }, 
 } 
 } 17
18. © JMDC Inc. &"4
    #VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ ProfileΛࢦఆͯ͠EAS Build͢Δ # Staging Build 
 $ npx eas build --platform android --profile staging 
 
 # Production Build 
 $ npx eas build --platform android --profile production 18
19. © JMDC Inc. ؀ڥ͝ͱʹ ઃఆ஋Λ·ͱΊͯมߋ͢Δ
20. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ ྫ
    ؀ڥ͝ͱʹ"1*ͷ઀ଓઌΛ੾Γସ͍͑ͨ
    20 Develop API Production API Staging API jp.co.jmdc.pepup jp.co.jmdc.pepup.develop jp.co.jmdc.pepup.staging
21. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ ΍Δ͜ͱ
    w ؀ڥ͝ͱʹFOWΛ࡞੒͢Δ
    w "11@7"3*"/5
    ΛݩʹFOWΛ੾Γସ͑Δ
    w &YQP
    $POTUBOUT͔ΒࢀরͰ͖ΔΑ͏ʹ͢Δ 21
22. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ ؀ڥ͝ͱʹFOWΛ࡞੒͢Δ
    w EPUFOWΛར༻͠ɺ؀ڥ͝ͱͷઃఆΛ੾Γସ͑Δ
    w ؀ڥ͝ͱͷઃఆΛFOWͱ໊෇͚ͨϑΝΠϧʹ·ͱΊͯࢀরͰ͖Δ͘Μ 22
23. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ ؀ڥ͝ͱʹ.envΛ࡞੒͢Δ env/.env.development API_ENDPOINT=https://development.pepup.jmdc.co.jp env/.env.production API_ENDPOINT=https://pepup.jmdc.co.jp 23
24. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ "11@7"3*"/5
    Ͱࢀর͢ΔFOWΛ੾Γସ͑Δ
    BQQDPOGJHUT
    import dotenv from 'dotenv'; 
 
 dotenv.config({ 
 // APP_VARIANTΛϕʔεʹࢀর͢Δ.envΛ੾Γସ͑Δ
 path: `env/.env.${process.env.APP_VARIANT ?? 'development'}`, 
 }); 
 
 // APP_VARIANT=developmentͩͱɺhttps://development.pepup.jmdc.co.jp ͕ฦͬͯ͘Δ
 console.log(`process.env.API_ENDPOINT: ${process.env.API_ENDPOINT}`) 24
25. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ &YQP
    $POTUBOUT͔ΒࢀরͰ͖ΔΑ͏ʹ͢Δ
    w &YQPͰఏڙ͍ͯ͠ΔγεςϜ৘ใΛఏڙͯ͘͠ΕΔNPEVMF
    w BQQKTPOͷ஋Λࢀর͢Δ͜ͱ͕Ͱ͖Δ 25
26. © JMDC Inc. ؀ڥ͝ͱʹઃఆ஋Λ·ͱΊͯมߋ͢Δ ࣮ྫ
    BQQDPOGJHUT
    dotenv.config({ ... }); 
 
 export default { 
 extra: { 
 // extraͷઃఆ஋͸ɺ Constants.expoConfig.extra ͔ΒࢀরͰ͖Δ
 apiEndpoint: process.env.API_ENDPOINT, 
 }, 
 }; useApi.ts import Constants from 'expo-constants'; 
 
 const useApi = () => { 
 const result = await fetch( // extra.apiEndPoint ͷ஋Λࢀর 
 Constants.expoConfig.extra.apiEndpoint 
 ) 
 } 26
27. © JMDC Inc. 3FGFSFODF w *OTUBMMJOH
    BQQ
    WBSJBOUT
    PO
    UIF
    TBNF
    EFWJDF
    
    &YQP
    %PDVNFOUBUJPO
    w &OWJSPONFOU
    WBSJBCMFT
    JO
    &YQP
    
    &YQP
    %PDVNFOUBUJPO
    w #VJME
    TDIFNB
    GPS
    FBTKTPO
    
    &YQP
    %PDVNFOUBUJPO 27
28. © JMDC Inc. 8&
    "3&
    )*3*/( શํҐͰੵۃ࠾༻த
    ΧδϡΞϧ໘ஊ΋͍ͯ͠ΔͷͰɺ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞ 28 ͦͷଞͷΤϯδχΞ
    IUUQTISNPTDPQBHFTKNEDKPCT DBUFHPSZ
    ϞόΠϧΞϓϦΤϯδχΞ
    IUUQTISNPTDPQBHFTKNED KPCT