오늘은 윈도우 WSL2 Docker 개발 환경 기준 리액트/Node.js 핫리로디드 개발 환경 세팅을 정리해 보았습니다.
윈도우 기반 개발 환경이 wsl2 를 지원하며 아주 좋아졌다고 생각합니다. 하지만, 윈도우 wsl2 버전에서는 Docker를 Bind mount 하더라도 제대로 소스 반영이 되지 않습니다.
몇몇 꼼수 등이 있으나 역시 projects 폴더를 그냥 wsl2 내부에서 만들어 리눅스 기반 시스템을 사용하고 git과 연동해서 소스 버전 관리를 하는게 가장 속편한 방법인 거 같습니다.
다만 이렇게 되면 윈도우 환경에서의 여타 편리한 도구를 사용하지 못하거나, 파일 복사 등이 번거로울 수 있습니다.
그래서 윈도우 10 환경에서 wsl2 + VS Code + 리액트/Node.js nodemon ,Docker Bind mount 등의 Hot reloaded 를 어떻게 최대한 편하게 사용해 볼까 정리해 보았습니다.
이미 WSL2 및 하이퍼 바이저, Docker for Window Desktop 환경 등은 구성된 것으로 보고 이후 절차를 기술해 보았습니다.
wsl2 어디에 프로젝트 파일을 위치할까
인터넷을 구글링 해보니 윈도우 폴더를 마운트 하여 사용할 때에는 속도 이슈 등이 있었습니다.
관련 이슈 : https://learn.microsoft.com/en-us/windows/wsl/compare-versions
따라서 개발 자체는 마운트한 윈도우 폴더가 아닌, 그냥 wsl2 에 접속해서 리눅스 기준으로 VS Code Server 를 통해 작업하는 것이 더 빠를 듯 합니다.
wsl 내의 파일 관리 : 윈도우 탐색기와 wsl2 연결
윈도우 탐색기를 실행하면 다음과 같이 네트워크 탭 하단에 설치한 리눅스 wsl 시스템이 보입니다.
연결하고자 하는 리눅스 시스템을 마우스 오른쪽 버튼을 누른 후 네트워크 드라이브 연결 실행합니다.
드라이브를 지정하고 /마침/ 버튼을 눌러주면 되고, 로그인할 때 다시 연결 – 이렇게 되면 윈도우 10을 재부팅하더라도 계속 상주하게 됩니다.
만약 윈도우 탐색기 X 드라이브로 연결한 경우, 아래와 같이 보이게 되어 쉽게 wsl 내부의 파일을 윈도우 탐색기로 접근이 가능합니다.
네트워크 드라이브 이므로 토탈 커맨드, Free Commander 등의 서드파티 탐색기로도 자원 탐색이 가능합니다.
이제 wsl2 내의 파일 관리는 우리에게 익숙한 앱을 사용하면 됩니다.
윈도우 탐색기에 네트워크 드라이버는 복사를 한다던지, 개발 외에 윈도우 툴을 사용할 때 활용하시면 됩니다.
다만 아쉬운 건 윈도우 탐색기를 통해 VS Code를 열면 윈도우 기준으로 실행되는 형태로 열려서 Hot reloaded 적용이 안되는 것이 아쉽습니다. 자동으로 wsl로 인식하면 참 편했을 걸로 생각됩니다.
WSL2 환경에 개발 환경 세팅하기
윈도우 터미널, secureCRT, putty, mobaXterm 등으로 wsl2에 접속합니다.
/home/유저명/ projects 폴더 생성
우리의 프로젝트를 관리할 디렉토리를 생성합니다.
mkdir /home/user/projects
VS Code로 git을 작업하는 것도 편리하므로 먼저 VS Code를 실행합니다.
VS Code 실행해서 VS Code Server 설치
터미널 창에서 VS Code를 실행합니다.
※ 해당 터미널이 관리자 모드로 실행된 상태여야 합니다.
user@DESKTOP-xxxxxx:~/projects$ code .
그러면 아래와 같이 자동으로 VS Code Server for x64 가 설치됩니다.
이후 VS Code를 실행하면, VS Code 에서도 다음과 같이 wsl 환경으로 연결된 것을 확인할 수 있습니다.
참고로 VS Code 마켓플레이스에서 아래의 익스텐션이 설치되어야 합니다.
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl
git 설치
VS Code 혹은 터미널 프로그램에서 git을 설치합니다.
sudo apt update
sudo apt install git
git으로부터 projects 폴더 셋팅
나의 소스 git 으로부터 cloning 하거나 신규 프로젝트 생성 후 git과 연동합니다.
~/projects$ git clone https://github.com/xxxxxxxxxxxx.git
Authentication을 통해 로그인하면 정상적으로 git으로부터 소스가 wsl2 하위로 설정이 됩니다.
참고로, Authentication이 2단계 인증 등으로 설정되어 있다면 Setting > Developer Setting > Personal Access token을 발급받아 로그인을 해야 합니다.
username for : 로그인 이메일 주소
Password for : 발급받은 개인 Access Token
Docker 활성화
Docker를 활성화하기 위해서는, 윈도우 10에서 먼저 작업해야 합니다.
Docker for Desktop 윈도우 버전 설정 화면에서 다음과 같이 세팅되어 있는지 확인합니다.
윈도우 환경의 터미널 파워셀을 실행해서 다음의 명령어 수행하여 wsl2 버전을 기본으로 지정합니다.
wsl.exe --set-default-version 2
현재 설치한 wsl Dist(배포판 이름)를 설정합니다.
wsl --set-default "Ubuntu-20.04"
위와 같이 설정한 후 다시 wsl에 접속하면 다음과 같이 docker 명령어 인식하게 됩니다.
Docker + React 핫리로디드 테스트
Docker 리액트 앱 실시간 소스 수정 반영 테스트
Docker에서 리액트 앱을 실행한 후 소스가 정상적으로 반영되는지 테스트하기 위해 아래와 같이 간단히 Docker 환경을 세팅했습니다.
리액트 개발용 Docker file 작성
간단한 샘플을 Dockerize 진행했습니다.
FROM node:16-alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
RUN mkdir node_modules/.cache chmod -R 777 node_modules/.cache
COPY . .
CMD ["npm", "run", "start"]
WSL2 내에서 리액트 Docker build
wsl2에서 터미널 혹은 VS CODE를 열어 build 합니다.
docker build -f "Dockerfile.dev" -t exam12-react:1.0 .
만약 권한 오류가 발생한다면 다음과 같이 User에 Docker 실행 권한을 부여합니다.
sudo usermod -a -G docker $USER
재부팅 후에는 docker 그룹을 재실행 해줍니다.
newgrp docker
Docker Run with Bind Mount
이제 build 된 Dokcer Container를 실행합니다.
Docker 내부의 소스를 실시간으로 수정하면서 개발할 예정이므로 Bind Mount 모드로 실행합니다.
docker run -p 3000:3000 -d -it --rm --name exam12-frontend -v "/app/node_modules" -v "/home/user/projects/projects_wsl2/docker/exam12/frontend/:/app" exam12-react:1.0
(※ 중요 추가 사항 : 리액트 vite 를 사용하는 프론트엔드 앱의 경우 누락된 내용이 있어 내용을 추가합니다.)
vite.config.ts 에 다음을 추가해 주어야 합니다.
server: {watch: {usePolling: true,},
윈도우 10에서 브라우저를 실행하여 결과가 제대로 보여지면 app.js 나 index.js에서 소스를 수정한 후 결과를 확인해 보면 됩니다.
아래와 같이 wsl 상의 소스 코드를 수정하여 다시 새로고침을 해보면 됩니다. 그러면 Docker 에서 실행 중인 소스에 적용되는 것을 확인할 수 있다.
Docker + Node.js 앱 nodemon 테스트
Docker 파일 작성
리액트앱과 마찬가지로 Dockerfile을 작성합니다.
FROM node:16-alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
RUN mkdir node_modules/.cache chmod -R 777 node_modules/.cache
COPY . .
CMD ["npm", "run", "dev"]
Docker build
docker build -f "Dockerfile.dev" -t exam12-node .
Docker run
역시 bind mount 모드로 실행합니다.
docker run -d --rm --name exam12-backend -v "/home/user/projects/projects_wsl2/docker/exam12/server:/app" -v "/app/node_modules" -p 5000:5000 exam12-node
이제 Node.js 에서도 소스를 수정하면 nodemon을 통해 실시간 수정됨을 확인할 수 있습니다.
이상으로 WSL 2 Docker 개발 환경 에서 VS Code + 리액트/Node.js 실시간 수정 환경을 정리해 보았습니다.
wsl 환경에서의 VS Code 사용에 대한 좀 더 자세한 사항은 아래의 링크로 확인할 수 있습니다.
Work in Windows Subsystem for Linux with Visual Studio Code
Developing in the Windows Subsystem for Linux with Visual Studio Code
그 밖에 도움 되는 글
Notion 에서 옵시디언으로 이사 방법 공유(2023)
Font Family에 입력할 폰트명 확인(+정확한 띄어쓰기)