[ngrok] Django 장고 서버 모바일에서 실행시키기

학교 행사로 한창 사이트 개발을 하고 있다.
프론트는 리액트, 백엔드는 장고로 개발을 하고 있는데 배포 이후에는 수정이 어려워서 모바일로도 화면이 잘 보이는지 꼭 확인해야 한다.
 
프론트 화면만 보려면 그냥 cmd에서 ip주소 보고 휴대폰에 입력하면 로컬로 확인할 수 있다.
그러나 백엔드 서버와 연동하는 코드가 들어간 페이지는 서버가 실행되어 있지 않으면 확인할 수가 없다.
 
모바일로 서버를 돌리는 방법이 있을까 불티나게 구글링을 했고,
한 3~4번의 에러를 거쳐 모바일에서 장고 서버 열기에 성공했다.
 
나중에 까먹지 않기 위해서 기록을 하려고 한다.
 
 
 
1. 일단 ngrok 사이트()에 접속하여 회원가입 후 자신의 운영체제에 맞는 ngrok 파일을 다운받는다.
나는 Windows 64bit를 기준으로 포스팅하겠다.
 
가입 후 로그인하면 이런 화면이 뜨는데 바로 다운하면 된다. (무료)

 
 
 
2. 아마 zip 파일이 다운되었을 텐데 압축을 푼다. 그리고 ngrok.exe 파일을 실행하면 이런 cmd창이 하나 뜰 것이다.

 
 
3. 여기서 다시 ngrok 페이지로 돌아가 개인 토큰을 복사해와야 한다. 아까 봤던 welcome 페이지를 조금만 내려보면, 이렇게 유저마다 고유의 토큰이 있다. 이걸 복사한다.

 
 
4. 복사 후에 다시 ngrok.exe로 돌아와 창에 그대로 붙여넣으면 된다.
Authtoken saved ~ 라는 문구가 나오면 잘 된 것이다.

 
 
 
5. 본격적으로 모바일에서 서버를 실행하기 위한 준비를 한다. cmd창을 실행하여 ipconfig를 입력한다.
이중에서 IPv4 주소가 로컬 IP 주소이다. 이걸 메모해두자.

 
 
 
그냥 ngrok으로 서버를 들어갈 경우, DisallowedHost라는 오류가 뜬다.
 
4. 그래서 장고의 settings.py에 아래의 허용 코드를 넣어줘야 한다.
아까 메모해둔 로컬 IP 주소를 넣어준다.
localhost와 127.0.0.1(기본 파이썬 실행 포트)는 혹시 모르니 다 넣는 게 좋을 것 같다.

ALLOWED_HOSTS = [
    'localhost',
    '127.0.0.1',
    '192.168.xxx.xxx',  # 로컬 IP 주소
]

 
 
 
5. 이제 본격적으로 서버를 실행할 것이다. 장고 파일에서 아래 코드를 통해 로컬 IP 주소로 서버를 실행한다. 포트번호는 원하는대로 바꿔도 되지만 기본인 8000을 사용하는 것을 추천한다.

python manage.py runserver 192.168.xxx.xxx:8000

 
 
 
6. 서버를 실행시켰다면, 다시 ngrok.exe로 돌아가서 아래 명령어를 입력한다.

ngrok http 192.168.xxx.xxx:8000

 
 
 
7. 그러면 이런 화면이 나오는데, 여기서 Forwarding 옆에 있는 링크(화살표 전까지)가 서버를 실행할 ngrok URL이다.

 
 
 
8. 이 URL을 복사해서 4번에서 썼던 장고 허용 코드에 추가해야 한다.
앞에 https://는 떼고 그 뒷부분만 넣는다.

ALLOWED_HOSTS = [
    'localhost',
    '127.0.0.1',
    '192.168.xxx.xxx',
    'xxxx-xxx-xxx-120-55.ngrok-free.app',  # 현재 ngrok URL 추가
]

 

*주의할 점
8번을 할 때 ngrok URL을 넣고 서버를 다시 실행시키면 안 된다.
ngrok은 서버를 껐다 킬 때마다 URL이 바뀌기 때문에, 바뀐 URL을 다시 허용 코드에 넣어주어야 한다.
나도 이걸 몰라서 한참을 헤맸다....ㅠㅠ
 
 
 
반드시 장고 서버를 컴퓨터로 먼저 실행시킨 후, ngrok URL을 settings.py에 추가한 뒤 서버를 껐다 키지 말고 save만 해서 실행된 상태에서 코드가 적용되도록 해야 한다.

 
 
9. 이제 모바일에서 위에서 찾은 Forwarding 옆 ngrok URL로 접속하면 끝! 서버가 실행된다.
이렇게 서버를 실행시켜놓고, 다른 탭에서는 리액트를 실행시키면 장고랑 연동된 페이지도 잘 나오는지 확인할 수 있다.

링크를 누르면 왼쪽 사이트가 뜨는데, 'Visit Site'를 클릭하면 오른쪽 페이지로 이동하고 장고 서버가 실행된다.

 
 
 

장고를 모르는데 파이썬 코드를 써야하고,
자료가 많이 없어서 헤맸다.
 
프론트엔드분들께 도움이 되면 좋겠다 ^_^