WSL + PHP + XDEBUG + Visual Studio Code
코린이 시절 우분투 개발환경이 익숙하지 않아 우분투 연습 겸 여기저기 찾아보면서 개발환경을 구축하고 개발을 해왔는데 지금은 윈도우보다 우분투가 훨씬 편합니다.
이 글을 보시고 많은 도움이 되길 바랍니다.
앞으로 WSL 기반으로 node, vue 등등 제가 현재 다루고 있는 개발환경을 포스팅할 예정입니다.
WARNING :: 최대한 로컬 개발환경을 빠르게 구성하는게 목표입니다.
따라 하시기만 하면 됩니다!
1. 마이크로소프트 스토어에서 원하는 우분투를 설치해준다.
2. 정상적으로 설치된 모습
3.vscode에서 Ctrl + [ , ] , terminal 검색 windows Exec -> bash.exe를 wsl.exe로 변경
4. 익스텐션에서 wsl 검색 후 설치
5. 왼쪽 하단 맨 밑 wsl 클릭 후 remote-wsl:new window 선택
터미널 단축키는 Ctrl + [ ` ] , 프로젝트 목록은 Shift + Ctrl + [ e ] 프로젝트 선택 가능
5. 하단 터미널이 우분투에 연결된 모습. 윈도우 디렉토리 접근은 /mnt로 접근 가능(wsl초기에는 vscode에서 지원을 하지 않았다..)
WSL 설치 후 기본적인 세팅
처음 wsl를 시작하면 username , password 입력 후
apt 패키지 다운로드 주소부터 바꿔준다. (기존 주소는 느리다..)
1. 우분투에 설정한 기존 계정으로 사용을 해도 무방한데 패키지 설치나 소스 수정 시 sudo를 붙여줘야 하기 때문에 필자는 귀찮아서 root 계정으로 개발
- 우분투 root 계정 비밀번호 설정
sudo passwd
- root 계정으로 전환
su -
2. 패키지 업데이트 (root 계정이면 sudo 불필요)
sudo apt update; sudo apt upgrade -y;
apache 및 XDEBUG (로컬 개발) 세팅
- 아파치부터 설치해준다
sudo apt install apache2
(아파치 설치하는 모습, 이 글에선 아파치 가상 호스트 설정은 다루지 않는다.)
hosts 설정
1. C:\Windows\System32\drivers\etc
2. 메모장을 관리자 권한으로 실행
3. hosts 를열고 가상호스트를 잡은 도메인 입력(사진 참조)
이글에선 가상호스트 설정을 다루지 않기때문에 모르시는분은
127.0.0.1 localhost 를 입력 or 주석삭제 해주시면 됩니다.
-아파치 실행
sudo service apache2 start
아파치 실행 후 localhost or 127.0.0.1 or 설정한 가상 호스트로 접속
아파치 index의 기본 경로는 /var/www/html
-PHP 설치
sudo apt install php
설치 확인
php --version
-phpinfo
최대한 빠르게 개발환경을 구성하기 위해 아파치의 기본 경로 /var/www/html 에서
index.html을 index.php로 변경 및 <?php phpinfo(); ?>삽입
cd /etc/var/www/html
mv index.html index.html.bak
vim index.phpvim 에디터에 대한 자세한 설명도 생략하겠습니다.
vim index.php 입력을 하면 에디터가 열리고 i를 누르면 insert모드가 됩니다
xdebug 설치
sudo apt install php-pear php-dev
pecl install xdebug
php.ini에 익스텐션을 해주면 된다.
cd /etc/php/7.2/apache2
sudo vim php.ini
에디터가 열린 상태에서 shift+g 를 누르면 맨 하단으로 내려가고
i를 누르면 insert모드로 변경
맨 하단에
[XDEBUG]
zend_extension=/usr/lib/php/20170718/xdebug.so 추가 후
esc -> :wq 입력
설정 후 아파치 재실행
service apache2 restart
-vscode 세팅
sudo vim /etc/php/7.2/apache2/php.ini설치 후 php.ini 에
zend_extension=/usr/lib/php/20170718/xdebug.so 밑에
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
추가 후 아파치 재실행
chmod -R 777 /var/www/htmlvscode에서 /var/www/html 디렉토리의 접근권한이 없기 때문에 권한을 오픈
다시 vscode로 와서
F5 : 실행 -> php 선택( 프로젝트당 처음만 선택)
localhost 새로고침을 하면 브레이크 포인트가 잡힌다.
로컬 개발 시 매우 유용한 디버거입니다. PHP 자체에서 지원을 하지 않기 때문에 번거로움이 있지만 한번 구성을 하면 매우 편한 기능입니다.
예전 회사에선 로컬 개발이 가능해서 자주 쓰곤 했는데 이직한 회사에선 내부망 때문에 쓰지 못하고 있는 현실...
댓글