[Vue] 프론트앤드 Veu 프레임워크 사용기 + firebase

Vue를 사용해서 웹페이지 제작을 해봤다.

유튜브에서 참 좋은 자료 바로가기

총 6회로 이루어져서 파이어베이스와 Vue 빌드 부터 배포까지 친절하게 설명해준다.

영상 튜토리얼을 진행하다가 추가해야 되는 부분을 정리해 본다.

1.  firebase >  firestore  세팅 관련

import firebase from 'firebase'

import 'firebase/firestore'

import firebaseConfig from './firebaseConfig'

const firebaseApp = firebase.initializeApp(firebaseConfig)

firebase.firestore().settings({

timestampsInSnapshots: true

})

export default firebaseApp.firestore()

timestampsInSnapshots 부분을 설정해 주어야 한다.

true로 하지 않으면 에러 발생 한다.

2. font-awesome 끌어오기

i 태그를 통해 아이콘 이미지를 끌어와야 하는데, 이부분은 해결되지 않았다.

3. 배포: github -> firebase

튜토리얼 6회에서는 github page를 통해서 배포를 하는데, 이왕이연 firebase로 서버와

배로를 동시에 마무리하고 싶어서  firebase로 배포를 시도해 보았다.

1) 터미널 : firebase init 

2) firebase.json 파일 수정

- pubilc에서 index.html이 실행이 안됨 dist로 경로 수정해야함

- 하기 2가지 중에서 하나 선택해서 수정

- 참고 사이트 바로가기

{
  "hosting": {
    "public": "./dist"
  }
}

{
  "hosting": {
    "public": "./dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3) dist 폴더: npm run build

4) firebase deploy

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"