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


はじめに

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

手順1

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

$ yarn global add @vue/cli

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

$ vue create プロジェクト名

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

手順2

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

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

手順3

$ yarn init

質問されるが、全部 Enter

手順4

$ yarn add firebase
$ yarn global add firebase-tools

手順5

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

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に飛んでもらって、右上の「コンソールへ移動」をクリック。
プロジェクトを選択。
下記の画像のように「プロジェクトを設定」をクリック。

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

手順6

ターミナルに戻って

$ 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で一通りの環境構築〜デプロイまでの助けになれたら幸いです。