Portfolio

1. Github Pages 1.1 Github 로그인 하기 1.2 Repository 만들기 1.3 코드 업로드하기 1.4 URL 생성하기 2. ngrok 2.1 ngrok 로그인 하기 2.2 ngrok 다운로드하기 2.3 실행하기 2.3.1 npm으로 ngrok 설치하기 2.3.2 Authtoken 추가하기 2.3.3 실행하기 3. PWA Builder 테스트하기

앞서 PWA를 만들기 위해서는 HTTPS 도메인이 요구되는 것을 알아보았습니다. 이번 챕터에서는 Github의 Github Pages와 ngrok을 사용하여 https가 연결된 도메인을 만들어 보도록 합시다.

1. Github Pages

Github(깃허브)는 분산 버전 관리 툴인 깃 저장소 호스팅을 지원하는 웹 서비스입니다. Github Pages는 Github에서 제공하는 서비스로, 깃허브의 repository에서 HTML, CSS, Javascript를 가져와서 빌드 프로세스를 통해 파일을 선택적으로 실행하고, 웹 사이트를 게시하는 정적 사이트 호스팅 서비스입니다.

Github Pages를 이용하면 github.io 도메인 또는 사용자 커스텀 도메인에서 사이트를 무료로 호스팅을 할 수 있습니다.

1.1 Github 로그인 하기

github 페이지(https://github.com/)로 접속한 후 Sign in 버튼을 클릭하여 로그인을 합니다. 회원이 아닐 경우 Sign up 버튼을 클릭하여 회원가입을 진행합니다.

1.2 Repository 만들기

Repository(저장소)는 코드를 저장할 저장소입니다. [Repositories] 메뉴를 클릭하고 오른쪽 상단에 위치한 New 버튼을 클릭합니다.

아래와 같이 저장소 이름과 간단한 저장소 설명을 입력합니다. 그리고 공개 여부는 Public으로 설정하고, 저장소 초기화 시 생성할 파일은 README 파일만 체크해 주도록 하겠습니다.

마지막으로 Create repository 버튼을 클릭하면 저장소가 생성된 것을 확인할 수 있습니다.

1.3 코드 업로드하기

[ Add file ] - [ Upload files ]를 클릭하여 챕터 2.1에서 다운로드 한 코드를 업로드하겠습니다. 이때 [example] 폴더에 있는 파일만 업로드해 주세요.

파일을 업로드하기 전에 우리가 다운로드 한 html 파일의 이름을 '10000hours.html'에서 'index.html'로 변경해야 합니다. github pages는 저장소 루트에 있는 index.html을 읽고 표시하기 때문에 이름을 변경해 주어야 합니다.

파일을 드래그 앤 드롭하거나 choose your files를 클릭하여 업로드합니다.

파일이 올라갔다면 Commit 메시지를 입력해 주어야 합니다. 'files upload'라고 입력한 후 Commit changes 버튼을 클릭하면 저장소에 성공적으로 파일들이 업로드된 것을 확인할 수 있습니다.

1.4 URL 생성하기

URL을 만들기 위해 [ Settings ] - [ Pages ] 메뉴로 이동합니다.

None에서 main으로 변경해 준 후 Save 버튼을 클릭합니다.

그러면 아래와 같이 URL이 생성된 것을 확인할 수 있습니다.

생성된 URL을 클릭하여 1만 시간의 법칙 페이지를 실행해 보면 잘 작동하는 것을 확인할 수 있습니다.

2. ngrok

자, 이번에는 ngrok를 사용하여 url을 생성해 보도록 하겠습니다. ngrok는 NAT와 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출시켜주는 도구입니다.

간단히 말하면 ngrok는 외부에서 로컬에 접속할 수 있도록 해주는 터널 프로그램입니다. 보통 로컬 환경에서 SSL을 사용할 때나 localhost를 외부에서 호출할 때 사용합니다.

2.1 ngrok 로그인 하기

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

2.2 ngrok 다운로드하기

본인의 운영체제에 맞는 ngrok 파일을 다운로드한 후 압축을 풀어줍니다.

2.3 실행하기

프로젝트 폴더(코드가 저장된 폴더)에서 터미널을 실행한 후 아래 명령어를 입력합니다. 아래 명령어를 입력했을 경우 오류가 발생한다면 <2.3.1 npm으로 ngrok 설치하기>의 방법으로 진행해 주시길 바랍니다.

💡

실행할 때 해당 port로 서비스가 돌아가고 있어야 합니다!


# Windows powershell
./ngrok.exe http 8080

# Windows 일반 shell
ngrok.exe http 8080

# Mac
./ngrok http 8080

2.3.1 npm으로 ngrok 설치하기


npm install -g ngrok

💡

Mac 환경에서 에러가 날 경우 명령어 앞에 sudo를 붙여서 실행해 보세요.

2.3.2 Authtoken 추가하기

authtoken을 추가하면 세션 만료 없이 사용할 수 있습니다. 자신의 authtoken은 ngrok 페이지의 [ Your Authtoken ]에서 확인할 수 있습니다. Copy 버튼을 눌러 자신의 인증 토큰을 복사합니다.


ngrok authtoken <복사한 자신의 authtoken 값 입력>

2.3.3 실행하기

아래 명령어를 입력한 후 실행합니다. 포트는 5501이 아닌 8080, 3000 등 본인이 사용할 포트를 입력해 주면 됩니다.


ngrok http 5501

실행하면 아래와 같이 URL이 생성된 것을 확인할 수 있습니다. 우리는 https가 붙여진 URL을 사용할 것입니다.

생성된 URL이 잘 실행되는 것을 확인할 수 있습니다.

3. PWA Builder 테스트하기

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

테스트 결과는 30점입니다. Manifest와 Service Worker는 0점이고 Security에서 30점을 받았네요!

2.3 HTTPS 연결