[npm] wsl2에서 npm 명령어의 반응이 느림 - 해결!

npm 명령어 반응이 느리다.

혼자 node.js 공부를 하면서 npm을 사용할 일이 생기기 마련이었다.

$ npm init

npm init을 했는데 명령 수행까지 한 3~4초나 소요되는 것이다. 

-verbose 옵션을 주고 처리시간을 봤는데 처리하는데 실질적인 시간을 얼마 안걸리고, 명령어가 처음 실행되는 시간이 무척 오래걸렸다.

참을 수 없어서 이유를 찾아보다가 뜻밖에 장소에서 이유를 찾을 수 있었다.

 

https://docs.microsoft.com/ko-kr/windows/dev-environment/javascript/react-on-wsl

https://docs.microsoft.com/ko-kr/windows/dev-environment/javascript/react-on-wsl

Linux용 Windows 하위 시스템에 React 설치

 

npm 반응 속도를 높이는 것을 포기하고 그냥 react를 설치하려고 했는데 microsoft 문서에서 이러한 글을 찾을 수 있었다. 

이미지에서 파란박스(중요) 부분을 보면 탑재된 c 드라이브에 nodeJs를 설치하면 설치 및 빌드시간이 늘어난다는 것이다.

 

그래서 좀 더 찾아보니 

https://stackoverflow.com/questions/68972448/why-is-wsl-extremely-slow-when-compared-with-native-windows-npm-yarn-processing

https://stackoverflow.com/questions/68972448/why-is-wsl-extremely-slow-when-compared-with-native-windows-npm-yarn-processing

Why is WSL extremely slow when compared with native Windows NPM/Yarn processing?

 

WSL2는 윈도우 드라이브에 접근하기 위해 9p protocol을 사용하는데 이것이 매우 매우 느리다는 것이다.

 

따라서 제시된 해결책이

1. WSL1 을 사용할 것

2. 프로젝트 WSL의 root로 옮길 것(window drive인 mnt를 쓰지 말라는 것)

 

wsl1은 스쳐지나간 기억에 react나 nodejs에서 문제가 발생한다고 들었기 때문에 나의 home 디렉토리를 /mnt/하위 디렉토리가 아니라 /home/username 쪽으로 바꾸기로 마음 먹었다.

 

WSL 홈 디렉토리 변경

usermod 사용

구글링하여 홈 디렉토리를 변경하는 방법을 찾아보았다. 보아하니 user마다 홈 디렉토리가 다르고 그것을 바꿔주는 과정이었다. 

$ usermod -d /newhome/username username

이 명령어를 사용하면 username이라는 사용자의 홈 디렉토리를 /newhome/username로 바꾸는 것이다.

하지만 역시 한번에 먹히면 재미가 없나보다. 

 

usermod: user username is currently used by process 359

이미 프로세스에서 username이 사용 중이라고 끄고 다시 시도하라는 것 같다. 

superuser로 바꾸고 다시 시도해 보았으나 결과는 똑같았다.

kill 명령어로 프로세스를 죽여도 보았으나 어째서인지 su 모드인 터미널 창도 같이 꺼져서 다른 방법을 시도하기로 했다. 

 

/etc/passwd 편집

/etc/passwd에 user에 대한 정보와 홈디렉토리 등 정보가 있다. 하지만 vim과 같은 에디터로 직접 수정하는 것보다 

vipw 명령어를 사용하는 것이 좋다고 한다. 동시에 여러 사용자가 이 정보를 수정하려고 할때 발생하는 충돌을 막기 위함이라고 한다. 

$ sudo vipw

원하는 에디터를 고르라고 나온다. 본인은 vim을 사용하였다.

(-s 옵션은 /etc/passwd의 shadow 버젼을 수정하는 것이라고 한다. shadow 버전을 수정할 것이 아니니 -s 옵션은 빼주자)

이후에 vim으로 passwd가 열린다. 그럼 원하는 사용자의 홈디렉토리를 수정하고 저장하고 나오면 된다.

이렇게 홈디렉토리를 변경해주었다.

 

nvm, npm, node 재설치

원래 /mnt/ 하위 디렉토리에 설치되었던 node 관련 프로그램들을 삭제하고 바뀐 홈 디렉토리에 설치한다.

 

nvm, npm, node 삭제

일단 nvm에서 설치했던 node를 삭제한다. 

//설치된 node 버젼 확인
$ nvm list

//설치된 node 제거 -> vxx.xx.xx는 버전, 버전을 명시하여 삭제 가능
$ nvm uninstall vxx.xx.xx

 

.bashrc나 .zshrc에 작성된 

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

요 내용을 지우라는데, 홈디렉토리도 변경했기 때문에 이전 홈 디렉토리의 .zshrc를 바꾸기 보단  바뀐 환경의 .zshrc를 변경할 필요가 있다.

 

여러 node 관련 디렉토리들을 삭제한다.

$ rm -rf $NVM_DIR
$ rm -rf ~/.nvm
$ rm -rf ~/.npm
$ rm -rf ~/.bower

 

변경된 홈 디렉토리에 재설치

cURL(명령줄을 사용하여 인터넷에서 콘텐츠를 다운로드하는 데 사용되는 도구)을 설치한다.

$ sudo apt-get install curl

 

nvm 설치 

//작성일자 기준 nvm 최신버전임
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

nvm 최신버전 확인 : https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

설치확인

$ command -v nvm
nvm

nvm이 반환되면 잘 설치된 것이다.

 

node 설치

//lts 버전 (현재 안정적인 릴리스 버전)
$ nvm install --lts

//현재 최신 버전
$ nvm install node

//nvm list로 설치 확인 및 버전 확인
$ nvm list

 

npm 반응 속도 확인

$ npm --version

npm 버전 확인으로 반응 속도를 확인해봤다. 확실히 속도가 훨씬 빨라진 것을 느낄 수 있었다.