[vue.js] firebase 배포

1. firebase 프로젝트 생성

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

로그인 - Google 계정

firebase project 생성

2. firebase CLI 설치 (inside project) 및 firebase 로그인

# firebase tools global install
 npm install -g firebase-tools 

# firebase login
firebase login

3. firebase init

# init
firebase init

 

- 사용할것만 선택하여 설치

- hosting setup에서 배포될 디렉토리는 dist로 셋팅

 

4. 프로젝트 빌드 후 디플로이실행

# vue 프로젝트 빌드 (빌드를 해야 dist가 생김.)
npm run build

# firebase 배포
firebase deploy

 

5. deploy 결과 url로 이동하여 확인

6. npm run build 와 firebase deploy 합치기(package.json파일 수정)

- 두번치기 구차느니까는..

- scripts에 command 추가.

// !!꼭 명령어와 명령어 사이는 &&으로 해야 앞에 명령어 실행후 뒤에 명령어 실행.!!
// !! & 하나만 했을경우는 동시에 앞의 명령어와 뒤의 명령어가 동시 실행.!!
"firebase:deploy": "vue-cli-service build && firebase deploy"

 

7. npm run firebase:deploy 명령어실행

- 배포 결과 url로 이동하여 확인.