firebase로 프론트 웹앱 배포

1. 프로젝트 생성

먼저 구글 계정으로 Firebase Console에 가입하고, 프로젝트를 만든다. 

배포 기록이나 Firebase가 제공하는 모든 기능을 콘솔에서 대쉬보드처럼 보면서 관리할 수 있다. 

내 프로젝트가 오른쪽에 생성된 모습

 

2. Firebase CLI 설치 

npm으로 Firebase CLI 설치 

npm install -g firebase-tools

 

3. 프로젝트 초기화 

배포하려는 프론트엔드 프로젝트의 루트에서 프로젝트를 초기화하기 

firebase init hosting

 

초기화 명령을 실행하면, interactive 질문이 쭉 나온다.

 

Project setup

? Please select an option:

기존 로컬 프로젝트에다 Firebase 프로젝트로 연결하는 것이니, Use an existing project 를 선택해준다.

? Select a default Firebase project for this directory:

파이어베이스 콘솔에서 생성한 프로젝트를 선택해준다.

 

Hosting Setup

? What do you want to use as your public directory?:

배포되어야하는 파일의 디렉터리를 지정한다.

내 경우 vite + react 프로젝트이므로 dist 폴더가 빌드 파일이 생성되는 폴더이므로 dist 를 적어준다.

? Configure as a single-page app (rewrite all urls to /index.html)?

react로 만드는 SPA 앱이므로 yes 

 

 

 

4. 웹 사이트로 배포 

배포되어야하는 앱을 빌드한다음에, 사이트에 배포하는 명령어를 실행한다. 

firebase deploy --only hosting

 

 

 

그럼 배포가 완료된다. 

 

Ref

https://firebase.google.com/docs/hosting/quickstart?hl=ko&_gl=1*1fr80ou*_up*MQ..*_ga*MTg1MzgwNDkxMS4xNzI5OTMyMDE3*_ga_CW55HF8NVT*MTcyOTkzMjAxNy4xLjAuMTcyOTkzMjAxNy4wLjAuMA..

Firebase 호스팅 시작하기  |  Firebase Hosting