WSL에서 개발 환경 구축하기 | Node.js, Git, VSCode

 

 

---

 

개요

Windows 환경에서도 리눅스 개발 환경을 사용할 수 있게 해주는 WSL(Windows Subsystem for Linux)은 많은 개발자들에게 사랑받는 기능입니다. 이번 포스팅에서는 WSL 위에 개발 환경을 구성하는 방법을 소개합니다. 특히 VSCode, Git, Node.js를 중심으로 단계별로 설치해보겠습니다.

 

WSL 설치 및 설정

WSL 활성화 및 리눅스 배포판 설치
https://sillimmouse.tistory.com/104

 

WSL에 개발 도구 설치하기

Git 설치 및 설정

git 설치

sudo apt update
sudo apt install git

 

git 설치 확인

git --version

 

git 설정

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

 

 

Node.js 설치 (NVM 이용)

wsl 활성화 후 관리자 모드로 WSL 실행하여, curl 명령어 설치

sudo apt-get install curl

 

 

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

 

설치 후 터미널 다시 켜거나, 아래 명령어로 적용

source ~/.bashrc  # 또는 ~/.zshrc

 

• 리눅스 환경에서는 Node를 전역이 아닌 디렉토리별로 관리하므로, npm-cli 오류 시 nvm 경로를 디렉토리에 추가해주면 해결됩니다.

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

 

nvm 으로 Node.js 설치 및 버전 확인

nvm install node
nvm use node

nvm -v
node -v

 

 

Docker 설치 후 WSL에 개발 환경 구축하기

docker 설치합니다. 

sudo apt install docker.io

 

sudo 없이 Docker 명령을 실행할 수 있도록 권한 부여

sudo usermod -aG docker $USER

 

docker 버전이 출력되면 설치 완료

docker --version

 

Docker 공식 웹사이트에서 Docker Desktop을 다운로드하고 설치합니다.

 

Docker Desktop 설치 시 WSL 2 backend를 사용하도록 설정됩니다. Docker Desktop을 실행하고, Settings > Resources > WSL Integration에서 사용할 리눅스 배포판(Ubuntu 등)에 체크되어 있는지 확인하세요.

 

터미널(WSL)을 열고 다음 명령어를 입력하여 Docker 버전 정보를 확인할 수 있습니다. 정상적으로 설치되었다면, Docker 엔진 및 정보가 출력됩니다.

docker --version
docker info

 

hello-world 이미지는 Docker가 잘 동작하는지 확인할 수 있는 간단한 테스트용 이미지입니다. 다음 명령어로 실행할 수 있습니다. 이 명령어를 실행하면, Docker 엔진이 정상적으로 설치되어 있고 컨테이너가 잘 동작하는지 확인할 수 있는 메시지가 출력됩니다. 

docker run hello-world

 

WSL에 다른 Docker 컨테이너 실행하기

Node.js가 미리 설치된 Docker 이미지를 실행하려면 다음과 같은 명령어를 사용합니다. 이 명령어는 node:lts 이미지를 기반으로 새로운 컨테이너를 실행하고, bash 쉘로 들어가게 됩니다. --rm 옵션은 컨테이너 종료 시 자동으로 삭제되도록 합니다.

docker run -it --name dev-node -v ${PWD}:/app -w /app node:lts bash

 

실행 중인 컨테이너를 종료

docker stop <컨테이너 ID 또는 이름>

 

 

VSCode 설치 및 WSL 연동하기

VSCode 실행 후 Extensions에서 Remote - WSL 검색 → 설치

 

'ctrl + shift + p > WSL : 배포판을 사용하여 WSL에 연결… '을 선택합니다.

 

Ubuntu 를 선택합니다.

 

VS창이 새로 열리고, 하단에 ubuntu 라고 표시 된다. 이게 리눅스 환경으로 VS이 실행되고 있다는 표시이다.

폴더 열기 후, 원하는workspace 경로를 입력한 루 확인을 클릭합니다.

 

' 이 폴더에 있는 파일의 작성자를 신뢰합니까?' 팝업이 표출되면  '예, 작성자를 신뢰합니다' 선택하면 됩니다.

 

WSL로 리눅스 프로젝트 열기 완료

 

WSL 터미널에서 위 명령어를 입력하면 VSCode가 해당 디렉토리를 리눅스 환경으로 열어줍니다.

code .