[RN Library ๐Ÿ“š] codepush ๋„์ž…ํ•˜๊ธฐ - 1. app center ์…‹ํŒ…

๋„๋””ยท2020๋…„ 11์›” 12์ผ
6

RN Library ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
6/12

codepush๋ž€?

codepush๋Š” ์Šคํ† ์–ด ์‹ฌ์‚ฌ ์—†์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ์•ฑ์„ ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. Microsoft์—์„œ ์„œ๋น„์Šค๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค. ๋ชจ๋“  ๊ฒฝ์šฐ์— ๊ฐ€๋Šฅํ•œ๊ฑด ์•„๋‹ˆ๊ณ , Javascript๋‹จ์˜ ์ฝ”๋“œ์™€ assets(์ด๋ฏธ์ง€, ํฐํŠธ ๋“ฑ) ์˜ ๊ฒฝ์šฐ ์‹ฌ์‚ฌ ์—†์ด ์—…๋ฐ์ดํŠธ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฒ„๊ทธ ํ”ฝ์Šค๋‚˜ ๊ธด๊ธ‰ ์ด๋ฒคํŠธ ๊ฒŒ์‹œ์˜ ๊ฒฝ์šฐ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„, ๋„์ž…์„ ํ•ด๋ณด๋ คํ•œ๋‹ค. ๐Ÿฅ๐Ÿฅ๐Ÿฅ ๋‘๋‘ฅํƒ-

codepush๋Š” ์ด๋Ÿฐ ๋‹จ๊ณ„๋กœ ์ž‘๋™๋œ๋‹ค.

  1. ์›๋ž˜๋Š” ๊ฐœ๋ฐœ์ž๋Š” ์•ฑ์Šคํ† ์–ด์— ๋ฒˆ๋“ค์„ ์˜ฌ๋ฆฌ๊ณ , ์‚ฌ์šฉ์ž๋Š” ๊ทธ๊ฒƒ์„ ๋‹ค์šด๋ฐ›๋Š”๋‹ค.
  2. ์ฝ”๋“œ ํ‘ธ์‰ฌ๋ฅผ ๋„์ž…ํ•˜๊ฒŒ ๋˜๋ฉด, ์ฝ”๋“œํ‘ธ์‰ฌ ์„œ๋ฒ„์— codepush deployment key๊ฐ€ ๋“ฑ๋ก๋˜์–ด์žˆ๋Š” ๋ฒˆ๋“ค์„ ์˜ฌ๋ ค๋†“๋Š”๋‹ค.
  3. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ˆ˜์ •ํ•œ ํ›„, ์ฝ”๋“œํ‘ธ์‰ฌ ์„œ๋ฒ„์— ์ˆ˜์ •ํ•œ ์ฝ”๋“œ๋ฅผ ์˜ฌ๋ฆฐ๋‹ค.
  4. ์‚ฌ์šฉ์ž๊ฐ€ ์–ดํ”Œ์„ ์‹œ์ž‘ํ•˜๋ฉด, codepush deployment key๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ฝ”๋“œํ‘ธ์‰ฌ ์„œ๋ฒ„์— ์—…๋ฐ์ดํŠธ์‚ฌํ•ญ์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.
  5. ์—…๋ฐ์ดํŠธ ์‚ฌํ•ญ์ด ์žˆ๋‹ค๋ฉด ์—…๋ฐ์ดํŠธ๊ฐ€ ๋œ๋‹ค.

๋„์ž…์„ ์œ„ํ•œ ๋‹จ๊ณ„๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ์ฐจ๊ทผ์ฐจ๊ทผ app center ์…‹ํŒ…๋ถ€ํ„ฐ ํ•ด๋ณด์ž.

  1. app center์— ์–ดํ”Œ์„ ๋“ฑ๋กํ•œ๋‹ค.
  2. react-natvie-code-push๋กœ ํ”„๋กœ์ ํŠธ์— codepush SDK๋ฅผ ์‹ฌ๋Š”๋‹ค.
  3. ์Šคํ† ์–ด์— ๋ฐฐํฌ๋ฅผ ํ•œ๋‹ค.
  4. codepush๋กœ ๋ฐฐํฌ๋ฅผ ํ•œ๋‹ค.

app center ์…‹ํŒ…

0. AppCenter ๊ณ„์ • ์ƒ์„ฑ

AppCenter ํ™ˆํŽ˜์ด์ง€์—์„œ ๊ณ„์ • ์ƒ์„ฑํ•˜๊ณ  ๋กœ๊ทธ์ธํ•˜๊ธฐ
์•„์ง ์•ฑ ๋“ฑ๋ก์€ ํ•˜์ง€ ์•Š์•˜๋‹ค.

1. appcenter-cli ์„ค์น˜

๋Œ์•„๋‹ค๋‹ˆ๋Š” ์ž๋ฃŒ๋“ค์— code-push-cli๋ฅผ ์„ค์น˜ํ•ด๋ผ, appcenter-cli๋ฅผ ์„ค์น˜ํ•ด๋ผ ๋‘๊ฐœ๋กœ ๊ฐˆ๋ ค์„œ ์•Œ์•„๋ณด๋‹ˆ,
CodePush-CLI is deprecated and no longer supported! You can use AppCenter-CLI instead.
๋ผ๊ณ  ํ•œ๋‹ค. appcenter-cli๋กœ ์ง„ํ–‰ํ•˜์ž.

$ npm install -g appcenter-cli

2. appcenter ๊ณ„์ • ๋“ฑ๋ก ๋ฐ ๊ด€๋ฆฌ

$ appcenter login

ํ„ฐ๋ฏธ๋„์— ์ž…๋ ฅํ•˜๋ฉด ํ† ํฐ์ด ์ ํ˜€์žˆ๋Š” ์›นํŽ˜์ด์ง€๊ฐ€ ๋œฌ๋‹ค.
ํ† ํฐ์„ ํ„ฐ๋ฏธ๋„ Enter your token from the browser: ์— ๋„ฃ์–ด์ค€๋‹ค.

3. ์•ฑ ์ƒ์„ฑํ•˜๊ธฐ

appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

// ์˜ˆ์‹œ
appcenter apps create -d appname -o Android  -p React-Native
appcenter apps create -d appname -o iOS  -p React-Native

์ด๋ ‡๊ฒŒ android, ios ๊ฐ๊ฐ ์•ฑ์„ ๋“ฑ๋กํ•˜๊ณ  ์•ฑ์„ผํ„ฐ๋กœ ๊ฐ€๋ฉด ๋‚ด ์–ดํ”Œ์ด ์ƒ์„ฑ๋˜์–ด์žˆ๋‹ค.
์•ฑ์ด ๋“ฑ๋ก๋˜์—ˆ์œผ๋ฉด deployment production key์™€ staging key๋ฅผ ๋ฐœ๊ธ‰๋ฐ›์•„์•ผ ํ•œ๋‹ค.

4. deployment key ๋ฐœ๊ธ‰๋ฐ›๊ธฐ

deployment key๋Š” app center์˜ ๋‚ด ์•ฑ > Distribute > codepush์— ๊ฐ€๋ฉด ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์•„์ง ๋ฐœ๊ธ‰์ด ์•ˆ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋‹จ ๋ฐœ๊ธ‰๋ถ€ํ„ฐ ํ•˜์ž.

// deployment key ๋ฐœ๊ธ‰๋ฐ›๊ธฐ
appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production

// deployment key ํ™•์ธํ•˜๊ธฐ
appcenter codepush deployment list -a <ownerName>/<appname> -k

app center์— ๋‹ค์‹œ ๊ฐ€์„œ ํ™•์ธํ•ด๋ณด๋ฉด,

Everything is ready.

๋ผ๋Š” ๋ฌธ๊ตฌ์™€ ํ•จ๊ป˜ Add the CodePush SDK to your app ์ด๋ผ๋Š” ์•ˆ๋‚ด๊ฐ€ ๋‚˜์˜จ๋‹ค.

๊ทธ ๋‹ค์Œ ๊ธ€์—์„œ ์•ฑ์— react-native-code-push ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ CodePush SDK๋ฅผ ์ถ”๊ฐ€ํ•ด๋ณด์ž.

profile
์ถฉ์ „์ค‘..๐Ÿค”

0๊ฐœ์˜ ๋Œ“๊ธ€