[PWA] https 연결

앞서 PWA를 만들기 위해서는 HTTPS 도메인이 요구된다. https가 연결된 도메인은 Github Pages를 사용해서 만들 수도 있고,  ngrok을 사용하여 만들 수도 있다. 

 

---

1. Github Pages

Github(깃허브)는 분산 버전 관리 툴인 깃 저장소 호스팅을 지원하는 웹 서비스이다. Github Pages는 Github에서 제공하는 서비스로, 깃허브의 repository에서 HTML, CSS, Javascript를 가져와서 빌드 프로세스를 통해 파일을 선택적으로 실행하고, 웹 사이트를 게시하는 정적 사이트 호스팅 서비스. Github Pages를 이용하면 github.io 도메인 또는 사용자 커스텀 도메인에서 사이트를 무료로 호스팅을 할 수 있다. 

1.1 Github 로그인 

github 페이지(https://github.com/)로 접속한 후 Sign in 버튼을 클릭하여 로그인

 

1.2 Repository 만들기

Repository(저장소)는 코드를 저장할 저장소이다. [Repositories] 메뉴를 클릭하고 오른쪽 상단에 위치한 New 버튼을 클릭한다.  Public으로 설정하고, 저장소 초기화 시 생성할 파일은 README 파일만 체크

 

1.3 코드 업로드하기

파일을 업로드하기 전에 파일의 이름을 'index.html'로 변경해야 한다. github pages는 저장소 루트에 있는 index.html을 읽고 표시하기 때문. 파일이 올라갔다면 Commit 메시지를 입력

1.4 URL 생성하기

URL을 만들기 위해 [ Settings ] - [ Pages ] 메뉴로 이동합니다. None에서 main으로 변경해 준 후 Save 버튼을 클릭. 그러면 5-10분 뒤 URL이 생성된 것을 확인할 수 있다. 

---

2. ngrok

ngrok를 사용하여 url을 생성하기. ngrok는 NAT와 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출시켜주는 도구이다. 간단히 말하면 ngrok는 외부에서 로컬에 접속할 수 있도록 해주는 터널 프로그램. 보통 로컬 환경에서 SSL을 사용할 때나 localhost를 외부에서 호출할 때 사용한다. 

 

2.1 ngrok 로그인 하기

ngrok를 사용하기 위해서는 ngrok을 다운로드해야 한다. ngrok 홈페이지(https://ngrok.com/)에 들어간 후 Get started for free를 클릭합니다. 이때 로그인 페이지가 뜨는데 회원이 아니라면 회원가입 후 로그인을 진행

 

https://ngrok.com/

ngrok | Unified Application Delivery Platform for Developers

2.2 ngrok 다운로드하기

운영체제에 맞는 ngrok 파일을 다운로드한 후 압축을 풀기.

2.3 사전준비 

node.js 다운 및 설치

npm으로 ngrok 설치하기

node -v
npm -v
npm install -g ngrok

 

ngrok 웹사이트에서 계정을 만들기
로그인 후, ngrok 대시보드에서 인증 토큰을 찾기
인증 토큰을 복사한 후, 터미널에서 다음 명령을 실행하여 인증 토큰을 설정

ngrok config add-authtoken <your_authtoken>

 

이제 ngrok 명령을 사용하기. 예를 들어, 포트 5500을 터널링하려면 다음 명령을 실행

근데 이전에 먼저 index.html을 라이브로 브라우저에 켜두어야한다.

ngrok http 5500

 

이렇게 하면 ngrok이 로컬 서버를 인터넷에서 접근할 수 있는 공개 URL로 만들어 준다. 터미널에 표시되는 URL을 통해 외부에서 로컬 서버에 접속할 수 있다.

 

여기서 Forwarding 항목에 표시된 URL을 사용하면 외부에서 127.0.0.1:5500에 있는 서버에 접근할 수 있다.

* 참고 
https://ngrok.com/docs/ngrok-agent/config/

---

3. PWA Builder 테스트하기

생성한 URL을 PWABuilder에서 다시 테스트해보자. 이때 URL은 위에서 생성한 두 개 중 원하는 것을 사용하면 된다.

 

https://www.pwabuilder.com/

PWABuilder