Google Firebase로 도메인 연결하기 (Node.js)


Google Chrome이 그해 10월부터 HTTP로 접속하는 주소창에 "안전하지 않음" 경고를 띄우겠다고 발표했습니다. Google, Facebook 같은 주요 사이트는 이미 HTTPS로 옮겨간 상태였고요.

Firebase를 쓰면 SSL 인증서를 무료로 발급받을 수 있어, "안전하지 않음" 경고를 걱정할 필요가 없습니다. Google 계정만 있으면 Firebase 프로젝트를 만들 수 있습니다.

새 프로젝트 만들기

Google Firebase 메인 페이지 Firebase 메인 페이지 — "Add project" (빨간 박스) 버튼을 클릭해 새 프로젝트를 추가합니다.

새 프로젝트 만들기 새 프로젝트 만들기

"Add project" 버튼을 누르면 다이얼로그가 뜹니다. 프로젝트 이름과 국가를 선택합니다. 저는 South Korea를 골랐지만, 가장 가까운 CDN 리전이 있는 국가를 추천합니다.

Google Firebase 시작

Hosting 탭으로 이동 좌측 메뉴의 "Hosting" 탭으로 이동해 "Start" 버튼을 누릅니다.

호스팅 설정 (1) 먼저 로컬 디렉터리를 설정해야 합니다 — Shift를 누른 채 디렉터리에서 우클릭하면 터미널이 열립니다. install, sign in, init, deploy 명령을 차례로 복사·붙여넣기합니다.

Firebase Hosting은 FTP나 웹 호스팅 매니저가 아니라 Node.js의 명령줄 인터페이스를 사용하므로 로컬 디렉터리 설정이 필요합니다. Node.js가 설치되어 있어야 합니다.

Firebase 로그인과 초기화 Shift + 우클릭으로 터미널 열기

디렉터리 설정 직접 디렉터리를 설정하거나 기본값을 사용해도 됩니다.

도메인 연결

"Connect domain" 버튼을 눌러 Firebase에 도메인을 연결합니다. 본인 소유의 도메인이 필요합니다.

도메인 연결 "Connect domain" 버튼 클릭

호스팅 설정 (1) 도메인을 입력하고, 사용 중인 DNS 제공자에 TXT 레코드를 추가해 소유권을 인증합니다.

저는 GoDaddy를 사용하므로 GoDaddy DNS 설정에 TXT 레코드를 추가했습니다.

TXT 값 변경 Type은 TXT, Host는 도메인, 그리고 TXT 필드에 값을 붙여 넣습니다.

A 값 변경 다음으로 받게 되는 "A" 값들을 같은 방식으로 추가합니다.

A 값 적용 GoDaddy에 적용된 "A" 값

파일 업로드

이제 터미널에서 설정한 디렉터리에 자산을 옮깁니다. 저는 public 디렉터리를 기본값인 public으로 두었습니다. 그런 다음 터미널에서 배포 명령을 실행합니다.

새 프로젝트 만들기 이 명령을 입력합니다…

새 프로젝트 만들기 업로드 중… 완료!

HTTPS 적용

여기까지입니다. 이제 Firebase가 도메인 설정을 적용할 때까지 5분~2시간 정도 기다립니다. 그 사이 도메인에 접속하면 다음과 같은 경고가 보일 수 있습니다.

A 값 변경 이런 모습!

저는 방문자가 Chrome의 "안전하지 않음" 경고를 마주하지 않기를 바라서 직접 진행했고, 약 30분 후:

'http' to 'https' 드디어!

인증서 spemer.com 인증서

배포가 처음인 분들에게 도움이 되었기를 바랍니다. 감사합니다!

제목 : Google Firebase로 도메인 연결하기 (Node.js)
일자 : 2017년 5월 19일
작성자 : Hyouk Seo (Spemer)