Firebaseの設定_ヤマさん

Connie0914 commented 2 years ago

今回なにを使用するのかレクチャーして欲しいです！

yamashin01 commented 2 years ago

僕もFirebaseにあまり詳しくはないので勉強しながら、あるいは詳しい人に聞きながらになりそうです。ひとまず、FIrebaseで使うのは

認証機能(Authentication)
データベース（Firestore）
画像保存（Storage）でしょうか？ホスティングもできますが、これはvercelですかね？

Connie0914 commented 2 years ago

@yamashin01 なるほど、ありがとうございます！ホスティングはどちらでもいいと思います。そしたら、簡単にfirebaseで使うもの含めてシステム構成図を作成し、相談しながら進めましょう！

yamashin01 commented 2 years ago

Firebase上にプロジェクトtrivia-projectを設定。フロントエンドとの連携方法を確認中。

yamashin01 commented 2 years ago

firebaseとフロントエンドの接続を確認。 srcディレクトリに.env.localファイルを生成し、APIキー等を記載。 Next.jsでは、環境変数名をNEXT_PUBLIC_XXXXXとする必要があるため注意。

import firebase from "firebase/compat/app";
import { getAuth, onAuthStateChanged } from "@firebase/auth";
import "firebase/app";
import "firebase/compat/firestore";
import "firebase/auth";

if (firebase.apps.length === 0) {
    firebase.initializeApp({
        apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
        authDomain: process.env.NEXT_PUBLIC_FIREBASE_DOMAIN,
        databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE,
        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
        storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID,
        appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    })
}

export const db = firebase.firestore();
export const auth = getAuth();
onAuthStateChanged(auth, user => { console.log(user); });

Pride-of-Kansai / trivia-project

Firebaseの設定_ヤマさん #8