もう一度プロジェクトを作成して確認しながら書きました。
Firebaseの導入
データベースやらホスティングやらが便利なので，firebaseの機能を導入します。
まずはfirebaseのページでプロジェクトを作成し，
そのプロジェクトにWebアプリを追加します。
そしてCLIに
npm install -g firebase-tools
そしてgoogleのアカウントでログインをします。
firebase login
ログインが完了したら，
firebase init
を実行します。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your ch
oices. Database: Deploy Firebase Realtime Database Rules, Firestore: Deploy rules and create indexes for Firestore, Functions: Con
figure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: project1-aae93 (project1)
i Using project project1-aae93 (project1)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules? database.rules.json
? File database.rules.json already exists. Do you want to overwrite it with the Database Rules for project1-aae93 from the Firebas
e Console? Yes
✔ Database Rules for project1-aae93 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Firestore Setup
Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.
? What file should be used for Firestore Rules? firestore.rules
Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.
? What file should be used for Firestore indexes? firestore.indexes.json
=== Functions Setup
A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.
? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔ Wrote functions/package.json
✔ Wrote functions/index.js
✔ Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes
> protobufjs@6.8.8 postinstall /Users/kunosouichirou/Desktop/polp/functions/node_modules/protobufjs
> node scripts/postinstall
npm notice created a lockfile as package-lock.json. You should commit this file.
added 233 packages from 180 contributors and audited 662 packages in 7.21s
found 0 vulnerabilities
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
これでfirebaseの初期設定はできたはずです。
そして，npmでfirebaseをインストールします。
npm install --save firebase
このとき，インストールのコマンドを実行するディレクトリを間違えるとうまく動かないかもしれません。
次は，firebaseのキーを取得してきます。
この歯車のアイコンのところの「プロジェクトの設定」を選択し，Firebase SDK snippetのところにあるスクリプトをコピーします。
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "自分のapiキー",
authDomain: "project1-aae93.firebaseapp.com",
databaseURL: "https://project1-aae93.firebaseio.com",
projectId: "project1-aae93",
storageBucket: "project1-aae93.appspot.com",
messagingSenderId: "598499664640",
appId: "1:598499664640:web:fdeefdfb150f0d823009e5"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
そして，Nuxtのプロジェクトの中のpluginフォルダの中にfirestore.jsを作成し，その中にコピーしていきます。
firestore.js
var firebaseConfig = {
apiKey: "AIzaSyBbyxTMzjGkPhSyKDl_-gAEsBjSPoqWukM",
authDomain: "project1-aae93.firebaseapp.com",
databaseURL: "https://project1-aae93.firebaseio.com",
projectId: "project1-aae93",
storageBucket: "project1-aae93.appspot.com",
messagingSenderId: "598499664640",
appId: "1:598499664640:web:fdeefdfb150f0d823009e5"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
僕は今回analyticsは使っていないのでfirebaseConfigのところからその部分は削除してあります。
これでfirebaseの基本的な設定はできました。
次回はfirestoreなどの設定について書いていきます。