Frontend 도커라이징

Frontend 코드를 도커라이징 하는데 있어서 아래의 세가지 오류를 마주했고, 해결하는데 매우 오랜시간이 걸렸다.

1 . npm 빌드
2 . Expo cli 설치
3 . package.json 종속성 오류

npm 빌드

npm run build 

• Frontend 코드는 Expo 도구를 실행시킬 수 있는 환경을 React Native로 작성했다. 따라서 React Native가 npm 기반이기 때문에 단순히 npm run build를 통해 web-build파일을 얻으려고 했었다.
• 하지만 Expo를 실행시키지 못하는 에러가 계속해서 발생했고 해결방법을 찾다가 NestJs로 작성된 Backend코드를 보니 Package.json에 아래와 같이 정의되어 있었다.

{
. . .
    "build": "nest build",
}

• 결론적으로 npm run build라는 것은 npm이 빌드해주는 것이라기 보다 package.json에 정의된 빌드를 npm이 읽어주는 느낌인 것이라는 것을 알았다.

Expo를 실행시키기 위해 종속성 정보를 관리하는 package.json 코드를 아래와 같이 수정해야 했다.

{
. . .
"build": "expo export:web"
},

---

또한 빌드 중 Expo의 안정성이나 호환성 오류가 계속 발생하였는데,
알고보니 Expo가 Node.js의 특정 버전을 요구하지는 않지만, Expo CLI 및 Expo 개발 서버가 Node.js에서 실행되기 때문에 Node.js의 버전에 따라 호환성이나 동작이 달라질 수 있다는 것이였다.

FROM node:18.15 as builder

• 따라서 개발자의 node 버전과 일치하는 버전을 설치해줘야 하는게 가장 호환이 잘 될거같아 node의 버전을 18.15로 일치시켜주었다.

---

Expo CLI

• Expo를 실행시키기 위해서는 Expo 명령어를 사용할 수 있게하는 CLI가 필요했다.

	RUN npm install -g expo-cli

• Dockerfile에 위의 코드를 추가함으로써 Expo 실행이 가능해졌다.
• '-g'는 global의 약자로, 전역에 적용시키겠다는 것이다.

---

Package.json

• 위의 해결사항을 다 적용했지만 여전히 수많은 오류가 발생했다.
  하지만 에러들을 자세히보니 아래와 같은 공통점이 있었다.

  • Package.json 파일이 잘못되었다.
  • Package.json 내의 '{' 나 ',' 가 빠졌다는 Scripts오류

• 하지만 눈을 씻고 찾아봐도 기존의 Package.json의 구문에 오류가 존재하지 않았다.
• 혹시나 해서 Frontend 개발을 담당하는 팀원의 환경에서 Build해봤는데 react-dom이나 react-native-web , @expo/webpack-config가 설치되지 않았다는 에러가 발생했다.

npm install react-native-web@~0.18.10
npm install react-dom@18.2.0
npm install @expo/webpack-config@^18.0.1

• 위의 필요한 패키지 설치를 실행하고 난 후 package.json 코드는 변경되어 있었고, 다시 빌드해보니 성공적으로 빌드가 되었다.

📒 위의 Scripts 에러는 구문에러도 있지만, 코드를 빌드하기 위한 패키지들이 다 설치되지 않아 발생하는 종속성 에러도 있었다.

<최종 Dockerfile>

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;"]

---

마치며

사실 RN도 npm기반이여서 그냥 빌드하면 될 줄 알았는데 지금까지 해왔던 다른 언어와 다르게 에러도 많았고 expo를 처음 접해봤어서 에러의 원인조차도 이해하지 못해 시간이 꽤 걸렸던거 같다.

• 이렇게 에러를 해결하지 못할 때 결국 해당 코드를 개발한 것은 개발자이기 때문에 개발자와의 소통을 통해 해결하는게 가장 효율적이고 정확한 것 같다.