Deploy Vue SPA on firebase

firebase cli로 firebase hosting에 Vue.js로 만든 SPA를 배포하는 순서를 정리해보았다.

1. firebase cli 설치

npm install -g firebase-tools

2. firebase login

firebase login

3. firebase init

# cd project-directory
firebase init

4. init setting

# firebase cli가 시키는대로 누른다

5. firebase.json 설정

firebase.hosting.public 의 기본 설정은 public이다. npm run build의 output이 떨궈지는 dist 폴더로 변경하자.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "./dist", // 이 부분을 바꿔준다
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

6. npm run build

npm run build

7. firebase deploy

이제 dist 폴더의 output을 firebase hosting에 올리자.

firebase deploy

8. 마무리

이제부터는 배포할 때 6 , 7번 과정만 하면 된다.

그 외

rule(규칙)만 배포하고 싶으면 아래와 같이 하면 된다.

firebase deploy --only storage # firebase storage rule 배포
firebase deploy --only firestore # firestore rule 배포

끝