🦁

Nuxt3プロジェクトにFirestoreを導入する

2023/05/18に公開

はじめに

FirebaseのFirestoreは、Google Cloud Platform上で提供されるNoSQL型のクラウドデータベースで、リアルタイム性とスケーラビリティを兼ね備えています。今回はNuxt3プロジェクトにFirestoreを導入する手順をご紹介します。

前提条件

既にNuxt3プロジェクトを作成し、必要なパッケージのインストールが完了していることとします。

Firebaseのプロジェクトを作成する

https://firebase.google.com/?hl=ja にアクセスし、「使ってみる」を選択します。

「プロジェクトを作成」を選択します。

プロジェクト名を入力し、「続行」を選択します。

Googleアナリティクスの有効化は任意ですが、今回は有効化した上で「続行」を選択します。

「Default Account for Firebase」を選択し、「プロジェクトを作成」を選択します。

プロジェクト作成が完了したら、「続行」を選択します。

Firebaseのプロジェクト管理画面でFirestoreを開始する

「構築」→「Firestore Database」を選択します。

「データベースの作成」を選択します。

「テストモード」→「次へ」を選択します。(一般公開する場合は「本番環境モード」が望ましいですが、テストモードで開発環境を構築してから、本番環境モードのプロジェクトを作成する方がセキュリティ上安全です。)

「asia-northeast1(Tokyo)」→「有効にする」を選択、ロケーションエリアはユーザーが多く居住するエリアに最も近い場所を選択します。

このような画面が表示されたら完了です。

webアプリ用の設定を追加する

「</>」を選択します。

アプリのニックネームを入力、「このアプリの Firebase Hosting も設定します。」にチェックを入れ、「アプリを登録」を選択します。

ターミナルでプロジェクトのディレクトリに移動し、npm install firebase(yarnの場合はyarn add firebase)を実行します。

以下のような画面になったらOKです。

firebaseConfigの中身をコピーします。

./plugins/firebase.client.tsを作成し、以下をコピペします。

./plugins/firebase.client.ts
import { FirebaseApp, getApps, initializeApp } from "firebase/app";

const firebaseConfig = {
  // ここにfirebaseConfigの中身を貼り付ける
};

const apps = getApps();
let firebaseApp: FirebaseApp;
if (!apps.length) {
  firebaseApp = initializeApp(firebaseConfig, {});
} else {
  firebaseApp = apps[0];
}

export default firebaseApp;

以下のようになればOKです。

ブラウザに戻り、「次へ」を選択します。

プロジェクトのディレクトリ上で、npm install -g firebase-tools(yarnの場合はyarn add global firebase-tools)を実行、「次へ」を選択します。


以下のようになればOKです。

プロジェクトのディレクトリ上でfirebase loginを実行します。

ログインできている場合はAlready logged in as メールアドレスと表示されます。

ログインできていない場合は、Allow Firebase to collect CLI and ~と聞かれるのでyと入力します。

ブラウザ画面にリダイレクトするので、ログインしていたGoogleアカウントを選択します。

「Firebase CLI が Google アカウントへのアクセスをリクエストしています」と表示されるので「許可」を選択します。

ターミナルのプロジェクトのディレクトリ上で、firebase initを実行します。

使いたい機能を聞かれるので、↑↓キーで移動し、Spaceキーで選択します。(全角だと選択できない)。今回はFirestoreのみを選択し、Enterを押します。

作成したプロジェクトを↑↓キーで選択し、Enterを押します。

What file should be used for Firestore Rules?はなにも変更せずEnterを押します。

What file should be used for Firestore indexes?はなにも変更せずEnterを押します。

Firebase initialization complete!と表示されたら完了です。

Firestoreのセキュリティルールを設定する

Firestoreへのアクセス権限は以下の2通りで設定できます。

  • Firestoreコンソールから編集する
  • ./firestore.rulesを編集する

本記事ではGithubでの管理のしやすさから./firestore.rulesを編集する方法を説明します。

デフォルトのFirestoreへのアクセス権限は以下のようになっており、日付を過ぎるとアクセスできなくなってしまいます。

./firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < 日付
    }
  }
}

そのため、./firestore.rulesを以下のように書き換えることで、一旦全ユーザーがアクセスできるようにします。

./firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}


ちなみに以下のように記述すると、全ユーザーがアクセス不可になります。

./firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

VSCode上で編集した./firestore.rulesをFirestore上にデプロイします。
ターミナルでfirebase deploy --only firestore:rulesを実行します。

以下のような表示になれば完了です。

Firestoreコンソールからも修正を確認します。
サイドバーの「Firestore Database」→「ルール」を選択すると、firestore.rulesと同じ内容が記述されていることを確認できます。

以上でNuxt3プロジェクトにFirestoreを導入する手順は完了です。

最後に

本記事では、Nuxt3プロジェクトにGoogleのNoSQLクラウドデータベース、Firestoreを導入する方法について説明しました。手順は以下のとおりです:

  • Firebaseのプロジェクトを作成する
  • Firebaseのプロジェクト管理画面でFirestoreを開始する
  • webアプリ用の設定を追加する
  • Firestoreのセキュリティルールを設定する

これらの手順により、FirestoreをNuxt3プロジェクトで使用する準備が整います。次回以降、Firestoreからデータを読み書きする方法についても説明したいと思います。

参考文献

https://firebase.google.com/docs/web/setup?hl=ja
https://firebase.google.com/docs/firestore/quickstart?hl=ja

Midman - 技術ブログ

Discussion