goorm ide에서 로컬호스트 접근 불가로 expo dev tool을 열 수 없습니다.


  • Level 3

    구름 ide 컨테이너에서 expo dev tool을 열기 위한 로컬호스트 접근이 어렵습니다.

    http://localhost:19002로 접근 시 아래 알림이 뜹니다.

    사이트에 연결할 수 없음
    localhost에서 연결을 거부했습니다.

    다음 방법을 시도해 보세요.

    연결 확인
    프록시 및 방화벽 확인
    ERR_CONNECTION_REFUSED

    해결방법을 찾기 위한 검색 중에 프로젝트>실행 URL과 포트 창에 들어가 해당 URL에 접근해보고 잘 안되면 https를 http로 바꿔보라는 내용이 있어 두가지 모두 해보았습니다. 다음 알림이 떴습니다.

    Connection Refused
    서버를 실행했는지 확인하세요.
    서버를 실행했으나 코드 상의 에러 발생 등으로 인해 정상적으로 실행이 안됐는지 확인하세요.
    서버를 실행하자마자 이 페이지에 접속했다면 잠시후에 이 페이지를 새로고침 해보세요. 서버가 완전히 실행되는데까지 시간이 좀 더 필요한 경우일 수 있습니다.
    이 페이지의 도메인이 사용하는 포트(상단메뉴 [프로젝트] - [실행 URL과 포트] 메뉴에서 확인 가능)가 서버에서 listening하는 포트와 같은 지 확인 해보세요.
    서버의 호스트 설정이 localhost 또는 127.0.0.1이라면 0.0.0.0으로 수정 해보세요.

    1,2,3은 문제 상황이 아닐 것 같아 4,5번을 시도해보려 했습니다.

    4번은 프로젝트>실행 URL과 포트 창에 있는 포트번호와 Metro Bundler 포트 번호의 일치를 확인하라는 것인가요? 그렇다면 80과 53509로 일치하지 않는 것 같습니다.

    5번은 goormide에서 서버의 호스트 설정을 수정하는 법을 모르겠습니다.

    관련 지식이 부족하여 설명이 미숙한 점 먼저 사과드리겠습니다.

    서비스 너무 잘 사용하고 있고 항상 감사드립니다.

    문제점을 해결할 수 있다면 좋을 것 같습니다. 감사합니다.

  • Level 3

    ![alt text](image url)

  • Level 12

    @정동혁

    해결 되셨다니 다행입니다.

    저는 현업에서 풀스택 개발자로 일하고 있습니다.
    사람마다 다르겠지만 제 경험상으로는 개인적으로 공부하며 배운 것 보다 일하면서 자연스럽게 배운게 더 많은 것 같습니다.

  • Level 3

    @Jose-goorm

    와우!!!!! 말씀하신대로 해보았더니 해결되었습니다.
    정말 감사합니다. 신기하네요!!!

    개발을 처음 하다보니 모르는 내용이 조금 많네요. 무작정 따라하긴 했지만 왜 그런지가 궁금합니다.
    혹시 이런 류의 지식(환경변수, 포트, 웹소켓, 프로토콜 등)은 서버 공부를 하면서 얻으신 건가요??

  • Level 3

    와우!!!!! 말씀하신대로 해보았더니 해결되었습니다.
    정말 감사합니다. 신기하네요!!!

    개발을 처음 하다보니 모르는 내용이 조금 많네요. 무작정 따라하긴 했지만 왜 그런지가 궁금합니다.
    혹시 이런 류의 지식(환경변수, 포트, 웹소켓, 프로토콜 등)은 서버 공부를 하면서 얻으신 건가요??

  • Level 12

    안녕하세요.

    Expo DevTools가 localhost로 실행되는 것이 문제인 상황으로 생각되어 찾아보니 EXPO_DEVTOOLS_LISTEN_ADDRESS 환경변수 설정을 통해 바꿔줄 수 있는 것을 찾아냈습니다.
    아래 방법으로 환경변수 설정을 해주세요.

    1. Alt + P 단축키를 눌러 설정 창을 엽니다.
    2. 왼쪽 메뉴에서 터미널 > 프로필로 들어갑니다.
    3. 오른쪽 프로필 에디터의 맨 아래줄에 다음 내용을 추가해줍니다. export EXPO_DEVTOOLS_LISTEN_ADDRESS="0.0.0.0"
    4. 적용 후 닫기를 눌러 저장 후 브라우저 새로고침하여 IDE에 다시 접속합니다.
    5. 상단 메뉴 프로젝트 > 실행 URL과 포트 메뉴에서 URL을 하나 추가해줍니다. 이 때 포트는 19002로 설정합니다.

    이걸로 끝인줄 알았는데요, 추가해준 URL로 직접 들어가보니 문제가 하나 더 발생했습니다. (검은 화면만 나오고 아무 반응이 없는..)
    브라우저 개발자도구 콘솔을 보니, 내부적으로 웹소켓 연결을 하는데 ws 프로토콜을 사용하고 있지만 접속한 URL은 https인 게 문제로 보입니다.
    브라우저 주소표시줄에서 httpshttp로 바꿔줍니다.
    그래도 계속 검은 화면만 나옵니다. 다시 개발자도구 콘솔을 보니 이번엔 다른 에러가 있습니다.
    에러 내용을 보니 웹소켓 연결을 ws://[컨테이너IP]:19002/ 주소로 시도했지만 실패한 것으로 보입니다. 이런식으로 연결하려면 포트포워딩 설정에서 포트를 하나 더 열어줘야 하지만, 포트포워딩 설정 2개가 제한인데 이미 19000, 19001 포트가 사용하고 있는 상황입니다.
    다른 방법을 찾아보다가 DevTools쪽 소스코드를 수정하여 이전 단계에 추가했던 URL로 웹소켓 연결을 하도록 만들기로 했습니다.
    아래 방법을 따라 소스코드를 수정해주세요.

    1. 다음 터미널 명령을 입력하여 원본 소스를 복사해옵니다. ([프로젝트 이름] 부분은 질문자님 프로젝트 이름으로 수정해주세요)
      터미널에서 복사/붙여넣기는 어떻게 하나요?
    cp /usr/lib/node_modules/expo-cli/node_modules/\@expo/dev-tools/build/server/DevToolsServer.js /workspace/[프로젝트 이름]/DevToolsServer.js
    
    1. 프로젝트 탐색기에서 DevToolsServer.js 파일을 엽니다.
    2. 59번 라인의 hostname 변수 선언 부분
    const hostname = `${devtoolsGraphQLHost()}:${port}`;
    

    을 아래와 같이 수정합니다. (이전 단계에 추가했던 실행URL로 설정해줍니다. 아래 코드는 예시이므로 그대로 사용하시면 안됩니다.)

    // const hostname = `${devtoolsGraphQLHost()}:${port}`;
    const hostname = 'example-dev-tools-host.run.goorm.io';
    
    1. 저장 후, 다음 터미널 명령을 입력하여 수정한 소스를 원본에 덮어 씌웁니다. ([프로젝트 이름] 부분은 질문자님 프로젝트 이름으로 수정해주세요)
    cp /workspace/[프로젝트 이름]/DevToolsServer.js /usr/lib/node_modules/expo-cli/node_modules/\@expo/dev-tools/build/server/DevToolsServer.js
    

    위 단계까지 마치셨으면 해당 URL을 통해 Expo DevTools에 접근하실 수 있습니다.
    alt text

    감사합니다.

SUGGESTED TOPICS