5. Firebase (Node.js) 게시판 만들기 - Firebase Hosting I

마지막으로 Firebase에서 제공하는 무료 호스팅(Hosting)을 정리한다.

Firebase 호스팅은 Node.js 기반으로 제공되며, 자세한 사항은 Firebase 호스팅 관련 문서를 참고하면 된다.

1. 시작하기

2. Realtime Database 기반 게시판

3. Cloud Firestore (beta) 기반 게시판

4. 로그인 (authentication) 기능 추가

5. 무료 호스팅(Firebase Hosting)으로 배포 I, II

Firebase 호스팅은 무료이고 간편하게 사용할 수 있는 장점이 있지만,

Node.js 6 (최신 버전이 8)을 지원하는 단점과 Express 사용이 조금 불편하고 제약이 있는 등의 단점도 있다.

먼저, Firebase 콘솔의 Hosting 메뉴에서 [시작하기] 버튼을 선택한다.

firebase-tools을 설치하라는 메시지가 출력된다.

설치 문장을 복사해서 메모장 등에 보관하고 [계속] 버튼을 클릭한다.

콘솔에서 firebase 호스팅을 제어하는 명령어가 제공된다.

3 개의 명령어를 복사해서 보관하고, [계속] 버튼을 클릭한다.

마지막으로 호스팅 대시보드가 출력된다.

처음의 도메인 부분에서 Firebase 호스팅에서 제공하는 도메인 외에 다른 도메인을 사용하도록 설정할 수 있다.

다음의 배포 기록은 클라이언트(개발자 PC등)에서 배포(deploy)한 기록이다.

PC의 콘솔에서 앞서 복사해 두었던 문장을 이용하여 Firebase 도구를 설치한다.

> npm install -g firebase-tools

Firebase 도구(CLI)를 설치하면, 콘솔에서 Firebase 명령어들을 실행할 수 있다.

Firebase 도구(CLI)는 Firebase 프로젝트 관리, 조회, 배포를 위한 여러 가지 도구를 제공하므로 보다 상세한 설명은 관련 문서를 참고하면 된다.

> firebase login

> firebase init

> firebase deploy

login은 PC에서 Firebase 웹 콘솔을 자유롭게 이용하기 위해 Firebase에 접속하는 것으로 gmail 계정등을 입력한다.

콘솔에서 firebase login를 실행하면 웹 브라우저가 실행되어, 다음 그림과 같이 로그인 화면이 실행된다.

처음 한번만 로그인하면 자유롭게 사용할 수 있다.

init는 호스팅 하기 위한 프로젝트를 생성(초기화)하기 위해 사용하고

deploy는 작성한 프로젝트를 서버에 배포할 때 사용한다.

firebase 호스팅을 사용하기 위해서 앞서 사용했던 firebaseExample 프로젝트(폴더) 대신에 firebaseHosting 폴더를 새로 생성한다.

그림과 같이 콘솔창에서 firebaseHosting로 이동(cd)한 후, firebase init를 입력하고 실행한다.

진행(Are you ready to proceed)를 묻는 질문에 Y를 입력하고 엔터키를 눌러 다음으로 넘어간다.

사용할 Firebase의 서비스를 선택하라는 메시지가 출력된다.

상하 화살표 키를 이용하여 이동하고, 스페이스 바를 이용하여 선택(*)과 해제( )를 할 수 있다.

Firestore, Function, Hosting을 선택하고 엔터키를 누른다.

Firestore는 게시판 예제 중 Firestore 기반 게시판 예제(board2)를 호스팅 할 것 이기 때문이고

Function은 Express 프레임워크를 사용하기 위해서 선택한다.

다음으로 해당 계정(gmail)이 사용할 수 있는 Firebase의 프로젝트 리스트가 출력되고 이중에서 호스팅으로 사용할 프로젝트를 선택하고 넘어간다.

기타 rules, index등은 엔터키를 쳐서 넘어가고 (기본값 사용), JavaScript와 Typescript 선택화면에서 JavaScript를 선택한다.

ESLint와 npm 종속성 설치에 Y를 선택한다.

public 폴더를 지정하고(엔터), 싱글페이지 설정은 하지 않고(No),

Firebase 초기화 설치를 종료한다.

탐색기에서 firebaseHosting 폴더를 열어보면, 그림과 같이 제법 많은 파일이 생성된 것을 볼 수 있다.

firebaseHosting폴더는 Node.js의 기본 폴더 구조와 비슷해 보이는데, node_modules폴더의 위치가 다르다.

firebaseExample에서는 firebaseExample 폴더 아래에 있지만,

firebaseHosting에서는 firebaseHosting폴더 하위의 functions 폴더하위에 있다.

이 차이로 인해 각종 라이브러리 설치시  (npm ~~)

firebaseExample에서는 firebaseExample 폴더에서 실행하고,

firebaseHosting에서는 firebaseHosting폴더 하위의 functions 폴더에서 실행해야 한다.

라이브러리가 설치되는 node_modules 폴더와 설치된 라이브러리 정보가 저장되는 package.json가 functions 폴더에 생성되어 있다.

firebase serve를 입력해서 웹 서버를 실행한다 (npm start가 아니다).

웹 브라우저에서 http://localhost:5000/를 입력해서 그림가 같이 출력되면 firebase 호스팅을 위한 Node.js 프로젝트가 제대로 설정된 것이다.

기본으로 작성된 index.html 파일 뿐이지만, 이것을 Firebase 호스팅 서버에 배포한다.

콘솔에서 firebase deploy를 입력해서 실행한다.

Firebase 콘솔에서 Hosting 메뉴을 실행해서 (firebaseExample 프로젝트), 하단의 추가된 배포 기록을 확인한다.

위 그림의 중앙에 있는 도메인 정보를 마우스로 클릭하나, 웹 브라우저에서 해당 도메인을 직접 입력한다.

다음 그림과 같이 앞서 로칼(PC)에서 실행한 것과 동일한 페이지가 실행되면 제대로 배포가 완료된 것이다.

이상으로 Firebse 호스팅의 기본적인 사항을 정리하였다.

이미지 양이 많아서 무엇인가 복잡해 보이지만, 조금 익숙해지면 사용법이 쉽고 간편하다는 것을 알 수 있다 (특히 배포).

앞서의 예제는 Express 프레임워크 기반으로 개발되어 Firebse 호스팅에서 그대로 사용할 수 없다.

Express 프레임워크을 사용하는 방법을 중심으로 보다 상세한 설치 방법은 다음 문서에서 정리한다.

다음은 Firebase 호스팅을 사용하기 위해 자주 사용하는 명령어이니 기억해두는 것이 좋다.

> firebase init

> firebase deploy

> firebase serve