RN(expo) iOS 환경에서 웹뷰가 흰 화면만 나오는 문제

오늘 갑자기 발생한 새로운 문제! 잘만 되던 expo go, 시뮬레이터에서 웹뷰가 보이지 않는 현상이 발생했다.

증상은 이랬다.

1. PWA, 크롬에서는 잘만 보이는 웹 페이지가 웹뷰만 들어가면 안보였다.
2. 웹뷰가 문제인가? 싶어서 url을 구글, 네이버같은곳으로 바꿔보니까 잘만 보임.
3. ? SSL 인증서 문제인가? 싶어서 구글링해보니 SSL로 곤혹을 겪은 분들은 많으나 애초에 증상자체가 다르고 우리 페이지는 https로 잘만 설정되어 있음.
4. ? 내가 뭐 개발하다가 잘못만졌나? 하고 다른 프로젝트하고 팀원 맥북으로 예전 코드를 돌려보니 그사람것도 안돌아감.
5. webview에 onHttpError로 찍어보니 브라우저에서는 잘보이던 페이지가 웹뷰만 씌우면 404 에러가 떴음.

<WebView
      ref={webViewRef}
      source={{ uri: currentUrl }}
      onHttpError={(e) => console.log(e.nativeEvent)}
      // 여기서 찾을 수 있었음.
      onScroll={handleWebviewScroll}
      style={webviewStyles.webview}
      onNavigationStateChange={handleNavigationStateChange}
      domStorageEnabled={true}
      javaScriptEnabled={true}
      cacheEnabled={false}
    />

마음속으로 욕을 하며 한참을 고민하다가 아 이거 너무 시간이 오래걸린다 싶어 팀장님께 도움을 청해보니,

url이 이상한데로 리다이렉션이 걸리는 것 같다고 하셨다.

그래서 코드에 리다이렉션 되는 곳이 있나 싶어서 코드를 쭉 살펴봤는데 없었다. 대체 뭐지 싶어서 유심히 보니,
로컬 환경에서는 리다이렉션이 안걸리고, 프로덕션 환경에서만 리다이렉션이 걸리고 있었다.

나는 멘붕이 왔고, 팀장님 조언을 듣고 배포에 문제가 있었나 찾기 시작했다. 그렇게 찾게된 문제는
Amplify 배포시 리다이렉션 설정을 React 환경에 맞춰서 해줘야 한다는 것이었다.

React App에는 SPA(Single Page App) 자체 라우팅이 있으며 AWS 측에서는 기본 경로를 제외한 다른 모든 경로가 서버 측에 없기 때문에 404를 반환합니다.

amplify에서 index.html로 리다이렉트 설정을 해두면, react router가 라우팅을 처리합니다.

참고 : https://ahnanne.tistory.com/97

해결책은 간단했다.

💡

AWS Amplify > 앱 설정 > 다시 쓰기 및 리디렉션 에서 아래 규칙으로 수정하면 된다.

• 소스 주소: </^[^.]+|.(?!(css|gif|ico|jpg|jpeg|js|png|txt|svg|woff|woff2|ttf|map|json|xml ))([^.]+$)/>
• 대상 주소 : /index.html
• 형식: 200(Rewrite)

웹뷰 자체에서 리다이렉션이 걸려 계속 후행 슬래시가 url에 붙고, 이로 인해 흰 화면만 출력되는 것 같았다.

rn..어렵다...