vue.js firebase 環境構築 (os x)

vue.js firebase 環境構築についてのメモです。

環境確認

中途半端な環境になっているかもしれないので確認をする
ターミナルで 各コマンドの状況を確認する

node バージョン確認と削除

v10 以外の場合 firebase でエラーとなるので削除する必要がある

node -v
v10.20.1

brew でインストールした node の削除

brew uninstall --ignore-dependencies node

nodebrew　でインストールしている場合の削除方法

nodebrew -v
sudo npm uninstall npm -g

周辺ファイルの削除

sudo rm -rf ~/.npm
rm -rf ~/node_modules

参考
Macのnodebrewで入れたnode, npmをクリーンアップ

nodebrew の インストール

nodeバージョンを選択してインストールできる nodebrew を導入する。

brew install nodebrew

環境変数を追加

echo 'export PATH=$PATH:~/.nodebrew/current/bin/' >> ~/.bashrc
source ~/.bash_profile

nodebrew バージョン確認とセットアップ

nodebrew -v
nodebrew setup

v10系の node.js を nodebrew でインストールする

nodebrew ls-all
nodebrew install v10.15.0
nodebrew use v10.15.0

nodeバージョン確認

node -v
v10.15.0

firebase Cli をインストールする

Firebase CLI リファレンス を参考にインストールする

npm install -g firebase-tools

ここまでの設定で　環境構築　は終わったはずなので、次はプロジェクトを作成してみましょう。

firebase コンソールでプロジェクトを登録する

firebaseコンソール

firebase Cli で プロジェクトを初期化する

mkdir sample01
firebase login
firebase init
作ったプロジェクトを指定して hosting を有効にする

firebase デプロイしてみる

firebase deploy

vue cli をインストールする

npm install -g @vue/cli

vue cli でプロジェクトを作る

cd [firebaseのプロジェクト ディレクトリ]
vue create vue-app

vue で作ったプロジェクトを実行してみる

cd vue-app
npm run serve

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

vue で作ったプロジェクトをビルド

npm run build

./dist ディレクトリが生成されるこのディレクトリを firebase hosting 先として指定する

firebase.json の修正

hosting のディレクトリを public から vue-app/dist ディレクトリに修正する

{
  "hosting": {
    "public": "vue-app/dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
...

修正したらデプロイしてみる

firebase deploy