배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 공유하고 싶다면?

목차

· 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요

· Ngrok 란?

· Ngrok 설치해보기

· Ngrok 실행해보기

---

배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요

 사이드 프로젝트를 진행하고 있을 때였다. 퍼블리셔가 따로 없었기 때문에 퍼블리싱 업무도 도맡아 디자이너와 함께 상의해 Zepling과 Figam 툴을 사용하여 협업을 진행하였다. 매 회의때마다 `제 이번 프론트엔드 개발은 이렇게 진행을 했구요, 이렇게 UI를 구현해보았어요` 라고 말을 해도 팀원들은 끄덕끄덕, PPT로 간신히 캡쳐한 시각적인 자료가 없었기 때문에 배포를 하기 전까지는 디자이너가 자유롭게 서비스에 들어와 구현된 화면을 같이 공유해 볼 수 없다는 것이 정말 불편했다. 이러한 불편함 덕분에 그렇게 ngrok 플랫폼을 발견하게 되었다.

Ngrok란?

ngrok란, 외부 인터넷 망에서 로컬 PC로 접속하는 방법을 제공하는 툴이다. 일반적으로 외부 인터넷 망에서 로컬 PC로 접속할 때에는 방화벽 때문에 보안 상의 문제가 많을 뿐더러, 신경써야할 부분들이 존재한다. 하지만 ngrok를 사용하면 그런 부분들을 신경쓰지 않고 평소 로컬 PC에서 작업을 하던 프로세스 그대로 외부 인터넷 망으로 공유할 수 있다는 장점이 있다.

Ngrok 설치해보기

Ngrok는 공식 홈페이지에서 받는 방법과, 맥에서는 Brew를 통해 다운로드하는 방법이 있다.

(좌) Mac OS 설치 방법 (우) Windows OS 설치 방법

윈도우의 경우는 exe 파일을 다운로드 하고 실행만 시켜주면 된다, 맥의 경우는 아래의 명령어를 통해 손쉽게 설치가 가능하다.

(brew 방법과 npm 방법 두 가지 중 선택해서 설치를 진행한다)

$ npm install -g ngrok

$ brew install --cask ngrok

ngrok 설치가 끝났다면 실행 전, 반드시 사용자 토큰을 넣어줘 계정을 연결시켜줘야한다. 사용자 토큰은 사용자 가입을 해야 ngrok 측에서 토큰을 발급해준다. 발급된 토큰을 통해 터미널 창에 아래에 커맨드를 입력해 ngrok에 나의 계정을 연결시킬 수 있다. 토큰을 입력해주면 모든 세팅 과정이 끝이 난다.

$ ngrok config add-authtoken `사용자 토큰`

Ngrok 실행해보기

ngrok의 실행 방법은 간단하다, 아래 명령어를 터미널 창에서 입력을 해준다면 간단하게 실행이 된다. 나 같은 경우 리액트 프로젝트를 실행하고 있기 때문에, 포트 번호 란에 3000 포트 번호를 입력해주어 실행을 정상적으로 시켜주었다.

(윈도우는 ngrok.exe 파일을 열고 명령어를 입력해주면 된다)

$ ngrok http `포트 번호`