React Native 에서 CDN 으로 Code Push 환경 구축하기

[salmonco]

배경

• 앱 업데이트 없이 변경된 js 코드를 앱에 즉각 반영하고 싶다!

시도한 방법

가설 1. js bundle 을 CDN 에 업로드하고, react native 에서 해당 CDN 경로를 바라보게 하면 될 것이다.

• js bundle 이란 react native 에서 js 코드를 번들링한 결과물이다.
• js bundle 은 자동으로 react native 에서 앱 안에 위치해서 참조되는데, 이 참조 경로를 외부 CDN 으로 바꾸고자 한다.
• 그럼 우리가 해당 CDN 경로에 새로운 js bundle 를 교체해주기만 하면 (그리고 캐시 무효화하면) 앱이 자동으로 최신 버전의 js bundle 을 바라보게 될 것이다.

문제 1. 폰트나 이미지같은 정적 assets 가 참조되지 않는 문제

• js bundle 의 경로를 외부 CDN 경로로 바꿔서 js 코드 실행되게 하는 건 확인했다. 하지만 앱에서 이미지가 사라졌다.
• 정적 리소스는 앱에 내장되어 로컬 경로를 참조하도록 되어 있는데, 내가 번들링할 때 정적 리소스를 앱에 넣는 걸 빠뜨렸나? 근데 난 js bundle 참조 경로만 바꾼 거 뿐인데.
  • -> js bundle 을 CDN 에서 불러오면, 그 js 에서 사용하는 require(...) 는 앱 번들에 포함된 리소스를 찾을 수 없다고 한다. 경로가 서로 연결이 안 된다고 한다.

처음 생각한 방법이,

• js bundle → CDN 에서 불러오기
• 정적 리소스 (require(...)) → 기존처럼 앱에 내장

이런데, js bundle 이 정적 리소스를 불러오는 경로가 맞지 않아서 정적 리소스를 못 불러온다고 한다.

고민 1. 정적 리소스를 앱에 넣을까 아니면 CDN 에 넣을까?

• 정적 리소스를 CDN 에 넣었을 때
  • ✚ 앱 자동 업데이트 효과를 볼 수 있다. js 코드를 변경해서 정적 리소스가 위치한 외부 경로를 바라보게 할 수 있기 때문.
  • ✚ 앱 용량이 줄어든다. 리소스가 외부에 있기 때문.
  • − 초기 리소스 로딩속도가 느릴 수 있다. 캐시되기 전까지 네트워크를 타기 때문.
• 정적 리소스를 앱에 넣었을 때
  • ✚ 초기 리소스 로딩속도가 빠르다. 네트워크를 안 타기 때문. 네트워크 연결이 끊겨도 리소스를 볼 수 있다.
  • − 앱 자동 업데이트 효과를 볼 수 없다. 앱 안에 추가한 정적 리소스를 포함해야 하기 때문.
  • − 앱 용량이 늘어난다. 리소스를 앱 내에 포함하기 때문.

고민 2. 만약 정적 리소스를 앱에 넣었을 때, js bundle 은 CDN 에 있는데 어떻게 앱 내에 정적 리소스를 참조하도록 해줄 수 있지?

• ios 에서 js bundle 은 CDN 에서 불러오고, assets 폴더는 Xcode > Build Phases > Copy Bundle Resources 에 수동 추가했음에도 이미지 등 정적 리소스가 보이지 않음 -> 왜 그런지 이유 알아봐야 함. 혹은 다른 방법 찾아봐야 함.

고민 3. 기존에 있던 정적 리소스는 앱 내에 넣고, 새로 추가되는 것들(앱 자동 업데이트 효과를 보고 싶은 것들)만 CDN 에 올려놓으면 어떨까?

• 앱 용량을 줄이는 목적이 아니라면 기존에 있던 정적 리소스는 앱 내에 포함해도 괜찮겠다 싶었다.
• 차피 앱 자동 업데이트는 이후에 추가될 정적 리소스에 대해서만 신경써줘야 하는데, 그때마다 추가되는 정적 리소스를 CDN 에 올려놓고 js 코드 수정해서 번들링해서 새로운 js bundle 참조하게 하면 앱 자동 업데이트 효과를 볼 수 있기 때문.
• -> 근데 js bundle 을 CDN 에서 불러오는 동시에 기존에 있던 정적 리소스를 앱 내에 넣어서 참조하는 방법 아직 못 찾음.

인사이트

• 결국 앱 자동 업데이트 효과를 보기 위해선, 정적 리소스 또한 js bundle 처럼 CDN 에 올려놓고 참조해야 한다.
  • js bundle 과 에셋(assets/)을 함께 zip 으로 묶어서 s3 에 업로드
  • 앱은 이 zip 파일을 다운로드 → 압축 해제 → js bundle 로딩 및 에셋 접근 가능
    • js bundle 은 native 에서 직접 로드
    • 에셋은 js 에서 require(...) 가 로컬 경로를 참조하도록 우회 처리

문제 2. 정적 리소스는 js bundle 빌드 시 해석되어 실제 파일명을 해시 처리한 후 번들에 포함되기 때문에, 런타임에 압축해제된 파일을 참조할 수 없는 문제

• require(...) 대신 getImagePath 같은 함수를 써서 이미지 경로를 외부에서 가져오도록 치환하는 방법 -> 정적 리소스 불러오는 모든 코드를 해당 함수 사용하도록 바꿔줘야 하는 문제 (모두 uri: ~~ 로 바꿔주겠다는 맥락과 같음)
• 빌드 시 require() 구문을 자동으로 uri: ~~ 형식으로 바꿔줄 순 없나?

고민 4. 네이티브 단의 js bundle 참조 코드가 실행되기 전에 런타임에 js 에서 압축파일이 먼저 해제되어야 정상적으로 참조될 것이다.

• 네이티브, js 사이에서 코드의 실행 순서를 어떻게 보장할까?
  • 네이티브단에서 압축해제 코드를 작성하기. js bundle 참조 전에 압축해제해서 저장해놓고 참조하기

CDN 환경 구축

• aws s3 에 js bundle 파일 업로드하고, 시스템 정의 헤더 > Content-Type: application/javascript 설정
• cloudfront 꼭 써야 할까? -> 조사 필요
• 정적 리소스도 CDN 에 올려서 해보기
  • 이미지 경로 로컬에 참조했던 거 다 바꿔줘야 함
  • 용량 얼마나 줄어드는지?