Ngrok을 이용한 HTTPS 테스트환경 구축하기

코딩에서 자바스크립트를 이용한 개발은 한다고 하면 localhost는 한번정도는 써봤을 것이다. 하지만 localhost는 아이폰에 설치되는 PWA 개발이 어렵다는 단점이 있다. 이것을 해결해주는 아주 간단한 방법인 Ngrok을 알아보자.

Ngrok이 뭔데?

Ngrok는 어떤 이상한 ngrok 소유의 https 도메인을 사용자의 http 웹사이트로 포워딩해주는 도구이다. 사실상 자신의 코드를 https화 시킨것이라 이해해도 쉽다. Ngrok에 대한 더 자세한 설명은 웹사이트를 참조하기 바란다.

Ngrok 설치

이 포스트에서는 맥에서 brew를 이용한 ngrok 설치에 대해서만 다루겠다. 다른 운영체제나 설치 방법은 여기로 가서 알아보자.

우선 터미널에 다음 커맨드를 실행시킨다.

brew install ngrok

설치가 완료되면 ngrok 사이트에 가서 회원가입을 해준후 자신만의 AuthToken을 얻어준다.

ngrok config add-authtoken [YOUR_AUTH_TOKEN]

위 커맨드를 실행시 ngrok에 본인 계정이 등록된다.

Ngrok 실행

원하는 사이트를 Parcel 이나 Live Server등을 이용해 http 웹사이트를 http://localhost:8080에 띄웠다고 하자. 이때

ngrok http http://localhost:8080

실행시 다음과 같은 화면을 볼 수 있다(본인은 localhost:1234에 웹사이트를 띄웠다).

ngrok                                                                                                                                                                               
Sign up to try new private endpoints https://ngrok.com/new-features-update?ref=private                  
                                                                                                        
Session Status                online                                                                    
Account                       s*******@gmail.com (Plan: Free)                                         
Update                        update available (version 3.19.1, Ctrl-U to update)                       
Version                       3.18.4                                                                    
Region                        Japan (jp)                                                                
Latency                       56ms                                                                      
Web Interface                 http://127.0.0.1:4040                                                     
Forwarding                    https://a1bb-59-13-7-134.ngrok-free.app -> http://localhost:1234          
                                                                                                        
Connections                   ttl     opn     rt1     rt5     p50     p90                               
                              0       0       0.00    0.00    0.00    0.00  

이때 https://a1bb-59-13-7-134.ngrok-free.app에 들어가게 된다면 웹사이트를 확인할 수 있다.

별첨 1 : Ngrok 실행 자동화시키기

Ngrok에는 Static Domain이라는 기능이 있다. 무료 사용자에게도 한개씩 주는데, 간단히 말해서 하나의 고유 도메인을 선점하는 것이다. 이것을 한번 알아보고, 실행 자동화도 시켜보자.

우선 이 사이트에 가서 오른쪽 위에 new domain을 눌러 자신만이 링크를 만든다. 아마 그 형태는

https://[무언가]-[신기한]-[도메인].ngrok-free.app

꼴 일 것이다.

이제 프로젝트의 package.json에 들어가서 다음과 같은 코드를 추가해주자.

{
  "scripts": {
    "local-parcel": "parcel index.html",
    "local-https": "ngrok http --url=[YOUR_LINK_HERE] 80",
    "local-start": "concurrently --kill-others \"npm run local-parcel\" \"npm run local-https\""
  },
  "devDependencies": {
    "concurrently": "^9.1.2",
  },

}

이후 npm i 실행후 npm run local-start실행시 npm run local-parcel과 npm run local-https가 같이 실행되어 한번에 저장된 도메인으로 웹사이트가 뜨는 것을 확인할 수 있다.

오늘은 Ngrok을 사용하여 HTTP 테스트환경을 HTTPS로 바꾸는 방법에 대하여 알아보았다.