Firebase 호스팅 사용하기

Firebase 로고

사전 준비

• node.js를 설치합니다. (참고)

Firebase 프로젝트 생성

Firebase 호스팅을 사용하려면 먼저 Firebase 프로젝트를 만들어야 합니다.

다음과 같이 프로젝트를 생성합니다.

1. Firebase에 가입합니다. (무료 서비스(Spark 요금제)로 본 포스팅의 내용을 수행할 수 있습니다.)
2. Firebase Console에서 프로젝트 추가를 클릭한 후 프로젝트 이름을 선택하거나 입력합니다.

   

   Firebase 프로젝트 만들기

3. Firebase Console에서 나머지 설정 단계를 따른 다음 프로젝트 만들기(또는 기존 Google 프로젝트를 사용 중인 경우 Firebase 추가)를 클릭합니다.

Firebase CLI 설치

Firebase는 Firebase 호스팅을 비롯한 Firebase 제품을 쉽게 구성 및 관리할 수 있도록 Firebase CLI를 제공합니다. CLI는 npm을 이용하여 설치할 수 있습니다. 설치된 CLI를 이용하여 프로젝트 디렉터리를 앞서 생성한 Firebase 프로젝트에 연결할 것입니다.

1. 다음 npm 명령을 사용하여 CLI를 설치합니다.

$ npm -g install firebase-tools

2. CLI가 올바르게 설치되었는지 버전을 확인해봅니다.

$ firebaese --version

3. Firebase 서비스에 로그인합니다.

$ firebase login

Firebase 프로젝트 초기화

이후 진행을 위하여 프로젝트를 위한 폴더를 생성하고, 해당 폴더로 이동합니다. (폴더명은 PWA로 하였습니다)

$ mkdir PWA
$ cd PWA

다음 명령어를 실행하여 Firebase 프로젝트를 초기화합니다.

$ firebase init

다음과 같이 프로젝트에서 사용할 Firebase 제품을 선택하라는 프롬프트가 표시됩니다.

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/sergio/PWA

? Which Firebase CLI features do you want to set up for this folder? Press Spac
e to select features, then Enter to confirm your choices. (Press <space> to sel
ect, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

프로젝트를 위해 사용할 기능은 Hosting입니다. 화살표 키를 이용하여 이동한 후 스페이스바를 눌러 해당 기능을 선택합니다.

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

Use an existing project를 선택하여 앞서 만든 Firebase 프로젝트를 프로젝트 폴더(PWA)와 연결합니다.

나머지는 default 값으로 놔두고 엔터키로 넘어갑니다.

최종 폴더 구조는 다음과 같습니다.

PWA
├── firebase.json
└── public
    ├── 404.html
    └── index.html

앱의 동작 확인

다음 명령을 사용하여 Firebase가 자동으로 생성한 기본적인 파일(index.html)을 로컬에서 애뮬레이션 합니다.

$ firebase serve --only hosting
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

웹브라우저에서 http://localhost:5000으로 접속하면 index.html의 내용을 확인할 수 있습니다.

필요에 따라 public 폴더의 index.html의 내용을 수정하여 자신이 만든 웹 페이지 및 웹앱으로 교체합니다.

참고 : 기본적으로 firebase serve는 localhost 요청에만 응답합니다. 즉, 컴퓨터의 웹브라우저에서는 호스팅 된 콘텐츠에 액세스 할 수 있지만 네트워크의 다른 기기에서는 액세스할 수 없습니다. 다른 로컬 기기에서 테스트하려면 다음과 같이 --host 플래그를 사용하세요.

$ firebase serve --host 0.0.0.0  // accepts requests to any host

앱의 배포

실제 웹서버로 앱을 배포하는 것은 다음 명령을 실행합니다.

$ firebase deploy --only hosting

하단에 표시된 Hosting URL 항목에 주소(https://fcm-push-pwa.web.app)로 접속하면 앞서 로컬에서 애뮬레이션 시 보았던 페이지를 다시 확인할 수 있습니다.

=== Deploying to 'fcm-push-pwa'...

i  deploying hosting
i  hosting[fcm-push-pwa]: beginning deploy...
i  hosting[fcm-push-pwa]: found 2 files in public
✔  hosting[fcm-push-pwa]: file upload complete
i  hosting[fcm-push-pwa]: finalizing version...
✔  hosting[fcm-push-pwa]: version finalized
i  hosting[fcm-push-pwa]: releasing new version...
✔  hosting[fcm-push-pwa]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/fcm-push-pwa/overview
Hosting URL: https://fcm-push-pwa.web.app

Firebase 호스팅에 배포 결과

참고

• 자바스크립트 프로젝트에 Firebase 추가
• Firebase CLI 참조