Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

How to implement Deployment environment in Expo...

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/

Shinnosuke Yamamoto

October 08, 2022
Tweet

More Decks by Shinnosuke Yamamoto

Other Decks in Programming

Transcript

  1. © JMDC Inc. ࣗݾ঺հ w !NSUSZ@ w 4IJOOPTVLF:BNBNPUP w +.%$*OD

    w 4PGUXBSF&OHJOFFS .PCJMF &OHJOFFSJOH.BOBHFS w 3FBDU/BUJWF.BUTVSJ4UBGG🥳 2
  2. © JMDC Inc. %FWFMPQNFOU4UBHJOH1SPEVDUJPO؀ڥΛͭ͘Δͧʂ 3 Develop API Production API Staging

    API jp.co.jmdc.pepup jp.co.jmdc.pepup.develop jp.co.jmdc.pepup.staging
  3. © 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
  4. © 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
  5. © JMDC Inc. ؀ڥ͝ͱʹΞϓϦͷ*%Λมߋ͢Δ OQYFYQPDPOGJHͰઃఆ஋ͷ֬ೝ͕Ͱ͖Δ $ APP_VARIANT=staging npx expo config

    
 
 { 
 name: 'PepUp (staging)', 
 ios: { 
 bundleIdentifier: 'jp.co.jmdc.pepup.staging', 
 ..., 
 }, 
 android: { 
 package: 'jp.co.jmdc.pepup.staging', 
 ..., 
 }, 
 } 12
  6. © JMDC Inc. &"4#VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ FBTKTPOͷ+40/TDIFNB { 
 "build": { 


    // ೚ҙͷ໊લͰBuild VariantΛ࡞ΕΔ
 "BUILD_PROFILE_NAME_1": { 
 // ؀ڥม਺
 "env": { 
 ..., 
 } 
 }, 
 "BUILD_PROFILE_NAME_2": { 
 ..., 
 }, 
 } 
 } 16
  7. © JMDC Inc. &"4#VJMEͰ؀ڥ͝ͱʹΞϓϦΛCVJMEͰ͖ΔΑ͏ʹ͢Δ FBTKTPOͷ࣮ྫ { 
 "build": { 


    "staging": { 
 "env": { 
 "APP_VARIANT": “staging" 
 } 
 }, 
 "production": { 
 "env": { 
 "APP_VARIANT": “production" 
 } 
 }, 
 } 
 } 17
  8. © 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
  9. © 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
  10. © 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