코로 넘어져도 헤딩만 하면 그만
[에러]localhost에서 연결을 거부했습니다... 본문
🤔문제의 발단 ...
Window 환경에 wsl2와 우분투를 사용하고 있다.
이틀 전, 갑작스럽게 네트워크의 속도가 느려지더니 인터넷이 연결되지 않는 문제가 발생했다. 급한대로 네트워크 환경을 확인하고 한 번 PC를 껐다가 킨 뒤 와이파이를 재연결하니 인터넷은 정상속도로 복귀하였다.
진짜 문제는 다음 날 프로젝트를 수정하면서 발견했다. 평소와 같이 npm run start로 리액트 프로젝트를 실행시켰는데, 전날까지 잘 돌아가던 화면이 뜨는 것이 아니라 localhost의 연결을 아예 거부해버렸다.
마주한 문구는 다음과 같다.
단순한 네트워크의 문제인 줄 알았는데...
다른 사이트는 전부 잘 들어가지면서 프로젝트의 로컬 호스트만 나오지 않는 상황이다.
침착하게 우선 맞닥뜨린 문제 상황을 구체적으로 확인해보기로 했다.
하나씩 확인해 본 결과, 다음과 같은 요소를 추려낼 수 있었다.
1) 해당 프로젝트만이 아니라 모든 프로젝트들에서 같은 문제가 발생하고 있었다. 서치 해봤을 때, 한 프로젝트만 연결이 안 되는 경우도 있다고 해서 체크 해봤지만 역시 그 문제는 아니었다.
2) 전날까지 멀쩡히 나오던 로컬 화면이기에 chrome 브라우저 설정 문제도 아니다.
3) 방화벽도 따로 건드린 것이 없다.
4) 인터넷 네트워크 연결은 잘 되어 있다. 다른 사이트 접속이 가능하다.
5) 연결하려는 포트를 다른 프로세스가 사용하고 있지 않다.
🚩1차로 시도해본 것
- 브라우저 쿠키, 캐시, 인터넷 기록 삭제(캐시 문제일 가능성)
- wsl 종료하고 다시 열어보기
- PC 업데이트 뒤 껐다가 켜보기
- VS code 업데이트
- npm 캐시 정리 (bash에 npm cache clean --force)
근본적인 문제가 아닌 것 같아 이때 node나 npm 재설치를 하지는 않았다. 최근 다른 라이브러리를 새로 설치한 적이 없는데 npm에서 문제가 발생할 것 같진 않았기 때문이다.
여기까지는 아무것도 해결이 되지 않는 상황으로, 다음날 다시 문제를 자세히 들여다보기 시작했다.
이때 다음과 같은 상황을 추가로 발견한다.
1) npm run start를 하였을 때, 프로젝트가 성공적으로 실행 되었다는 문구를 발견할 수 있다. 다만 로컬 호스트에서 연결만 거부하고 있을 뿐이다. 즉 VScode 의 에러 문제는 아니다.
2) On your Network 주소(사진 참고)를 열자, 드디어 고대하던 프로젝트의 화면이 보였다. 다만 localhost:3000으로 접속하면 똑같이 로컬 호스트 연결이 불가하다는 메세지가 뜨고 있었다. 그렇다면 혹시 주소의 문제?
WSL과 Windows 간의 네트워크 문제일 가능성 을 고려해보기로 한다.
🚩2차로 시도해 본 방법
- wsl 재시작. bash나 powershell(가능하면 관리자 권한)로 연 터미널에 아래와 같이 입력한다.
이때 wsl 재시작은 뒤에서 다른 설정들을 한번씩 건드릴 때마다 꾸준히 반복해 주었다.
wsl --shutdown
wsl
- WSL2 주소 획득: 우분투 터미널에서 아래와 같이 입력하여 WSL2의 IP주소를 획득한다. 일반적으로는 172.x.x.x 형태를 취하며, 본인의 경우 172.23.233.80번이라고 나왔다. 해당 주소를 획득한 뒤 localhost로 매핑한다.
ip addr | grep inet
//결과
inet 127.0.0.1/8 scope host lo
inet6 ::1/128 scope host
inet 172.23.233.80/20 brd 172.23.239.255 scope global eth0
inet6 fe80::215:5dff:fed8:7cf/64 scope link
- localhost로 매핑하기: 윈도우에서 메모장을 관리자 권한으로 연다. 이후 '열기' 클릭, 아래의 위치를 그대로 검색하여(모든 파일) hosts라고 하는 파일을 열어준다.
hosts 파일 위치: C:\Windows\System32\drivers\etc\hosts
메모장 파일의 맨 마지막에 다음과 같이 한 줄 추가한다. 이후 경고 알림을 무시하고 저장한다. 이때 최대한 다른 것은 건드리지 않도록 주의한다.(잘못하면 네트워크 문제가 발생할 수 있음.)
172.23.233.80 localhost
//주소는 다를 수 있다. 아까 획득한 IP주소를 넣어준다.이렇게 WSL2의 주소를 localhost로 매핑하는 것에 성공했다. 즉 해당 주소로 http://localhost:3000으로 접속 가능하다.
- 관리자 권한의 Powershell 터미널에서 포트 포워딩 설정: windows에서 wsl2의 포트에 접근할 수 있게 설정한다.
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.23.233.80
//맨 뒤 주소는 pc마다 다를 수 있으니 아까 얻은 wsl IP로 바꿔준다.
- 관리자 권한으로 연 명령 프롬프트에서 다음 명령어로 DNS 캐시를 정리해준다.
ipconfig /flushdns
- 이제 위에 언급한 방식대로 wsl 재시작을 다시 해준다.
- 여기까지 해서 되면 좋지만, 뭐가 문제인지 잘 안 되어서 마지막에 아래 절차를 따라 '네트워크 초기화'를 시도했다. 네트워크 초기화는 5분 뒤 PC를 완전히 재부팅하기 때문에 중요한 파일은 전부 저장하고 시도하도록 하자.
시작 메뉴에서 "네트워크 및 인터넷 설정"을 검색하고 엽니다.
왼쪽 메뉴에서 "상태"를 선택합니다.
아래로 스크롤하여 "네트워크 초기화"를 클릭합니다.
안내에 따라 네트워크를 초기화하고 시스템을 재부팅합니다.
결과적으로 네트워크 초기화를 마치고 재부팅이 끝나자, 이전처럼 npm run start로 프로젝트 화면을 로컬에서 볼 수 있게 되었다. 네트워크 초기화를 처음부터 했으면 더 빨리 해결됬을지 모르겠다.
이미 앞선 방법을 다 끝낸 뒤에 최후의 수단으로 했던 거라서... 이 글을 참고하는 분은 네트워크 초기화부터 시도해봐도 괜찮을 것 같다. 어쨌든 갑작스러운 네트워크의 문제가 확실한 걸로.
window와 wsl을 쓰는 사람 중 유사한 문제가 발생했지만 자세한 해결법에 대한 글이 없어 헤매는 경우가 있을 것 같아, 포스팅으로 남겨본다! ...다른 환경에서 발생한 문제라면 또 다른 이유가 있을지도.