nuxt.js와 firebase 연동으로 간단한 앱 만들기

기사 내용

firebase에서 프로젝트 설정

nuxt로 만든 앱과의 협력 (Cloud Firestore 사용)

배포 및 게시

만드는 것

이번은 텍스트를 cloud firestore(데이터베이스)에 송신하는 것만의 간이적인 것을 만듭니다.

firebase 프로젝트 만들기

시작하려면 firebase Top에서 화면의 지시에 따라 프로젝트를 만듭니다.





그런 다음 아이콘을 클릭합니다.
html에 붙여 넣는 코드가 나오면 OK입니다.

Cloud firestore에 컬렉션 추가

이 시점에서 firestore에 컬렉션을 추가합니다.

firestore는 NoSQL이기 때문에 기존 SQL처럼 테이블이나 행이 존재하지 않습니다.
대신 컬렉션이라고 불리는 것에 데이터의 형태등을 정의해, 문서라고 불리는 것에 실제의 데이터를 넣어 갑니다.

firebase 콘솔 왼쪽 메뉴에서 firestore를 선택하고 컬렉션 추가에서 다음과 같이 컬렉션과 문서를 정의합니다.

nodejs에 firebase 설치

다음 명령을 실행합니다.

npm install --save firebase

package.json에 다음이 추가되었는지 확인하십시오.
아래는 내 환경입니다.

  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^8.1.1",
    "nuxt": "^2.14.6"
  },

플러그인에 firebase 구성 파일 배치

구글 선생님의 지시대로 그대로 배치해도 좋지만,
편리성 등을 생각해 플러그인으로서 배치해 봅시다.

plugins/firebase.js

import Vue from 'vue'

//Vye.prototypeを先頭につけることでどこからでも呼べるようにする
Vue.prototype.$firebaseConfig = {
    apiKey: "XXX",
    authDomain: "XXX",
    databaseURL: "XXX",
    projectId: "XXX",
    storageBucket: "XXX",
    messagingSenderId: "XXX",
    appId: "XXX",
    measurementId: "XXX"
  };

nuxt.config.js

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '@/plugins/firebase',
  ],

데이터베이스에 값 추가

그래서 구현해 봅시다.
디자인 프레임 워크에 vuetify를 사용합니다.
template는 사용하는 디자인 프레임워크에 맞게 변경하십시오.

제목, 본문, 날짜를 보내는 코드를 작성합니다.

vue

<template>
  <div>
    <v-app>
      <v-container>
        <v-row>
          <v-text-field
            label="タイトル"
            counter="30"
            hint="最大30文字"
            color="blue-grey lighten-3"
            maxlength="30"
            v-model="title"
          >
          </v-text-field>
        </v-row>
        <v-row>
          <v-textarea
            label="本文"
            counter="2000"
            color="blue-grey lighten-2"
            maxlength="2000"
            v-model="text"
          >
          </v-textarea>
        </v-row>
        <v-row>
          <v-col class="text-right">
            <v-btn @click="postDiary"> 投稿 </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app>
  </div>
</template>

vue

<script>
// import * as firebase from "firebase/app"; 公式クイックスタートの書き方だが何故かこっちは通らない
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "date-utils";

export default {
  data: () => ({
    title: "",
    text: "",
  }),
  methods: {
    postDiary() {
      if (!firebase.apps.length) {
        let firebaseApp = firebase.initializeApp(this.$firebaseConfig);
        console.log(firebaseApp);
      }
      let time = new Date();
      let db = firebase.firestore();
      let docRef = db.collection('scrachPaper').doc();
      let setScrachPaper = docRef.set({
        title: this.title,
        text: this.text,
        time: time.toFormat("YYYY/MM/DD HH24:MI:SS"),
      });

      console.log(`${this.title}`);
      console.log(`${this.text}`);
      console.log(time.toFormat("YYYY/MM/DD HH24:MI:SS"));

      //フォームを空にする
      this.title = "";
      this.text = "";
    },
  },
};
</script>

firebase의 초기화는 여기에서 좋은가라든가 더 컴포넌트 나누는 편이 좋지 않을까라든가
신경이 쓰이는 점은 있지만 간단하지만,
이제 일단 firestoret에 데이터를 전송할 수 있습니다.

오류가 발생하면 아래로.

FirebaseError: Missing or insufficient permissions

이 에러가 나왔다고 하는 것은, firebase측에서 데이터 기입의 허가가 되어 있지 않습니다.
firestore의 보안 규칙을 변경합시다.
다섯 번째 줄의 if 문 바로 다음 값을 false에서 true로 변경합니다.

배포

여기까지 왔으므로 일단 배포하고 사이트를 공개해 봅시다.

콘솔에서 다음을 수행합니다.

npm run generate # distフォルダに実行ファイルを生成
npm install -g firebase-tools #firebase CLIの導入
firebase init

다음과 같은 것이 나오므로 스페이스 키로 필요한 것을 선택.
이번에는 firestore와 Hosting을 선택합니다.

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
 ( ) Database: Deploy Firebase Realtime Database Rules
 (*) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features
 ( ) Remote Config: Get, deploy, and rollback configurations for Remote Config

아래 질문에 dist를 입력하고 Enter를 누르십시오.

? What do you want to use as your public directory?  dist

또, nuxt로 SPA(single page application)를 작성하고 있는 경우는 이하에서 Yes

? Configure as a single-page app (rewrite all urls to /index.html)? Yes

이쪽은 No로 해 주세요.
예인 경우 firebase 기본 페이지로 교체됩니다.

? File dist/index.html already exists. Overwrite? No

그 후에도 여러가지 물어볼 수 있습니다만, 기본적으로는 Enter로 해서 괜찮습니다.

다음 명령을 실행하여 배포합니다.

firebase deploy

그건 그렇고, 배포 취소는 다음 명령입니다.

firebase hosting:disable

만든 사이트

그런 느낌으로 상기의 내용에 투고한 내용을 플러스한 것이 이하가 됩니다.
문제가 일어나거나 불필요하게 되거나 삭제할지도 모릅니다만, 「이런 것 만들 수 있어」라고 하는 샘플에도.

참고 사이트

공식 퀵 스타트 firestore 사용법
htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / 푹신 s 잡아 / 쿠이 cks rt? hl = 그럼 #과 p_ 오 f_ 파게

firestore의 보안 규칙 언어
htps : // 푹 빠져라. 오, ぇ. 코 m / 드 cs / 루 ぇ s / 루 ぇ s ぁんぐあげ? 아우테세 r=1