안녕하세요.
Expo DevTools가 localhost로 실행되는 것이 문제인 상황으로 생각되어 찾아보니 EXPO_DEVTOOLS_LISTEN_ADDRESS
환경변수 설정을 통해 바꿔줄 수 있는 것을 찾아냈습니다.
아래 방법으로 환경변수 설정을 해주세요.
- Alt + P 단축키를 눌러 설정 창을 엽니다.
- 왼쪽 메뉴에서
터미널 > 프로필
로 들어갑니다.
- 오른쪽 프로필 에디터의 맨 아래줄에 다음 내용을 추가해줍니다.
export EXPO_DEVTOOLS_LISTEN_ADDRESS="0.0.0.0"
적용 후 닫기
를 눌러 저장 후 브라우저 새로고침하여 IDE에 다시 접속합니다.
- 상단 메뉴
프로젝트 > 실행 URL과 포트
메뉴에서 URL을 하나 추가해줍니다. 이 때 포트는 19002로 설정합니다.
이걸로 끝인줄 알았는데요, 추가해준 URL로 직접 들어가보니 문제가 하나 더 발생했습니다. (검은 화면만 나오고 아무 반응이 없는..)
브라우저 개발자도구 콘솔을 보니, 내부적으로 웹소켓 연결을 하는데 ws 프로토콜을 사용하고 있지만 접속한 URL은 https인 게 문제로 보입니다.
브라우저 주소표시줄에서 https
를 http
로 바꿔줍니다.
그래도 계속 검은 화면만 나옵니다. 다시 개발자도구 콘솔을 보니 이번엔 다른 에러가 있습니다.
에러 내용을 보니 웹소켓 연결을 ws://[컨테이너IP]:19002/ 주소로 시도했지만 실패한 것으로 보입니다. 이런식으로 연결하려면 포트포워딩 설정에서 포트를 하나 더 열어줘야 하지만, 포트포워딩 설정 2개가 제한인데 이미 19000, 19001 포트가 사용하고 있는 상황입니다.
다른 방법을 찾아보다가 DevTools쪽 소스코드를 수정하여 이전 단계에 추가했던 URL로 웹소켓 연결을 하도록 만들기로 했습니다.
아래 방법을 따라 소스코드를 수정해주세요.
- 다음 터미널 명령을 입력하여 원본 소스를 복사해옵니다. ([프로젝트 이름] 부분은 질문자님 프로젝트 이름으로 수정해주세요)
터미널에서 복사/붙여넣기는 어떻게 하나요?
cp /usr/lib/node_modules/expo-cli/node_modules/\@expo/dev-tools/build/server/DevToolsServer.js /workspace/[프로젝트 이름]/DevToolsServer.js
- 프로젝트 탐색기에서
DevToolsServer.js
파일을 엽니다.
- 59번 라인의 hostname 변수 선언 부분
const hostname = `${devtoolsGraphQLHost()}:${port}`;
을 아래와 같이 수정합니다. (이전 단계에 추가했던 실행URL로 설정해줍니다. 아래 코드는 예시이므로 그대로 사용하시면 안됩니다.)
// const hostname = `${devtoolsGraphQLHost()}:${port}`;
const hostname = 'example-dev-tools-host.run.goorm.io';
- 저장 후, 다음 터미널 명령을 입력하여 수정한 소스를 원본에 덮어 씌웁니다. ([프로젝트 이름] 부분은 질문자님 프로젝트 이름으로 수정해주세요)
cp /workspace/[프로젝트 이름]/DevToolsServer.js /usr/lib/node_modules/expo-cli/node_modules/\@expo/dev-tools/build/server/DevToolsServer.js
위 단계까지 마치셨으면 해당 URL을 통해 Expo DevTools에 접근하실 수 있습니다.
감사합니다.