어플리케이션 배포

• 개발이 완료된 후 스토어에 등록해도 되지만, 개발과정에서 CI/CD 파이프라인을 구성해놓고 웹 상에 배포하면 개발이 진행됨에 따라 테스트도 쉽고, 팀원 모두가 볼 수 있다고 생각했다.
• 문제는 웹은 빌드를 통해 정적 HTML파일을 생성하고 도메인을 입력해서 접속하면 빌드된 파일이 보인다는 것이다. 하지만 앱은 HTML파일이 존재하지 않는다고 생각했다. 따라서 스토어에 등록하지 않는 이상 로컬에서만 expo와 같은 프레임워크로 테스트가 가능하다 생각했다. 배포 후에 Frontend에 대한 도메인이 있다 한들 정적파일이 없는데 주소창에 도메인을 입력한다고 해서 UI가 나오지 않을 것이라 생각했다.

  • 누군가는 그냥 스토어에 앱을 등록하면 되는 것이 아니냐라고 하겠지만, ios는 등록하기 위한 개발자 계정이 있어야 하고, 개발자 계정을 얻기 위해서는 돈과 시간이 많이 소요된다. 또한 심의도 매우 까다롭다. 따라서 개발이 완료되지도 않았는데 앱을 등록하기에는 어렵다. 개발과정에서도 앱을 등록하지 않고도 배포후에 웹에서 확인 할 방법이 필요했다.
  • 누군가는 그냥 로컬에서만 확인하면 되지 않냐라고 하겠지만, 배포 후 CI/CD 파이프라인을 구성해 개발자가 Commit/Push 한 코드를 자동으로 배포하여 팀원들이 웹상에서 확인할 수 있게 하고싶었다. 개발자 또한 자신이 개발한 코드를 Commit/Push 만 하면 웹에서 확인할 수 있기에 훨씬 더 편리하다.

❓ 어떻게 하면 앱 개발 프레임워크로 개발된 것을 웹으로 접속할 수 있을까

---

📒 해답은 React Native 프레임워크의 특성에 있었다

• 크로스 플랫폼 : RN은 크로스 플랫폼으로써 ios와 안드로이드 둘 다 개발이 가능하다.

• 크로스 플랫폼이란 위의 의미도 있지만 웹/앱이 둘 다 가능하다는 의미도 존재한다. 분명 RN은 앱 개발 프레임워크인데 어떻게 웹이 가능할까?

1 . 과거의 몇몇 앱은 기존의 웹 개발자가 앱을 만들기 여려우니까 웹/앱으로 UI만 레이아웃을 조정해서 앱을 배포하였다. 하지만 이것은 성능이 좋지 않았다.

2 . 하지만 그렇다고 앱 개발 언어인 Swift나 Flutter를 배워서 하기에는 러닝커브가 높았다.

3 . 이를 보완하기 위해 웹 개발자가 쉽게 앱을 개발할 수 있도록 만들어진 프레임워크가 RN이다.

• React는 웹 개발자들에게 친숙하기 때문에 이와 비슷하면서 앱을 개발할 수 있는 RN은 기존 웹 개발자들에게 러닝커브가 낮았다.

❓ 그럼 웹개발 언어로 만들었으니까 RN이라 한들 빌드한다면 정적파일이 나오지 않을까?
❓ RN도 npm 기반이기때문에 npm 빌드처럼하면 정적파일이 나오지 않을까? 라는 의문이 생겼다.

-> 실제로 아래와 같이 Dockerfile을 작성해 빌드하면 이미지가 생성되고 이미지내의 Nginx에 빌드된 index.html 파일이 전달되었다.

FROM node:18.15 as builder

WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm cache clean --force
RUN npm install
RUN npm install -g expo-cli --force

COPY . .
RUN npm run build

FROM nginx:stable-alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/web-build /usr/share/nginx/html

EXPOSE 80
EXPOSE 19000
EXPOSE 19001
EXPOSE 19002
CMD ["nginx",  "-g", "daemon off;"]

• 위의 도커파일을 작성하는데 npm 버전이나, 의존성, expo,
  빌드 파일 결과물 이름 등의 수 많은 에러를 마주했었는데 그것을 해결하는 과정은 다음 블로그에서 작성할 것이다.

• 결과적으로 배포후에 'daily-pt.com' 도메인으로 웹에 접속했을 때 정상적으로 접속이 되며, 앱을 등록하지 않아도 도메인을 통해 접속해 개발과정을 테스트할 수 있었다.

• 로컬이 아닌 웹상에서 테스트가 가능하기 때문에 팀원 모두가 테스트를 해보는 것이 수월했다

• 다만 최적화 과정을 통해 앱을 사용하는 것처럼 조정해야 한다.

---

📌 RN의 장/단점

• 웹 / 앱, ios / 안드로이드가 다 가능하기 때문에 개발자 dx를 높일 수 있다.
• 하지만 업데이트가 느리며, ios / 안드로이드 둘 다 가능하다 해도 결국에 개발할 때는 각각의 설정을 해줘야 한다.