Expo 와 React Native 및 안드로이드 apk 배포까지

 

 

Expo 는 iOS, Android 및 웹용 single React codebase 에서 네이티브 앱을 개발, preview, submit 및 업데이트합니다.(Develop, preview, submit, and update native apps from a single React codebase for iOS, Android, and web.)

 

 

이번 강의는 Expo 와 React Native 및 안드로이드 apk 배포까지 알아보고자 합니다.

 

Expo 설치하기

 

Step 1 : Expo CLI 설치하기

npm install -g expo-cli

 

Step 2 : Expo 에 프로젝트 생성하기

npx create-expo-app my-app

 

Step 3 : Expo 회원가입하기

https://expo.dev/signup

 

Step 4 : EAS CLI는 터미널에서 EAS 서비스와 상호 작용하는 데 사용할 명령줄 앱입니다.

npm install -g eas-cli

 

Step 5 : Expo 로그인 하기

Expo CLI를 사용하여 이미 Expo 계정에 로그인한 경우 이 섹션에서 설명하는 단계를 건너뛸 수 있습니다.

eas login

C:\Temp\expotest\my-app>eas login
Log in to EAS
√ Email or username ... shimpark@xxxx.com
√ Password ... **********
Logged in

 

Step 6 : EAS Build용 iOS 또는 Android 프로젝트를 구성하려면 다음 명령을 실행합니다. windows PC 경우에는 android 만 가능하므로 EAS Build 를 Android 로 선택했습니다.

eas build:configure

C:\Temp\expotest\my-app>eas build:configure
EAS project not configured.
√ Would you like to automatically create an EAS project for @shimpark/my-app? ... yes
✔ Created @shimpark/my-app: https://expo.dev/accounts/shimpark/projects/my-app on Expo
✔ Linked local project to EAS project ac455f20-ccd6-43bc-956f-edf06aba640a       
💡 The following process will configure your iOS and/or Android project to be compatible with EAS Build. These changes only apply to your local project files and you can safely revert them at any time.

√ Which platforms would you like to configure for EAS Build? » Android

√ Generated eas.json

🎉 Your project is ready to build.

- Run eas build when you are ready to create your first build.
- Once the build is completed, run eas submit to upload the app to app stores.   
- Learn more about other capabilities of EAS Build: https://docs.expo.dev/build/introduction

 

빌드 실행

 

Android Emulator/장치 또는 iOS 시뮬레이터용 빌드

 

Expo Application Services(EAS)는 Expo 팀에서 제공하는 Expo 및 React Native 앱용으로 긴밀하게 통합된 클라우드 서비스입니다.

 

EAS 빌드를 시도하는 가장 쉬운 방법은 Android 기기/에뮬레이터 또는 iOS 시뮬레이터에서 실행할 수 있는 빌드를 만드는 것입니다. 스토어에 업로드하는 것보다 빠르고 스토어 개발자 멤버십 계정이 필요하지 않습니다. 이를 시도하려면 설치 가능한 Android용 APK 생성 및 iOS용 시뮬레이터 빌드 생성 에 대해 읽어보세요 .

 

저희는 여기서 Android APK 파일 생성을 통해 진행할 예정입니다. .apk 를 생성하려면 빌드 프로필에 다음 속성 중 하나를 추가하여 eas.json을 수정합니다.

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}

수정이후, 이제 eas build -p android --profile preview 를 사용하여 빌드를 실행할 수 있습니다. profile 이름은 원하는 대로 지정할 수 있습니다. 프로필 이름을 'preview' 로 지정했습니다.  그러나 "local", "simulator" 또는 가장 적합한 것으로 부를 수 있습니다.

 

C:\Temp\expotest\my-app>eas build -p android --profile preview

📝  Android application id Learn more: https://expo.fyi/android-package
√ What would you like your Android application id to be? ... com.shimpark.myapp  
✔ Using remote Android credentials (Expo server)
√ Generate a new Android Keystore? ... yes
✔ Created keystore

Compressing project files and uploading to EAS Build. Learn more: https://expo.fyi/eas-build-archive
✔ Uploaded to EAS

Build details: https://expo.dev/accounts/shimpark/projects/my-app/builds/80463ee4-e55f-4101-a60d-a49ef8b24dfd

Waiting for build to complete. You can press Ctrl+C to exit.
✔ Build finished

🤖 Android app:
https://expo.dev/artifacts/eas/gQHjB2f6Ue8KTnsE32rGmv.apk

√ Install and run the Android build on an emulator? ... no

 

 

생성된 APK 파일 링크를 안드로이드폰에서 링크를 통해 다운로드 받아 설치 하면 됩니다.

 

---

 

참고사이트 

 

Expo 설치가이드 (영문)

https://docs.expo.dev/build/setup/

Creating your first build

 

---

추가 설명

 

react-native-webview는 기본 보기에서 웹 콘텐츠를 렌더링하는 WebView 구성 요소를 제공합니다.

 

expo 에 WebView 설치하기

npx expo install react-native-webview

C:\Temp\expotest\my-app>npx expo install react-native-webview
› Installing 1 SDK 47.0.0 compatible native module using npm
> npm install

added 2 packages, and audited 1150 packages in 4s

59 packages are looking for funding
  run `npm fund` for details

5 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

 

 

WebView 코드 적용하기

import * as React from 'react';
import { WebView } from 'react-native-webview';


export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

 

 

 

참고사이트

 

WebView 설명가이드

https://docs.expo.dev/versions/latest/sdk/webview/

WebView

 

Android 에뮬레이터 및 기기용 APK 빌드

https://docs.expo.dev/build-reference/apk/

Building APKs for Android Emulators and devices

 

---

 

실무 제품군 구축 후 서비스할 경우에 대한 생각을 찾아봤습니다. !!! 

 

https://www.inflearn.com/chats/454070/%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%8B%A4%EB%AC%B4-%EA%B0%9C%EB%B0%9C-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4

 

1. 리액트 네이티브에 웹뷰를 올려 주요 비즈니스 로직들은 웹으로 컨트롤 하고 로그인 등 정도만 리액트 네이티브로 개발하려고 하는데 제로초님이 보시기에 우려되는 문제점이 있을까요?

*저희 회사 서비스는 여타 다른 커머스 앱과 유사하며 웹과 앱 모두 운영할 계획에 있습니다.

2. 위와 같이 웹뷰를 활용하고 리액트 네이티브를 최소화하여 개발할 경우 ios나 안드로이드 같은 네이티브 지식이 필요할까요? 현재 회사내에 안드로이드 개발자는 있지만 ios 개발자는 없습니다. ㅠㅠ

3. 강의 내용과 레포를 보니까 react-native init으로 프로젝트를 만드신 것 같은데, expo로 실제 서비스를 만드는 것에 대해서는 어떻게 생각하시나요? 장단점이 궁금합니다.

 

 

---

Publish an Expo App on Google Playstore

 

https://www.youtube.com/watch?v=7K6l3Jxi6SE 

 

참고사이트 

 

React-Native-Expo-앱-구글-플레이-스토어에-올리기

 

React Native Expo Android앱 Google Play Store 등록 가이드