Vue + Firebaseで環境構築~デプロイまで【初投稿】

4866 ワード
Firebase vue-cli vue-router Vue.js FirebaseRealtimeDatabase Vue.js テキストリンク

はじめに

参考サイト
・https://cli.vuejs.org/
・https://firebase.google.com/docs/cli?hl=ja#mac-os

手順１

Vue CLIをインストールしたことがない人は、

$ yarn global add @vue/cli

をターミナルで実行する。
次に、

$ vue create プロジェクト名

? Please pick a preset:
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)

手順２

$ cd プロジェクト名
$ yarn serve
$ yarn build

$ vue add router
? Use history mode for router?  Y

手順３

$ yarn init

質問されるが、全部 Enter

手順４

$ yarn add firebase
$ yarn global add firebase-tools

手順５

ここでディレクトリを少し、いじります。

src/main.js
import firebase from 'firebase'

const config = {
  apiKey: “XXX”,
  authDomain: “XXX”,
  databaseURL: “XXX”,
  projectId: “XXX”,
  storageBucket: “XXX”,
  messagingSenderId: “XXX”
}

firebase.initializeApp(config)

を追加します。どこから apiKey等をもってくるかといいますと、Firebaseに飛んでもらって、右上の「コンソールへ移動」をクリック。
プロジェクトを選択。
下記の画像のように「プロジェクトを設定」をクリック。

ページを移動したら、下にスクロールすると、表示されるので。それをコピペする。

手順６

ターミナルに戻って

$ firebase login

$ firebase init
? Which Firebase CLI features do you want to set up for this folder? 
> Hosting

? Please select an option: 
> Use an existing project

? Select a default Firebase project for this directory:
> Firebaseで作成したproject名を選択

? What do you want to use as your public directory? 
dist

? Configure as a single-page app (rewrite all urls to /index.html)?
N

? File dist/index.html already exists. Overwrite?　N

最後

$ firebase deploy

で、デプロイできます。
しかし、以下のコマンドでお試し(ローカル環境)でデプロイされる時と全く同じ内容を表示できます。

$ firebase serve --only hosting

普段は、

$ yarn serve

で確認しながら制作した方が良いかと。いきなりデプロイは、精神的ハードルが高いので、何ども確認して、最後にデプロイしましょう。

何かあればコメントの方、お願いします。
追々、実際にディレクトリをいじっても、エラーが発生しないか確認してみるつもりです。また、Firebaseのプロジェクト作成手順なんかも書けたらと。
とりあえず、Qiitaに初投稿してみたかったので書いてみました。
Vue + Firebaseで一通りの環境構築〜デプロイまでの助けになれたら幸いです。