이번에는 Nuxt와 Firebase의 연계에 대해 간단히 복습하겠습니다.

Nuxt 만들기 및 패키지 설치

Nuxt 프로젝트를 만듭니다.

$ create-nuxt-app nuxt-practice

백엔드를 Firebase에 맡기는 점에서 SPA를 선택하고 있습니다.

? Choose rendering mode Single Page App

다음 패키지를 설치합니다.

$ npm install --save firebase
$ npm install --save vuexfire
$ npm install --save @nuxtjs/dotenv

Firebase 프로젝트 만들기

이번에는 연습을 위해 데이터베이스를 사용하기 때문에 무료 플랜으로 충분해야합니다.


Top 페이지에서 "사용해보기"를 눌러 프로젝트 만들기로 이동합니다.

프로젝트 추가 화면에서 다음과 같이 설정합니다.

プロジェクト名 => 任意の名前
プロジェクトID => 自動生成されたものでOK
アナリティクス =>　日本

프로젝트 생성이 완료되면 왼쪽에서 Cloud Firestore를 선택합니다.



데이터베이스 만들기를 클릭합니다. 다음 설정으로 생성합니다. 이번에는 연습이므로 테스트 모드를 사용했습니다.

セキュリティルール→テストモード
ロケーション→asia-northeast1

데이터베이스 작성은 이제 완료됩니다.



웹을 클릭하여 앱을 등록합니다.
만들 때 만들어진 SDK는 나중에 확인할 수 있습니다.

Nuxt 측 설정

루트 디렉토리에 .env 파일을 만듭니다. .env내에 이하의 기술을 합니다. 필요한 분은 API 키등의 환경 변수 설정을 해 주세요.

env.

PROJECT_ID = '自分のfirebaseプロジェクトのID'
API_KEY = 'firebaseプロジェクトのAPIキー'
// 以下省略

자신의 프로젝트 ID와 API 키는 Settings에서 볼 수 있습니다.

nuxt.config.js에 다음 설명.

nuxt.config.js

** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dotenv'
  ],

그런 다음 plugin 디렉토리에 js 파일을 만듭니다. 임의의 이름으로 문제 없습니다만, 알기 쉽게 firebase.js라고 이름을 붙여 둡니다.

firebase.js

import firebase from 'firebase' //firebaseの読み込み

const config = {
  projectId = process.env.PROJECT_ID //先ほど設定した環境変数
  apikey = process.env.API_KEY ... //以下必要な環境変数をセット
  <snip>
}

if (!firebase.apps.length) { //アプリが二重に初期化されないようにif文を使用
  firebase.initializeApp(config) //configを引数にとる
}

export default firebase

이것으로 Firebase와 nuxt의 협력이 완료되었습니다.

다음 번 이후는 Nuxt의 코딩에 들어가고 싶습니다.

참고로 한 기사

【Nuxt.js】firebase 도입편(Firestore판)：데이터 추가 취득을 하자