WSL2 에서 Browsersync 사용하기

윈도우10 2004 업데이트가와 함께 WSL도 업데이트가 되었다.

 

처음에는 /mnt/d/projects 디렉토리를 mount하여 document_root 로 사용했으나,

 

찾아보니 /mnt 내에 위치한 파일은 제 속도가 나오지 않는다고 한다.

 

/home 안에 새로 디렉토리를 만들었는데, 탐색기에서 접근할 방법이 막막했다.

 

\\wsl$ 경로로 접근하면 된다기에 해봤더니 권한 오류가 발생한다.

 

이 경우는 IDE를 통해 해결되었다.

 

intellij 계열이나 VScode 가 WSL 경로를 지원한다는듯 하다.

 

 

이후에 생긴 문제는 browsersync 사용 시 브라우저에서 접속이 안되는 것이었다.

 

npm run watch 커맨드를 실행하면 브라우저 탭은 새로 열리는데 접속이 불가했다.

 

자동생성되는 3000번 포트가 문제인가 하여 포트를 바꿔봐도 마찬가지.

 

그래서 WSL2로 nginx, php-fpm, browsersync를 사용하는 사람들을 위한 설정을 적는다.

 

---

혹시 몰라 윈도우 방화벽 설정에서 3000번 포트를 인바운드, 아웃바운드 규칙에 허용으로 넣어줬다.

 

WSL이 실행될때는 ssh, nginx, php-fpm이 자동으로 실행되지 않는다.

 

bat 파일을 만들어 shell:startup 폴더에 넣어줬다.

 

"C:\Windows\System32\bash.exe" -c "sudo service ssh start"
"C:\Windows\System32\bash.exe" -c "sudo service nginx start"
"C:\Windows\System32\bash.exe" -c "sudo service php7.2-fpm start"

이후 browsersync의 3000번 포트를 포워딩 하기 위해 한 줄을 추가했다.

 

netsh interface portproxy add v4tov6 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=::1

 

sshd.bat

0.00MB

위 파일을 받아서 수정하여 사용해도 된다.

 

tip1. Laravel-mix의 browsersync는 아래와 같이 설정했다.

 

mix.js('resources/js/app.js', 'public/js')
	.sass('resources/sass/app.scss', 'public/css')
	.browserSync({
		proxy: 'myapp.com',
		host: 'myapp.com',
		open: 'external',
		files: [
			'public/dist/**',
			'resources/views/**',
			'resources/lang/**',
			'resources/js/**',
		],
	});
;

 

tip2. phpstorm의 기본 터미널은 stackoverflow.com/a/51912773/4531618 의 내용에 따라 설정했다.

 

출처: blog.naver.com/seongjin0526/221778212779 -> 여기있는 ps1 스크립트가 안먹혀서, 포스팅 하단에 링크 된 -> github.com/microsoft/WSL/issues/4150#issuecomment-640343856