Nuxt.js 개발기 (2) firebase로 호스팅하고 firestore를 사용한 serverless

(2) firebase로 호스팅하고 firestore를 사용한 serverless

---

※이 포스팅은 기술적 정보를 담고 있지 않습니다. 단순 개발 후기입니다.

 

1. firebase 호스팅

 본인은 AWS보다 GCP 쪽이 더 사용하고 UI적으로 간편하다 생각한다. AWS S3와 lambda, function응 사용하셔도 된다. firebase에서 app을 신규로 생성하고 로컬에 firebase-tools을 설치한다.

(1) firebase-tools 설치

> npm install -g firebase-tools 

(2) firebase-tools 로그인

>firebase-tools login

(3)이전 포스팅에서 사용했던 github pages프로젝트 경로에 프로젝트 시작

>cd /testProject

>firebase-tools init

 위 프로세스로 진행하면 root경로에 firebase.json과 .firebaserc파일이 생성된다. 사실 firebase-tools init 단계는 그냥 무시하고 해당 파일만 생성해서 deploy해도 관계없다. gitignore 설정 등을 마친 뒤 npm run generate 후 firebase deploy 하면 정상적으로 update된 파일만 compare 한 후 배포 완료된다.

 

firebase 모듈 설치 내용은 생략~

 

firebase.json

{
  "hosting": {
    "public": "dist", /** public이 배포 될 파일 경로 **/
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
 

2. firestore

 

화면에 표출되는 article 데이터를 firebase에서 불러오도록 변경하였다. nuxt의 plugin 폴더에 firebase.js 파일을 생성한뒤 다음과 같이 작성한다.

import firebase from 'firebase/app'
import 'firebase/firestore'
if (!firebase.apps.length) {
  const config = {
    authDomain: "your firebase information",
    databaseURL: "your firebase information",
    projectId: "your firebase information",
    storageBucket: "your firebase information",
    messagingSenderId: "your firebase information",
    appId: "your firebase information"
  }
  firebase.initializeApp(config)
  firebase.firestore().settings({timestampsInSnapshots: true})
}
const fireDb = firebase.firestore()
export {fireDb}

nuxt.config.js의 plugin 단락에 플러그인을 추가해준다.

 

plugins: [
'~/plugins/firebase.js'
],

 

page vue파일 스크립트에 firestore를 import 받고 다음과 같이 작성한다.

import {fireDb} from '~/plugins/firebase.js'
 
export default {
 
    mounted() {
        const s = fireDb.collection("post").doc(this.$route.params.id).get().then(
            (item) => {
                const r = item.data()
                this.post = r
                this.description = this.post.body.replace(/(<([^>]+)>)/ig,"").substring(0,30)
                this.post.date = r.date.toDate().toLocaleString()
            }
        )
    }
}

이러면 firestore 연결도 끝