jetalog.net


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을 통해 미리볼 수 있습니다.

http://firebase.jetalab.net


참고 문서

Get Started with Hosting | Firebase: https://firebase.google.com/docs/hosting/quickstart

조대협의 블로그 :: 빠르게 훝어 보는 node.js - #2 설치와 개발환경 구축 - http://bcho.tistory.com/884



< Google 계정을 이용해서 회원가입 및 로그인

Facebook 계정을 이용해서 회원가입 및 로그인 >


내용에 오류가 있거나, 다른 의견이 있으시면 댓글을 남겨주세요. (Firebase 강의에 관하여...)



저작자 표시 비영리 동일 조건 변경 허락
신고
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다