Expo 프로젝트에서 프론트엔드 코드 수정 후 웹 빌드 반영하는 방법

Expo를 사용해 프론트엔드를 개발하고, Render에 백엔드를 배포한 후 웹 빌드를 함께 배포하는 구조를 사용하고 있다.

하지만 프론트엔드 코드를 수정한 후에도 변경 사항이 반영되지 않는 문제가 발생하였는데, 코드를 고쳐도 업데이트가 되지 않고 계속해서 이전 버전의 오류가 발생하여 며칠간 골머리를 앓았다.

이 문제를 해결하기 위해 여러 방법을 시도한 후 웹 빌드를 다시 생성하고 백엔드 서버에 반영하는 방법을 정리해보았다.

---

🔎 원인 분석

Expo를 사용하면 웹 빌드를 dist 혹은 web-build 폴더에 생성하게 된다.
하지만 프론트엔드에서 코드를 수정해도 백엔드의 기존 web-build 폴더를 덮어쓰지 않으면 변경 사항이 반영되지 않는다.

즉, 웹 빌드를 새로 생성한 후 백엔드의 web-build 폴더를 교체해줘야 한다.

---

✅ 해결 방법: 웹 빌드 재생성 후 백엔드에 반영

1️⃣ Expo에서 웹 빌드 생성

터미널에서 다음 명령어를 실행한다.

 

npx expo export

 

👉 그러면 dist 혹은 web-build 폴더가 생성된다.

주의: Expo 최신 버전에서는 expo build:web가 지원되지 않으므로 npx expo export를 사용해야 한다.

---

2️⃣ 기존 백엔드의 web-build 폴더 삭제 후 새로운 웹 빌드 복사

백엔드 서버로 빌드된 프론트엔드를 옮기기 위해 아래 명령어를 실행한다.

 

rm -rf ../backend/web-build && mv dist ../backend/web-build

 

👉 기존의 web-build 폴더를 삭제하고 새롭게 생성된 dist 폴더를 web-build로 변경하여 백엔드로 이동시킨다.

주의: Expo 버전에 따라 web-build 대신 dist 폴더가 생성될 수 있으므로 폴더 이름을 확인 후 적절히 수정해야 한다.

---

3️⃣ 백엔드 서버 재시작

이제 백엔드 서버를 재시작하여 새로운 빌드를 반영한다.

 

cd ../backend npm run start

 

👉 Render 등의 배포 환경에서는 배포를 다시 수행해야 한다.

---

🔥 최종 자동화 스크립트

매번 위 과정을 수동으로 하기 번거롭다면, package.json의 scripts 부분에 아래 명령어를 추가하면 자동으로 실행할 수 있다.

 

"scripts": { "build-and-move": "npx expo export && rm -rf ../backend/web-build && mv dist ../backend/web-build" }

 

 

이제 프론트엔드 코드 수정 후 다음 명령어를 실행하면 자동으로 빌드와 이동이 수행된다.

 

 

npm run build-and-move

---

🎯 마무리

이제 프론트엔드 코드를 수정한 후 위 과정을 수행하면 새로운 웹 빌드가 반영된 최신 버전의 서비스를 확인할 수 있다.

혹시 변경 사항이 반영되지 않는다면?

 

• 브라우저 캐시를 삭제하고 다시 확인 (Ctrl + Shift + R)
• 백엔드 서버를 재시작
• web-build 폴더가 제대로 이동되었는지 확인