<div id="readability-page-1" class="page"><div>
<p>로컬에서 웹개발을 할 때 스마트폰에서 접속해서 테스트를 해야만 하는 경우가 생깁니다. 브라우저 모바일 뷰로도 재연할 수 없는 이슈가 있기 때문입니다. </p>



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



<h2>같은 와이파이 사용</h2>



<p>우선 같은 컴퓨터와 핸드폰이 모두 같은 와이파이를 잡고 있어야 합니다.</p>



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



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



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



<pre><code>1: lo: &lt;LOOPBACK,UP,LOWER_UP&gt; mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host 
       valid_lft forever preferred_lft forever
2: enp34s0: &lt;BROADCAST,MULTICAST,UP,LOWER_UP&gt; 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 <mark>192.168.1.100</mark>/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</code></pre>



<h2>폰으로 내 컴에 접속하기</h2>



<p>그럼 컴과 폰이 같은 와이파이에 있으니 IP 주소를 쳐서 접속하면 될 텐데요. 컴에서 확실하게 해 줘야 할 게 있습니다.</p>



<h3>Vite 서버 </h3>



<h4>끄고 하는 방법</h4>



<p>우선 <code>npm run dev</code>를 끄고 <code>npm run build</code>를 한번 해 줍니다. Vite는 별도 서버(<code>localhost:5173</code>)를 띄워 CSS, JS를 서비스하기 때문에 내 컴퓨터 밖에서 접속하면 <code>localhost</code>에 있는 CSS와 JS를 불러오지 못하게 됩니다.</p>



<h4>Vite 서버 켜고 하는 방법</h4>



<p>그런데 이 경우 CSS, JS 작업을 할 때는 매우 불편하게 될 텐데요. <code>npm run dev</code>를 돌려 놓고도 외부에서 CSS, JS를 불러오게 할 방법이 있습니다. <code>vite.config.js</code> 파일의 <code>server</code> 항목에 <code>host: '0.0.0.0'</code>을 추가해 주면 됩니다. 그럼 로컬 IP 주소로도 CSS, JS를 사용할 수 있게 해줍니다. 서버 항목은 그럼 이렇게 됩니다.</p>



<pre><code>server: {
  watch: {
      ignored: ['**/node_modules/**', '**/vendor/**']
  },
  host: '0.0.0.0' // 외부 접속 가능
}</code></pre>



<h3>가상서버를 사용하고 있지 않다면</h3>



<p>가상서버를 사용하고 있는 게 아니라면 그냥 IP 주소로 접속하면 사이트가 뜰 겁니다.</p>



<h3>가상서버를 사용하고 있다면</h3>



<h4>아파치 설정으로 하는 방법</h4>



<p>아파치 가상서버를 사용하고 있다면, 가상서버 위치상 라라벨 사이트를 맨 위로 오게 배치를 해 줘야 합니다. 컴이 우분투라면 라라벨 사이트 conf 파일의 파일명이 가나다순으로 맨 앞이어야 합니다. <code>sites-availables/default.conf</code> 파일에 넣으면 맨 앞에 옵니다.</p>



<h4>artisan serve로 비교적 쉽게 하는 방법</h4>



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



<p><code>artisan serve</code> 명령어를 사용하면 되는데요. 이건 PHP 내장 서버로 사이트를 돌리는 방법입니다. 아래 형식으로 써 주면 됩니다. <code>192.168.1.100</code>에는 위에서 확인한 IP를 넣어 주시고요.</p>



<pre><code>artisan serve --host=192.168.1.100</code></pre>



<p>이러면 PHP 내장 서버가 돌면서 스마트폰에서 <code>http://192.168.1.100:8000</code>으로 접속을 할 수 있게 됩니다.</p>



<h2>정리</h2>



<p>다소 복잡하긴 한데요. 정리하자면</p>



<ol>
<li>컴과 폰을 동일한 와이파이에 접속시키고</li>



<li>내 컴 IP 주소를 확보한 뒤</li>



<li>Vite를 어떻게 처리할지 정하고</li>



<li>내 컴 웹사이트를 어떻게 외부로 노출할지 정하면</li>
</ol>



<p>됩니다.</p>
</div><div id="about">
<figure><img width="300" height="300" src="https://mytory.net/wp-content/uploads/2024/05/profile-300x300-1.webp" alt=""></figure>
</div></div>

웹으로 말하기

로컬에서 웹개발을 할 때 스마트폰에서 접속해서 테스트를 해야만 하는 경우가 생깁니다. 브라우저 모바일 뷰로도 재연할 수 없는 이슈가 있기 때문입니다. 예컨대 저는 텔레그램 인앱 브라우저에서만 발생하는 이슈를 테스트해야 하는 경우가 있었죠. 같은 와이파이 사용 우선 같은 컴퓨터와 핸드폰이 모두 같은 와이파이를 잡고 있어야 합니다. 그리고 내 컴퓨터의 IP 주소를 확인합니다. 윈도우에서는 cmd로 들어간 다음 ipconfig […]

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

댓글