라라벨 로컬 개발시 폰에서 접속해 테스트하는 방법

로컬에서 웹개발을 할 때 스마트폰에서 접속해서 테스트를 해야만 하는 경우가 생깁니다. 브라우저 모바일 뷰로도 재연할 수 없는 이슈가 있기 때문입니다.

예컨대 저는 텔레그램 인앱 브라우저에서만 발생하는 이슈를 테스트해야 하는 경우가 있었죠.

방법을 간단히 요약하면, 우선 같은 와이파이를 사용하고, 자신의 컴퓨터 IP 주소를 확인한 뒤, 개발중인 사이트를 네트워크상에 노출해 주고, Vite 컴파일 URL을 노출해 주면 됩니다.

라라벨 사이트가 아니라면 “artisan serve로 비교적 쉽게 하는 방법”과 “Vite 컴파일 URL 노출하기”를 빼놓고 읽으시면 됩니다. 어차피 원리는 같으니까요.

같은 와이파이 사용

우선 컴퓨터와 핸드폰이 모두 같은 네트워크망 안에 있어야 합니다. 일반적으로는 같은 공유기에 연결돼 있으면 됩니다. 같은 와이파이를 잡고 있거나, 컴은 공유기에 유선으로 연결돼 있고 폰은 해당 공유기의 와이파이를 잡고 있고 하는 식으로요.

컴퓨터 IP 주소 확인

그리고 내 컴퓨터의 IP 주소를 확인합니다.

윈도우에서는 cmd로 들어간 다음 ipconfig 명령을 치면 랜 장비와 정보가 나오는데요. 이중 IPv4 항목을 보면 내 컴퓨터의 IP 주소를 알 수 있습니다.

리눅스에서는 ip addr 명령을 치면 됩니다. 결과물은 아래와 비슷한 형태일 텐데요. 아래 강조표시한 부분이 IP 주소입니다.

1: (생략)
2: enp34s0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether ab:cd:ef:ab:cd:ef brd ff:ff:ff:ff:ff:ff
    inet 192.168.1.100/24 brd 192.168.1.255 scope global dynamic noprefixroute enp34s0
       valid_lft 60000sec preferred_lft 60000sec
    inet6 fe80::e4c8:cc58:371b:ba0/64 scope link noprefixroute 
       valid_lft forever preferred_lft forever

개발중인 사이트를 네트워크상에 노출해 주기

이제 IP 주소를 쳐서 접속하면 될 텐데요.

가상서버를 사용하고 있어 내 컴퓨터에 여러 사이트가 돌아가고 있다면 바로 되진 않을 수도 있습니다.

가상서버를 사용하고 있는 게 아니라면, 그냥 폰에서 IP 주소를 입력하면 사이트가 뜰 겁니다. 이 때 앞에 http://를 붙여서 접속하는 게 좋습니다.

http://192.168.1.100

가상서버를 사용하고 있다면

아파치 설정으로 하는 방법

아파치 가상서버를 사용하고 있다면, 가상서버 위치상 라라벨 사이트를 맨 위로 오게 배치를 해 줘야 합니다.

우분투에서는 사이트 하나당 파일 하나가 배정되는데요. 라라벨 사이트 conf 파일의 파일명이 가나다순으로 맨 앞에 오게 하면 됩니다.

간단히 하려면 sites-availables/default.conf 파일에 서버 설정을 넣으면 됩니다. 우분투는 이 파일을 sites-enabled/000-default.conf에 심링크로 걸어 사용하기 때문입니다.

default.conf 파일을 사용하지 않고 하려면 sites-enabled/000-default.conf를 삭제하고 의도한 사이트 conf 파일의 이름을 가나다순으로 맨 앞에 오게 하면 됩니다.

artisan serve로 비교적 쉽게 하는 방법

아파치 설정을 건드리는 복잡한 방법을 사용하지 않고 간단히 처리하는 방법도 있습니다.

artisan serve 명령어를 사용하면 되는데요. 이건 PHP 내장 서버로 사이트를 돌리는 방법입니다. 아래 형식으로 써 주면 됩니다.

artisan serve --host=0.0.0.0

이러면 PHP 내장 서버가 돌면서 스마트폰에서 http://192.168.1.100:8000_{(아까 확인한 내 컴퓨터의 IP 주소와 8000번 포트)}으로 접속을 할 수 있게 됩니다.

포트도 변경하고 싶다면 --port 옵션을 사용하면 됩니다.

더 자세한 옵션 목록은 artisan serve --help를 이용하면 됩니다.

PHP 내장 웹서버 사용 방법

라라벨 프로젝트가 아니라도 그냥 PHP의 내장 웹서버를 이용할 수 있습니다. php -S를 이용합니다.

php -S 0.0.0.0:8000 -t /path/project

이 때 접속 주소에 0.0.0.0을 적어 주면 localhost, 127.0.0.1, 192.168.0.100_{(위에서 확인한 IP 주소)}처럼 이 컴퓨터를 가리키는 주소로 모두 접속 가능합니다.

:8000은 포트번호입니다. 원하는 번호를 적으면 됩니다.

-t에는 Document Root를 적어 줍니다. -t를 적지 않으면 명령을 내리는 폴더를 Document Root로 인식합니다.

Vite 컴파일 URL 노출하기

이제 Vite를 노출해 줘야 합니다.

Vite는 별도 서버(localhost:5173)를 띄워 CSS, JS를 서비스하는데, 기본적으로 로컬 접속만 허용하기 때문에 내 컴퓨터 밖에서 폰으로 접속하면 localhost에 있는 CSS와 JS를 불러오지 못하게 됩니다.

이를 해결하려면 vite.config.js 파일의 server 항목에 host: '0.0.0.0'을 추가해 주면 됩니다. 그럼 로컬 IP 주소로도 CSS, JS를 사용할 수 있게 해줍니다. 서버 항목은 그럼 이렇게 됩니다.

export default defineConfig({
  // 생략
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/vendor/**']
    },
    host: '0.0.0.0' // 외부 접속 가능
  }
});

정리

다소 복잡하긴 한데요. 정리하자면

컴과 폰을 동일한 와이파이에 접속시키고
내 컴 IP 주소를 확보한 뒤
내 컴 웹사이트를 어떻게 외부로 노출하는 방법을 정하고
Vite 컴파일 URL을 노출하면

됩니다.