[react] Firebase로 프로젝트 배포

https://firebase.google.com/?hl=ko

Firebase | Google’s Mobile and Web App Development Platform

 

프로젝트 생성 후 옆 카테고리에서 빌드 > 호스팅 클릭 

 

 

 

1. Firebase CLI 설치 

$ npm install -g firebase-tools

 

터미널에서 실행 

 

2. 프로젝트 초기화 

$ firebase login
$ firebase init

 

vscode에서 실행 (터미널에서 실행시 root폴더까지 가서 실행)

 

firebase init (반드시 root 폴더에서 실행)

방향키로 이동, hosting 선택(space) 후 enter > Use an existing project >

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes

...

 

.firebaserc

firebase.json 

생성 완료 ! 

 

3. Firebase 호스팅에 배포

 

콘솔로 이동 > hosting 페이지에서 'firebase 호스팅의 여러 사이트 지원'에 다른 사이트 추가

배포하게 될 웹사이트 도메인 추가

 

firebase.json 

{
  "hosting": {
    "site": "emotion-react-proj",
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

 

 "site": "도메인 네임" 추가 > 다시 빌드

$ firebase deploy

 

🚀 배포 완료 !