웹뷰로 기존 NextJS를 모바일 앱으로 배포하기

출처: 위키미디어

 
 
 
초년차 백엔드 개발자의 사이드 프로젝트 앱 배포 경험기입니다.
(기술적 서술이 없습니다.)
 
NextJS로 구성된 웹앱을 React Native + Expo를 사용해 안드로이드 앱으로 전환하고
배포하는 과정의 기록입니다.
(기본 도메인 세팅이 완료되었고, Vercel로 배포해놓은 상태입니다.)
 
 
 
 

개발서버

기존 NextJS로 구성된 프론트를 React Native로 EXPO를 통해 테스트용 APK를 만들어보기로했음.
 
 
expo-cli는 deprecated되었고, node 17v 이상과 호환성 문제가 발생할 수 있다고 합니다.
프로젝트 내 자체 cli를 설치하여 사용하는 걸 권장한다고 합니다.
expo build명령어도 eas build로 대체되었다고 하네요

# expo cli 설치
npm install expo-cli

# expo project 생성
expo init APKTest
cd APKTest

# 네이티브 웹뷰 설치
expo install react-native-webview

 
 
App.js의 코드를 아래와 같이 수정하고
 
 
 

//App.js
import React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return <WebView source={{ uri: 'https://your-nextjs-app.com' }} style={{ marginTop: 20 }} />;
}

 
 

npx expo start

 
이제 다됐으니 개발서버를 실행시켜본다.
 

 
 
OS에 맞는 Expo를 설치하고
(Android: Expo)
(IOS: Expo Go)
 
QR코드를 찍으면 아래와같이 게이지바가 올라가며, 빌드 되는것을 볼 수 있음

 

QR 스캔 시 반드시 같은 로컬 네트워크여야 한다.
 
 
 
 
아래 코드는, 안드로이드의 뒤로가기버튼 기능과(안하면 바로 종료됨)
모바일 상태표시줄을 앱이 삼켜버리는, 가려버리는 것을 해결하기 위한 간단한 기능들을 적용한 코드다.

(IOS, Android에 따라 다른 코드들이 좀 있나보다)

import SplashScreen from 'expo-splash-screen';
import React, { useEffect, useRef, useState } from 'react';
import { BackHandler, View } from 'react-native';
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';

async function delaySplash() {
  try {
    await SplashScreen.preventAutoHideAsync();
    await sleep(3000);
  } catch (e) {
    console.warn(e);
  } finally {
    await SplashScreen.hideAsync();
  }
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

const App = () => {
  const webviewRef = useRef(null);
  const [canGoBack, setCanGoBack] = useState(false);

  useEffect(() => {
    delaySplash();
  }, []);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (canGoBack) {
        webviewRef.current.goBack();
        return true;
      } else {
        BackHandler.exitApp();
      }
      return false;
    });

    return () => backHandler.remove();
  }, [canGoBack]);

  return (
    <SafeAreaProvider>
      <AppContent webviewRef={webviewRef} canGoBack={canGoBack} setCanGoBack={setCanGoBack} />
    </SafeAreaProvider>
  );
};

const AppContent = ({ webviewRef, canGoBack, setCanGoBack }) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom, backgroundColor: '#343a40', flex: 1 }}>
      <WebView
        ref={webviewRef}
        source={{ uri: 'https://app.ounwan.net' }}
        onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
      />
    </View>
  );
};

export default App;

 
 
 
 
 
 

APK 빌드

실제 빌드를 해보기로 했음..
 

expo build:android (x)
npx expo build:android (x)

 
위에서도 언급했듯이, build 명령어가 교체되어 사용이 안된다.

# 택일
npm install -g eas-cli
eas build --platform android

npm install --save-dev eas-cli
npx eas build --platform android

 
빌드를 진행하게되면, 이메일과 패스워드를 물으니 Expo에 가서 회원가입을 하자.
 

 

 
잠시 기다리니 빌드가 완료되었으며, Expo에서 확인할 수 있었다.
배포는 됐으나 expo doctor?? 여기서 뭔가 경고가 발생했다.

 

 
expo-permission이 사용자의 위치, 연락처와 같은 민감한 정보에 편하게 엑세스하기위해 사용한다고 되어있는데
버전 충돌이 일어나기도 하고, 필요없을 것 같아 삭제해주었다.
 
위의 경고창에서 안내된것처럼 check를 하였더니
알아서 모듈 업그레이드나 다운그레이드 및 삭제와 같은 작업들을 진행해주었다.

 

 
로컬에서 의사선생님(?)을 다시 불러서 문제없음을 확인했고

 
 

 
 
APK가 정상 배포됨을 확인할 수 있었다.
 
 
 
 
 
 

IPA 빌드

eas build --platform ios

 
IOS는 애플 ID를 묻는다.
그리고 애플 개발자 계정이 있어야하니 가입해주자.
 
가입할때, 애플쪽은 개발자계정 등록을 위해 과금까지 마쳐야하는 것 같던데,
13만원 결제하라고 되어있어서, 빌드는 살포시 접어두었다.
프리티어 같은게 있는 것 같은데, 개인 개발자는 불가능하다고해서 여기까지....
 
 

Apple Developer Program 연회비 면제 - 지원 - Apple Developer

 
 
 
 
 

기타(개발자 계정 가격)

 

 
 
 
 
 
 

마무리

많이 헤맬 줄 알았는데 생각보다 엄청 빨리 마무리된 것 같다.
 
실제 앱을 배포하는게 목적인데
프로젝트 주제에 맞게, 운동을 좋아하는 지인분들께 공유드려보고
전반적인 서비스의 문제점들을 수정, 보완하여 꼭 배포까지 사이클을 돌려
실제 서비스에서 발생하는 이슈들에 대응해봐야겠다.
 
실제 서비스 후 이슈들에 대응하는 글로 돌아올 수 있길!!
 
 
 
 
 
 

참조

Troubleshoot build errors and crashes

Expo build failed for android

Build error after updating to 5.2.10 · Issue #7981 · react-navigation/react-navigation

[앱만들기] 웹개발자가 가장 쉽게 어플만들기③ (EXPO로 AFK 만들기)