Todoアプリをfirebaseで。
firebaseを使った公開までの流れと、開発する際の設定について、忘備録も兼ねて残しておきたいと思います。
Vueアプリ作成
vue create todo-app
でアプリを作成。
次に、VScodeで開いて、
npm install firebase
でfirebaseのライブラリをインストールする。
npm run serve
アプリを立ち上げられるか確認する。
ブラウザでのfirebaseの設定
firebase consoleを開き、プロジェクトを追加をクリックして、プロジェクトを作成する。
アプリ名vue-todoで、アナリティクスはなしで設定。
次に、Cloud firestoreを作成する。
テストモード、asia-northeast1で設定。
次に、アプリの登録をする。
紐付けの作業
var firebaseConfig = {
apiKey: "---",
authDomain: "---",
projectId: "---",
storageBucket: "---",
messagingSenderId: "---",
appId: "---"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
でmain.jsへ。
そのままコピペでもできるんだろうけど、const→varにしたりfirebase.initializeAppにしたりが必要。(ここはまた学習必要)
あとは、App.vueをカスタム。ここについてはゆっくりまとめたいので、別記事に書きます、、、
firebaseをターミナルで設定
firebase login
firebase init
publicディレクトリではなく、distディレクトリで設定。
デプロイまでの準備
yarnでのやり方がたくさん載っていますが、npmでも可能。
npm run build
firebase deploy
でURLが出れば完了。
サポート頂けるとモチベーション上がります!僕もますます頑張るので、一緒に頑張りましょう!!