[Firebase] Firebase 웹 호스팅 생성, 배포하기 + 관련 에러

파이어베이스에 웹 호스팅 생성, 배포하기

파이어베이스의 호스팅 서비스를 이용해보자

---

Firebase ?

• 파이어베이스는 14년도에 구글에서 인수한 모바일, 웹 애플리케이션 개발플랫폼! 16년도 부터 구글에서 서비스를 대폭 강화한 Baas(Backend as a service) 서비스 이므로, 백엔드를 대신해 줘서 프론트엔드에 집중할 수 있게 서비스를 지원해준다.
• 적용대상 : android, ios, web 
• 대표적인 기능 : 인증, 데이터베이스, 스토리지, 원격 구성, 푸시 알람, Analytics
• 장점
  1. 간편한 구축 : 인프라 전반의 환경 구성과 확장 등을 알아서 해주기 때문에 사용자는 그저 필요한 기능을 연동시켜 사용하면 된다.
  2. 가격 : 특정 사용량 초과시 가격 지불이 있지만, 간단한 프로젝트는 기간 상관없이 무료로 가능!!
  3. 다양한 기타 서비스 : 구글에서 관리하므로 여러가지 구글 서비스 연동 가능

---

Firebase Web Hosting?

• 개발자를 위한 프로덕션 등급 웹 콘텐츠 호스팅 서비스
• 백엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 서버리스 애플리케이션 개발 기능
• Pricing :
  • 저장소: 10 GB
  • Data transfer : 360 MB/day

• 호스팅 공식 문서 : https://firebase.google.com/docs/hosting/
• 호스팅 시작하기 가이드 : https://firebase.google.com/docs/hosting/quickstart

---

Firebase 웹 호스팅 생성, 배포하기 작업 순서는 크게 다음 순서로 진행됩니다.

1.  Firebase 프로젝트 생성
2.  Firebase 호스팅 설정
3.  Firebase 초기화 
4.  Firebase 배포 및 확인

---

 

1. Firebase 프로젝트 생성

1-1 로그인

아래 주소로 들어가서 콘솔로 이동 > 계정 선택 구글 계정을 통해 로그인을 진행해 주세요.

https://console.firebase.google.com/

1-2 프로젝트 생성

프로젝트 만들기 클릭

프로젝트 이름을 지정해줍니다.

'계속' 클릭!

기다리다 보면~

짜잔! '계속' 클릭!

프로젝트 생성 완료!

 

2. Firebase  호스팅 설정

2-1 Firebase CLI 설치

터미널에 다음 명령어를 입력하면 npm이 자동으로 Firebase CLI 설치합니다.

Firebase CLI는 npm을 통해 배포되기 때문에 npm이 설치되지 않았다면 설치해야 합니다.

$ npm install -g firebase-tools

 

 

2-2 Firebase Login

Firebase CLI가 Firebase에 접근할 수 있도록 로그인합니다.

npm으로 설치한 firebase-tools 모듈을 사용하므로 터미널에서 아래 명령어를 통해 로그인합니다.

$ firebase login

 

Firebase의 CLI 사용 및 에러 리포팅 정보에 관한 수집을 허용하겠냐는 질문으로 y 혹은 n 입력 후 엔터!

Waiting for authentication...이라는 문구와 함께 이후에 계정 선택을 요청하는 브라우저 창이 뜨게 됩니다.

계정을 선택하고 허용! 클릭

 

로그인이 완료되면  Firebase CLI 로그인에 성공하였다는 문구가 나타납니다.

cmd에서도 성공 메시지가 출력되어 있습니다~!😄

 

3. 프로젝트 초기화

프로젝트 초기화를 통해 Firebase 프로젝트에 연결해줍니다.

3-1 firebase init

웹 파일을 담을 디렉토리로 이동 후 아래 명령어를 실행합니다. 

$ firebase init

Firebase Project를 초기화하기 위한 디렉토리가 보이며,

Firebase의 어떤 기능을 사용할 건지 물어보는 선택 메시지가 나옵니다.

우리는 Hosting을 사용하므로 화살표 버튼으로 이동 후 스페이스바로 체크 한 다음 엔터!

이전 1. firebase 프로젝트 생성 진행을 통해 생성하였던 프로젝트(hostingdemo)를 사용할 것이기 때문에 

Use an existing project 를 선택한 후 엔터!

프로젝트 목록에서 원하는 프로젝트를 선택하고 엔터!

웹에서 public으로 접근할 수 있는 directory의 이름을 무엇으로 할지 정해야 합니다.

즉, 기본 웹 파일(html, css, js 파일)들이 들어가는 repo 이름이죠!!

웹 화면은 제가 간단히 to do list로 만들었습니다. 부족하지만 테스트용으로 필요하신 분들 사용하세요 :)

 : https://github.com/lxxyeon/LetsHybrid/tree/main/hosting

호스팅 파일 구조

파이어베이스 기본 권장 값인 "public"으로 설정하였습니다.

나머지는 다 No!

모든 질문이 끝이 나면 설치 완료가 되면 완료되었다는 문구와 함께 CLI의 command line으로 복귀합니다.

 

4. Firebase 배포 및 확인

드디어 마지막 단계!!

4-1 Firebase serve

호스팅을 Firebase에 올리기 전 로컬 환경에서 테스트가 가능합니다.

아래 명령어를 입력하여 작동이 잘되는지 확인!

$ firebase serve --only hosting

명령어 입력 시 로컬 호스트의 5000번 포트에 실행되었다고 출력됩니다.

나오는 주소로 들어가면

짜잔! 페이지가 잘 로딩되었음을 알 수 있습니다. 휴~ 이제 배포만 남았어요!!👍🏻

+ 웹파일 수정 후 로컬테스트하니 

위 주소로 들어가니 웹파일 올린대로 웹 화면이 잘 나오고 있습니다!

 

4-2 Firebase deploy

이제 아래 명령어를 통해 Firebase 프로젝트의 기본 호스팅 사이트(projectID.web.app 및 projectID.firebaseapp.com)에 배포할 수 있습니다.

Firebase 프로젝트의 데이터를 로컬의 데이터와 동기화하는 작업이라고 보면 됩니다.

$ firebase deploy

명령어 입력 시 몇 개의 파일이 변경되었는지, 호스팅 성공 여부, 호스팅 주소 등을 알 수 있습니다.

완료 메시지와 함께 출력된 Hosting URL에 접근하여

다음과 같이 Setup Complete 문구와 함께 배포가 잘 되었음을 알 수 있어요~:)

hosting 주소로 들어가도 동일한 화면이 잘 출력되는 것 확인!

또한, Firebase Console에서 배포 기록을 확인할 수 있습니다.

해당 도메인에 들어가면 테스트한 그대로 잘 배포되었음을 알 수 있네요!

public 폴더 안에 내용을 수정하고 다시 deploy 명령어를 통해 배포하면 바로바로 적용된 웹 화면을 확인 가능합니다.

무료로 간단하게 웹 호스팅 배포할 수 있다니 !! 👍🏻

---

오랜만에 파이어베이스 웹 호스팅하니까 발생한 에러!

 

Error: Failed to get Firebase project hostingdemo-a9104. Please make sure the project exists and your account has permission to access it.

 

권한이 만료되었으므로 아래 명령어 수행하여 나오는 주소로 자동 연결되어 계정 권한을 다시 받으면 해결!

firebase login --reauth