이전 포스트에서는 라라벨 웹 애플리케이션을 한글화 하는 방법을 알아보았다.
오늘은 라라벨로 웹사이트를 개발할 때 거의 필수나 마찬가지인 Laravel Debugbar를 설치해 보겠다.
이전 포스트
라라벨(Laravel) 초기 세팅: 타임존 설정 및 한글화
Laravel Debugbar란?
라라벨 디버그바Laravel Debugbar는 라라벨로 웹사이트를 만들 때 하단에 나타나는 '실시간 모니터링 화면'이다.
내가 만든 페이지가 열릴 때 뒤에서 SQL 데이터베이스 조회가 몇 번이나 일어났는지, 메모리는 얼마나 썼는지 눈으로 바로 확인하게 해 준다.
이를 통해 보이지 않는 코드의 문제점이나 웹사이트가 느려지는 원인을 찾아내어 더 튼튼하고 빠른 사이트를 만들 수 있도록 도와주는 필수 도구다.
GitHub - fruitcake/laravel-debugbar: Debugbar for Laravel (Integrates PHP Debug Bar) · GitHub
Laravel Debugbar의 공식 깃허브 페이지 링크다.
여러 가지 설명들과 설치방법 등이 정리되어 있으니 확인해 보자.
make app #컨테이너 안으로 들어간다.
composer require fruitcake/laravel-debugbar --devVSCode의 터미널에서 이 명령어들을 차례대로 실행한다.
이전과 설치 명령어가 조금 달라졌다. (fruitcake가 이전에는 barryvdh였다.)
이렇게 명령어가 바뀌는 경우가 있으니 항상 설치 전에는 공식 문서를 확인하자.
Found 5 security vulnerability advisories affecting 4 packages. Run "composer audit" for a full list of advisories.
이런 경고 메시지가 항상 뜨는 것은 아닐 텐데, 나는 설치 중에 이런 노란색 경고 메시지가 떴다.
패키지가 무사히 설치되긴 했는데, 마지막에 경고 메시지만 뜬 것이다.
개발하는 데 전혀 지장 없는 안전한 경고이니 안심하고 무시해도 된다.
그래도 한번 해결하고 넘어가 보자.
메시지의 내용은 "4개의 패키지에 영향을 미치는 5개의 보안 취약점 경고가 발견되었습니다. 전체 목록을 보려면 composer audit을 실행하세요."라는 뜻이다.
명령어를 실행했더니, 뭔가 길게 출력됐다. (캡처 이미지는 생략)
출력된 내용을 보니 symfony/http-kernel, symfony/mailer, symfony/mime, symfony/routing 같은 심포니Symfony 라이브러리들에서 취약점이 발견되었다고 나왔다.
라라벨은 뼈대의 상당 부분을 심포니 컴포넌트를 가져와서 만드는데, 이 하위 패키지들이 구형 버전이라 경고가 뜬 것이다.
docker-compose exec app composer update symfony/*
Ubuntu 터미널(컨테이너 밖)에서 이 명렁어를 실행하면 된다.
그다음에 VSCode의 터미널(컨테이너 안)에서 다시 composer audit을 실행하면 더 이상 경고 메시지가 나오지 않는다.
이제 라라벨 웹 애플리케이션을 브라우저로 확인해 보면, 이전과 다르게 하단에 뭔가 있다.
이것이 위에서 설명했던 Laravel Debugbar, '실시간 모니터링 화면'이다.
앞으로 개발을 하면서 이렇게 몇 개의 쿼리를 사용했는지 주로 확인하게 될 거다.
중복된 쿼리나 쓸데없이 사용되고 있는 쿼리가 발견된다면 원인을 찾아서 없애야 한다.
sudo chown -R 소유자:그룹 src/
sudo chown -R 소유자:www-data src/storage/ src/bootstrap/cache/마지막으로, 생성된 디렉터리와 파일을 수정 가능한 상태가 되도록 Ubuntu 터미널에 위의 명령어들을 실행한다.
소유자와 그룹에는 본인의 계정을 넣는다. (본인 계정을 확인하는 명령어는 whoami)
chmod -R 775 src/storage/ src/bootstrap/cache/
마지막으로, 디렉토리 권한을 설정하는 이 명령어를 다시 입력한다.
storage 디렉터리 안에 debugbar 디렉터리가 생겼기 때문이다.
이걸 하지 않으면 나중에 Register(회원가입) 페이지를 수정할 일이 있을 때, 수정 후에 Register 페이지로 이동하려고 하면 에러가 발생한다.
특정 페이지만 Laravel Debugbar를 비활성화하는 방법
Laravel Debugbar를 설치하기 전에 개발자 도구를 열고 캡처해 둔 이미지다.
아래의 캡처 이미지와 비교해 보자.
Laravel Debugbar를 설치한 후에 개발자 도구를 열고 캡처한 이미지다.
위의 캡처 이미지와 비교했을 때, 뭔가 치명적이지는 않은 가벼운 경고 메시지들이 4개가 추가되었다.
개발 초기 단계에는 개발자 도구에서 이런 경고들이 나타나면 그 원인을 초기에 잡아서 없애버려야 하는데, Laravel Debugbar를 설치하면 이렇게 모든 페이지에 무조건 4개의 메시지는 뜨게 되니까 참고하도록 하자.
이런 메시지가 4개를 초과하게 되면 그때에는 본인의 실수가 있을 수 있으니, 그때 디버깅을 하면 된다.
저 신경 쓰이는 4개의 메시지는 어차피 나중에 웹사이트를 실제로 배포할 때 Laravel Debugbar를 끄면 사라질 것이기 때문에 신경 쓰지 말자.
다른 페이지도 마찬가지다.
Laravel Debugbar 설치 전에는 아무런 경고 메시지가 없었는데, 설치 후에 4개의 메시지가 생겼다.
보다시피 위의 이미지들은 로그인 화면을 캡처한 것이다.
원래 예전에는 Laravel Debugbar를 설치한 후에 로그인 페이지와 회원가입 페이지를 가면 개발자 도구에 빨간색 X 표시의 에러 메시지가 떴었다. (상당히 오랫동안 그랬었다.)
그런데 지금은 그러지 않는 걸 보니 문제를 발견하고 업데이트가 되었나 보다.
이런 걸 보면 Laravel Debugbar는 꾸준히 업데이트되고 있는 것 같다.
그런데 저 4개의 가벼운 경고 메시지는 어떻게 해결 안 해주나..? 🙄
어쨌든 그래서 예전에는 Laravel Debugbar를 설치한 후에 로그인 페이지와 회원가입 페이지만 가면 개발자 도구에 뜨는 에러 때문에 특정 페이지만 Laravel Debugbar를 비활성화하는 방법을 썼었다.
혹시 나중에 필요할지 모르니 그 방법도 정리하도록 하겠다.
일단 '따라 해도 좋다'고 말하기 전까지는 따라 하지 말고 보기만 하자.
캡처 이미지처럼 src/vendor/fruitcake/laravel-debugbar/config 디렉터리에 있는 debugbar.php 파일에서 'except' => [...]를 찾는다.
거기에 'login'과 'register'를 추가하고 저장한다.
'except' => [
'telescope*',
'horizon*',
'_boost/browser-logs',
'livewire-*/livewire.js',
'login',
'register',
],이런 식으로 말이다.
저장한 후에 로그인과 회원가입 페이지를 다시 가보면 Laravel Debugbar가 비활성화 되면서 에러가 발생하지 않게 된다.
어차피 로그인 페이지나 회원가입 페이지에서 쿼리를 몇 개 사용하는지 확인할 일은 거의 없으니 이런 방법을 사용했었다.
Laravel Debugbar의 테마를 다크모드로 변경하는 방법
Laravel Debugbar를 설치한 후에 테마를 변경하는 방법도 있다.
아까와 마찬가지로 src/vendor/fruitcake/laravel-debugbar/config 디렉터리에 있는 debugbar.php 파일에서 변경할 수 있다.
'theme' => env('DEBUGBAR_THEME', 'auto'),이 코드를 찾아서 'auto'라고 쓰여있는 부분을 'light'나 'dark'로 수정하면 된다.
역시 개발자는 다크다.
Laravel Debugbar가 검은색으로 변했다.
그런데 사실 vendor 폴더 안의 파일은 일반적으로 직접 수정하는 파일이 아니다.
그래서 위에 링크해 둔 공식 깃허브 페이지에서 안내하는 명령어가 있다.
여기부터는 따라 해도 좋다.
make bash #컨테이너 안으로 들어간다.
php artisan vendor:publish --provider='Fruitcake\LaravelDebugbar\ServiceProvider'VSCode의 터미널에서 이 명령어들을 차례대로 실행한다.
이 명령어는 '디버그바 패키지의 숨겨진 설정 파일(debugbar.php)을 내 프로젝트 방으로 꺼내와서 복사'하는 명령어다.
실행하면 config 디렉터리에 debugbar.php 파일이 생긴다.
src/vendor/fruitcake/laravel-debugbar/config 디렉터리에 있던 debugbar.php 파일과 같은 파일이다.
기본 세팅 그대로 써도 무방하다면 굳이 이 명령어를 실행하지 않아도 되지만, 디버그바의 세부 기능을 커스텀하고 싶을 때는 이 명령어를 실행하도록 하자.
나중에 지우고 싶다면 그냥 생성된 config/debugbar.php 파일만 삭제하면 된다.
그러니 일회성 실험이라도 정석대로 위의 명령어로 debugbar.php를 밖으로 꺼내서 수정하도록 하자.
마지막으로 배포하기 전에 알아야 할 중요한 내용!
위에 링크해 둔 공식 깃허브 페이지에도 쓰여있듯, Laravel Debugbar를 설치하면 웹 애플리케이션이 느려질 수 있다.
하지만 이건 개발 환경에서만 그런거지, 배포 후(운영 서버)에는 전혀 영향을 주지 않게 만들 수 있다.
개발 환경에서 느려지는 이유는, 라라벨이 실행되는 동안 Laravel Debugbar는 뒤에서 "SQL 쿼리를 전부 가로채서 기록하고, 메모리 사용량을 실시간으로 측정하고, 로드된 파일 목록을 수집"하는 꽤 무거운 작업을 수행한다.
당연히 켜두면 웹 앱이 평소보다 무거워지고 느려진다.
실제 운영 서버에 배포할 때는 디버그바가 아예 소스 코드 메모리에 로드조차 되지 않도록 이중 잠금장치를 걸어야 한다.
이렇게 하면 배포 후에 서비스가 느려질 걱정은 전혀 하지 않아도 된다.
1. 설치할 때 --dev 옵션 붙이기
composer require fruitcake/laravel-debugbar --dev
위에서 Laravel Debugbar를 설치할 때 썼던 명령어다.
패키지를 설치할 때 이렇게 무조건 개발용으로 --dev 옵션을 넣어서 설치해야 한다.
이렇게 설치하면, 나중에 실제 운영 서버에 코드를 배포하고 패키지를 로드할 때 composer install --no-dev 명령어를 쓰게 되는데, 이때 디버그바 패키지 자체가 서버에 설치되지 않고 쏙 빠지게 된다.
2. .env 파일의 APP_DEBUG 설정
디버그바는 src/.env 파일의 APP_DEBUG 값과 연동되어 작동한다.
처음에는 APP_DEBUG=true로 설정되어 있어서 디버그바가 하단에 나타난다.
이걸 실제 운영 서버에 배포하기 전에 APP_DEBUG=false로 변경하면 디버그바 기능이 코드가 살아있더라도 강제로 완전히 비활성화(OFF)되어 메모리를 먹지 않는다.
오늘은 Laravel Debugbar에 대해서 알아봤다.
설치하는 건 금방 끝나는 일이지만, 이렇게 글로 정리하는 것은 정말 항상 너무 힘들다.
예전에 각 페이지마다 몇 줄의 쿼리문이 쓰였는지 확인하기 위해서 Telescope라는 것을 설치해서 사용한 적이 있었다.
그리고 나중에 Laravel Debugbar를 쓰게 됐었는데, 확실히 Laravel Debugbar가 더 편하고 좋다.
다음 포스트
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩