Vue-CLI 파이어베이스 배포하기

포트폴리오 사이트는 80퍼센트 완성한 상태인데

파이어베이스로 배포를 한번 해보기로 했습니다 ㅇㅅㅇ

---

1. 파이어베이스 가입

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

로그인 - Google 계정

2. 새 프로젝트 추가

3. 프로젝트에 Firebase CLI 설치

npm install -g firebase-tools
firebase login

로그인까지 진행해주세요

 

4. 프로젝트 Init

firebase init

원하는 기능에만 선택! 스페이스로 선택한 후 enter하면됨

 

쪼로로록 설정이 되다가 DB관련 설정은 엔터 엔터~

? What file should be used for Database Rules? database.rules.json
? File database.rules.json already exists. Do you want to overwrite it with the Database Rules for  from the Firebase Console? Yes

 

이제 중요!

Vue는 빌드하면 dist폴더를 public directory로 생성합니다.

Hosting에 대한 설정에서 꼭 public directory를 dist로 설정하세요.

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

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

싱글앱 여부 설정

? File dist/index.html already exists. Overwrite? No

index.html파일을 덮어쓸지,,

(여기서 yes하면 파이어베이스에서 제공하는 기본 index.html로 설정됨!

이미 구현해둔 프로젝트를 배포할때는 덮어쓸 필요가 없으므로 No)

 

이렇게 하면 파이어베이스 프로젝트 설정 완료

 

5. 테스트&배포

firebase serve

로컬서버를 시작

접속해서 로컬 서버로 구동한 웹을 확인해보고

firebase deploy

이렇게 배포를 실행하면

complete 메세지와 함께 Hosting URL이 뜹니다.

---

아주 간단하지만 정리용으로 포스팅!