技術・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