技術・Web 4年前

WordPressからNuxt+Firebaseへの移行 ③ Firebaseの準備と記事の投稿

2019.11追記 　ここに書いてあるのは古い内容で、あまり筋が良くなかったので現在は作業方針を変えています。詳しくは以下の記事をご覧ください。

前回までのあらすじ

　Nuxt.jsで記事編集画面を作りましたが、送信する先がまだありません。 　記事を保存するデータベースをFirebaseに用意します。

Firebaseの基本設定

Nuxt.jsとFirebaseを使って簡単なWebサービスを作る＜導入編＞｜東京のWeb制作会社｜non-standard world株式会社 　Firebaseの初期設定については上記のページを参考にしてください。全部書いてあります。 　大まかにまとめるなら
    Firebaseのプロジェクトを作成 npm install -g firebase-tools firebase login でログイン firebase init hosting でプロジェクトを選択
　という流れです。

Firebase側の初期設定

1556651077520 　Firestoreに移動し、 1556651129921 　テストモードで開始します。 　「コレクションの追加」を選択し、 1556651167691 　posts コレクションを作成。 1556816631479 　適当に中身を設定します。

Nuxt.jsにFirebaseの設定情報を追加

Nuxt で Firebase を使う (Cloud Firestore & Hosthing) - かもメモ 　こちらの記事を参考に、まず環境変数を導入します。 yarn add @nuxtjs/dotenv 　でモジュールをインストールし、 modules: [ '@nuxtjs/axios', '@nuxtjs/markdownit', '@nuxtjs/dotenv' ], 　dotenvを追記。 .env というファイルを作成し、中身はfirebaseコンソールの埋め込みコードをコピー。 FB_API_KEY = "***"FB_AUTH_DOMAIN = "***"FB_DATABASE_URL = "***"FB_PROJECTID = "***"FB_STORAGE_BUCKET = "***"FB_MESSAGING_SENDER_ID = "***" 環境変数をブラウザ上でも参照できるよう、nuxt.config.jsに env: { FB_API_KEY: process.env.FB_API_KEY, FB_AUTH_DOMAIN: process.env.FB_AUTH_DOMAIN, FB_DATABASE_URL: process.env.FB_DATABASE_URL, FB_PROJECTID: process.env.FB_PROJECTID, FB_STORAGE_BUCKET: process.env.FB_STORAGE_BUCKET, FB_MESSAGING_SENDER_ID: process.env.FB_MESSAGING_SENDER_ID }, 　と追記。 plugins/firebase.jsというファイルを作成し、 const firebase = require('firebase/app')require('firebase/firestore')require('firebase/storage')// .env に設定した値を取得const config = { apiKey: process.env.FB_API_KEY, authDomain: process.env.FB_AUTH_DOMAIN, databaseURL: process.env.FB_DATABASE_URL, projectId: process.env.FB_PROJECTID, storageBucket: ...

comment  0
favorite  0
tagFirebasetagNuxt.jstagWordPress