Ios 샌드박스 테스트 시 로컬서버 못찾는 에러

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

샌드박스 테스트를 하려고 하는데
메트로 서버를 찾지 못했다는 오류가 나옵니다.

localhost 대신 IP:포트번호 입력, http:// 제거, IP에서 포트번호 없애고 URL에 포트번호 명시 하는 식으로
커뮤니티에 올라온 모든 방법을 써 봐도 인식이 안됩니다.

appName (선택)

jjannae-diary

2

안녕하세요 :slight_smile:
metro 서버가 몇번 포트로 동작하고있나요 ?
로컬 시뮬레이터에서 샌드박스 테스트중이실까요 ?

3

안녕하세요,
실기기 테스트 중이고 5173번 포트에서 돌아가고 있습니다. 앱인토스 및 토스앱 모두 최신버전입니다.

4

포트가 각각 8081, 5173에서 동작중이신거죠 :slight_smile:
혹시 서비스가 올라가있는 pc와 실기기가 동일 네트워크에 있는지도 확인 부탁드려도될까요 ?

5

네 동일 와이파이에서 했고, 해당 IP로 사파리에서 접속 시 정상 접근 되는 것도 확인했습니다.

6

해결했습니다! granite dev가 아닌 npm run dev로 실행되고 있었던게 문제였네요.

8081포트가 생소해서 퇴근 후 확인해 보니 8081포트는 미사용중이었습니다.

ios 한해서는 앱인토스 앱 매뉴얼 수정이 필요한가 싶기도 합니다.. 그냥은 작동 안해서 메트로서버에는 IP만 입력 + 스키마에 포트 명시하고 나서야 작동하거든요.

7

헙 npx ait init 로 프로젝트를 초기화하셨다면,
npm run dev 실행시, granite dev 로 실행되었을 것 같은데,
혹시 재현 과정을 알려주실 수 있을까요 ?!

매뉴얼을 개선하는데 큰 도움이 될 것 같습니다 :man_bowing:

8

저는 ait init로 신규 프로젝트를 만든 게 아니라 이미 웹으로 개발 중이었던 React + Vite 웹앱을 미니앱으로 변환한 케이스라 자동 셋업이 들어오지 않은 상태였습니다. 내용 및 개선안 정리해 드립니다!

재현 과정 (제가 한 것)

  1. 기존 Vite + React 앱에 npm install @apps-in-toss/web-framework 추가

  2. granite.config.ts를 수동 작성 (webViewProps.type='partner', web.commands.{dev,build}, host, port)

  3. package.json scripts에 "intoss:dev": "ait dev"로 적음

  4. npx ait dev 실행 → Command not found

  5. 개발 서버 연결하기 가이드에 "npm run dev"라고만 적혀 있어서 vite를 직접 띄움 (vite --host 0.0.0.0 --port 5173)

  6. 샌드박스 앱이 dev 서버 못 찾음 (“Loading from Metro…” → NSURLErrorDomain -1004)

매뉴얼과 실제의 간극

  • ait CLI와 granite CLI가 별개 바이너리인데, npx ait --help엔 dev 명령이 없고 granite dev에 대한 안내를 외부 가이드에서 찾지 못함

  • 가이드의 "npm run dev"는 ait init로 만든 프로젝트의 자동 생성 scripts(내부적으로 granite dev)를 가정한 것 같은데, 기존 프로젝트 변환 케이스에선 사용자가 직접 그 사실을 알기 어려움

  • granite.config.ts의 web.host 기본값 localhost가 실기기 테스트 시 어떻게 동작하는지(매니페스트에 그대로 응답되어 폰이 자기 localhost로 가서 실패) 가이드에 명시 안 됨

그 상태로 커뮤니티의 다른 글들에서 본 입력 방식들도 시도해봤습니다

  • “스킴 자체에 포트 붙이기” (intoss://jjannae-diary:5173) → 동작 안 함

  • “IP 입력란은 포트 빼고 IP만 (192.168.x.x)” → SDK 2.0.1 마이그레이션 후 권장 패턴이라 본 게시물이 있어 시도했지만 저희 케이스에선 동작 안 함

최종 해결

  1. package.json을 "intoss:dev": "granite dev --host 0.0.0.0"으로 변경

  2. INTOSS_WEB_HOST=192.168.x.x npx granite dev --host 0.0.0.0로 LAN IP를 매니페스트에 응답

  3. 샌드박스 앱 IP 입력란에 192.168.x.x:5173 (포트 포함) 입력 → 정상 동작

개선 제안

  • 가이드의 “npm run dev” 부분에 "내부적으로 granite dev가 호출됩니다"를 명시하거나, ait dev를 granite dev의 wrapper로 추가

  • 기존 프로젝트 변환 가이드 문서 추가 (granite.config.ts 샘플 + 권장 package.json scripts)

  • web.host 기본값에 대한 실기기 테스트 시 주의사항 추가

  • 샌드박스 앱 IP 입력 형식이 미니앱 타입(WebView vs RN/Bedrock) 또는 SDK 버전에 따라 다른 것 같은데, 케이스별 명확한 안내 필요

9

아하.. @apps-in-toss/web-framework를 설치하고, npx ait init 으로 granite.config.ts 생성이 가능한데, 이 부분 설명이 미흡했던 것 같습니다.

개선 제안 주신 것으로 개발자센터 문서를 조금 더 보완해보겠습니다. 너무 감사해요 :man_bowing: