Firebase Hosting 신청 및 배포
Facebook 계정을 이용해서 회원가입 및 로그인을 알아보기에 앞서 실습한 결과물을 웹에 배포해야 합니다. Facebook이 로그인을 처리할 때, 로그인이 이루어지는 도메인을 확인하기 때문이죠. 외부에서 접근할 수 있는 서버와 도메인이 필요합니다. 물론 국내외에서 수많은 무료 호스팅 서비스가 운영되고 있습니다. 그리고 Google Firebase도 HTML 파일이나 JavaScript 등 정적인 파일을 배포할 수 있도록 호스팅을 제공하고 있습니다. 이번 섹션에서는 Firebase Hosting을 구성하고 배포하는 방법을 알아봅니다.
설명이 부족하거나 어렵다고 느껴질 수 있습니다. 직접 단계들을 수행해 보시는걸 권장합니다.
Firebase Hosting 안내 확인
Firebase Console의 좌측 메뉴에서 Hosting을 선택하고 시작하기를 누릅니다.
수행해야 할 작업에 대한 지침이 화면에 표시됩니다.
순서대로 진행하면 Firebase Hosting을 구성하고, 작업한 파일을 배포할 수 있습니다.
Firebase CLI는 npm을 이용해서 설치할 수 있습니다.
npm은 보통 node.js와 함께 배포됩니다.
만약 시스템에 npm이 설치되어 있지 않다면 이 곳(http://bcho.tistory.com/884)에서 설치법을 확인할 수 있습니다.
본 섹션에서는 시스템에 npm이 설치되어있다고 가정하고 진행합니다.
Firebase CLI 설치
터미널에 다음 명령어를 입력하면 npm이 자동으로 Firebase CLI를 설치합니다. 이 작업은 관리자 권한이 필요할 수 있습니다.
npm install -g firebase-tools
Firebase CLI 로그인
설치가 완료되면 Firebase CLI가 Firebase에 접근할 수 있도록 로그인 해야합니다.
아래 명령어를 입력합니다. 이 작업은 관리자 권한이 필요할 수 있습니다.
firebase login
Firebase가 익명의 CLI 사용 정보를 수집할 것을 동의하는지 묻습니다(그림 2).
동의한다면 Y를, 동의하지 않는다면 N을 입력하고 Enter(return)을 입력합니다.
잠시 후 Google 로그인 창이 표시되면 로그인합니다.
로그인이 완료되면 브라우저를 닫고 터미널의 Success 메시지를 확인합니다.
Firebase CLI 초기화
터미널 명령어를 이용해서 배포에 사용할 폴더로 이동합니다.
본 강의의 실습에서는 ex1, ex2 등이 담긴 폴더의 상위 폴더로 이동합니다.
이동했다면 아래 명령어를 입력해서 초기화를 시작합니다. 이 작업은 관리자 권한이 필요할 수 있습니다.
firebase init
화면 중앙에 초기화 할 경로가 표시되고, 이 폴더에 어떤 형태의 초기화를 진행할 것인지 묻습니다(그림 1).
방향키를 이용해 Hosting을 선택하고 Enter(return)을 입력합니다.
어떤 Firebase 프로젝트를 연결할 지 물어보면(그림 3) 방향키를 이용해 선택하고 Enter(return)을 입력합니다.
본 예제에서는 jETA Lab 프로젝트를 연결하겠습니다.
Firebase에서 제공하는 Realtime Database와 관련된 DB 규칙이 담긴 파일을 요구합니다(그림4).
이번 실습에서는 DB를 이용하지 않으므로 기본값을 이용하겠습니다.
아무 것도 입력하지 않고 Enter(return)를 입력합니다.
배포 할 폴더를 선택합니다(그림 5).
선택한 폴더 하위의 모든 파일이 Firebase Hosting으로 업로드 될 것입니다.
즉, ex1, ex2 등의 폴더가 담긴 폴더를 선택하면 다음과 같이 접속할 수 있게 됩니다: http://jeta-lab.firebaseapp.com/ex1/
폴더명을 입력하고 Enter(return)을 입력합니다.
단일 페이지 홈페이지인지 묻습니다(그림 6).
N을 입력하고 Enter(return)을 입력합니다.
잠시 후 404.html과 index.html 페이지가 생성되고, Complete 메시지(그림 7)가 표시되면 초기화가 완료됩니다.
배포하기
Firebase를 초기화 했던 폴더에서 아래 명령어를 입력하면 해당 폴더의 파일을 Firebase로 업로드 할 수 있습니다. 이 작업은 관리자 권한이 필요할 수 있습니다.
firebase deploy
명령어를 입력하면 배포가 되는 과정이 화면에 표시됩니다.
배포가 완료되면 Complete 메시지와 Hosting Site 주소가 화면에 표시됩니다.
Hosting Site 주소로 접속하면 배포된 결과를 확인할 수 있습니다.
Firebase Console에서 배포 기록을 확인할 수 있습니다.
GitHub
본 강의에 사용한 코드는 GitHub에 공개되어 있습니다. (단, firebase/init.js은 .gitignore로 예외처리 되어있습니다.)
https://github.com/jETA-Kor/Firebase_Ex
미리보기
본 강의에 사용한 코드는 Firebase Hosting을 통해 미리볼 수 있습니다.
참고 문서
Get Started with Hosting | Firebase: https://firebase.google.com/docs/hosting/quickstart
조대협의 블로그 :: 빠르게 훝어 보는 node.js - #2 설치와 개발환경 구축 - http://bcho.tistory.com/884
내용에 오류가 있거나, 다른 의견이 있으시면 댓글을 남겨주세요. (Firebase 강의에 관하여...)