ngrok을 사용해 로컬 서버에서 공개 서버로 전환하기 with 리액트 프로젝트

Switching from a local server to a public server using ngrok with React Project

---

리액트 웹 프로젝트 진행하다가 모바일 화면으로 테스트하고 싶어서 찾아보니 ngrok을 알게 됐어요. 로컬 호스트로 하면 진행중인 컴퓨터 내에서만 접근 가능한 주소라 그걸 해결하고자 했어요. 우선 리액트 프로젝트에 ngrok을 사용하기 전에 설치를 해주셔야 해요.

ngrok 설치
npm install -g ngrok

설치하셨으면 ngrok 회원가입 후 프로젝트에 인증 토큰 등록해주셔야해요. 우선 사이트로 가서 가입해주세요. 가입 후 토큰을 로컬에 등록해주세요.
https://ngrok.com/

ngrok | API Gateway, Kubernetes Networking + Secure Tunnels

명령어 복사 후 cmd 창에 적어주면 토큰이 로컬에 등록이 됩니다.

등록 하셨다면 외부 접속 허용할 수 있게 cmd 창에 아래 명령어를 적어줍니다.

npm run dev -- --host

그 후 Vite 보안 설정 vite.config.js에 ngrok 도메인을 허용하게 해줍니다. 파일이 없다면 새로 생성해주세요. 그리고 @vitejs/plugin-react 패키지를 설치해야 하는데 Vite에서 React의 JSX 문법을 인식하고 변환하기 위한 필수 플러그인이므로 설치해줘야 합니다. 설정 파일을 불러오지 못해서 failed to load config from vite.config.js error when starting dev server: Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vitejs/plugin-react'와 같이 오류가 발생해요. 따라서 아래 명령어를 작성해서 설치해줍니다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    allowedHosts: ['.ngrok-free.app'], // 핵심 포인트 작성하지 않으면 403 Forbidden 에러 발생
  },
})

npm install -D @vitejs/plugin-react
yarn 사용하는 경우
yarn add -D @vitejs/plugin-react

위 내용 전부 하셨다면 ngrok으로 HTTPS 터널 열어보도록 할게요. 우선 vscode에서는 "npm run dev -- --host"을 작성하여 vite dev 서버가 실행중인 상태를 만들어주시고 cmd창을 따로 열어서 아래 명령어를 작성할게요. 아래 명령어를 작성하면 "Forwarding    https://a1bc-xxx-xxx-xxx.ngrok-free.app -> http://localhost:5173"와 같이 나올텐데 "https://a1bc-xxx-xxx-xxx.ngrok-free.app" 주소를 url창에 입력해주세요. 우선 컴퓨터 내 브라우저에서 해보시고 되시면 모바일로 해보시면 됩니다.

ngrok http 5173

아래 사진을 보시면 Visit Site를 누르시고 오른쪽 화면을 보시면 실행이 잘 된 것을 볼 수 있습니다.

끝...인데 ngrok 플랜 가격 설명은 링크에서...
https://ngrok.com/pricing

ngrok pricing | Flexible plans for production and development

무료 플랜 간략히 설명

💵 요금	무료
🌐 터널 수	1개 동시 사용 가능
⏰ 지속 시간	최대 8시간 (세션 자동 종료)
🔁 터널 재실행	가능 (제한 없음)
🔗 도메인 주소	실행할 때마다 랜덤으로 새로 생성됨
🔒 HTTPS 지원	기본 지원 (https://...)
🧭 지역 선택	무료는 자동 지역 할당 (한국은 보통 Japan으로 연결됨)
🔐 주소 고정	❌ 불가능 (유료 플랜만 지원)
📶 속도 제한	실사용 테스트엔 무방한 수준 (수 초 응답 없음 발생할 수 있음)
🔔 요청 수 제한	명확한 수치는 없지만, 하루 수천 건 수준은 무리 없음