はじめに
どうも。jQueryおじさん改めjQuery おにいさんのなべっちです！
以前からずっと気になっていたVue.jsに重い腰を上げて入門します。
失踪すると思った？残念でした！
前回はこちら
jQueryおにいさんと始める Vue.js その1 〜初めましてVueさん〜
シリーズの目的と方針（予定）
- Vue.js + Firebaseで何か作って公開する
- 少しずつできる事を増やしながらやったことと感じた事を筆者目線で殴り書く←ここ重要
- つまり、筆者と同じ体験をすることになる
- 決して解説記事ではない
- まあ解説になることもあるかもしれない
- 緩くてもいいじゃないか 人間だもの なべを
今回のお題は「vue-cliでプロジェクト作ってFirebaseで公開」
前回ファイル単体で書いていたので今回は1つのプロジェクトっぽいものを作成して、
今巷で話題（ホント？）のFirebaseに公開してしまいましょう。
本当はDBとか繋ぎたかったけどFirebaseでつまずいてタイムアップだったというのは秘密
vue-cliを触ってみる
Vueプロジェクトを作成しよう
vue-cliってのがVueのプロジェクトを始めるのには簡単でいいらしいです。
https://jp.vuejs.org/2015/12/28/vue-cli/
一昔前は色々な知識を振り絞ってプロジェクトを作らないといけなかったそうです。
もうgulpやwebpackで消耗しない！vue-cliを使ったVue.js開発
正直そこらへんの知識は僕には全然ないです。
脳死で以下コマンド叩きます。（危険）
# vue-cliインストール
$ npm install -g vue-cli
# nabetestという名前のプロジェクト作成
$ vue init webpack nabetest
# プロジェクトに移動
$ cd nabetest
# プロジェクトにpackageインストール
$ npm install
# プロジェクト起動
$ npm run dev
どの言語始める時もこの瞬間はワクワクしますよね。
今から始まるんだなって...
新規ページを作成してみよう
コンポーネントの追加
/src/components/のなかにTableTest.vueというファイルを作成します。
（本当はDBから値取得してテーブル表示する予定でした...）
とりあえず初めから入っていたHelloWorld.vueを参考に文字の表示だけさせてみましょう。
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
name: 'ここはなんの名前じゃ', // <- ここがなんなのかは今は不明
data () {
return {
msg: 'テーブル表示させたい'
}
}
}
</script>
このcomponentsフォルダの中のファイルは当たり前かもしれませんが、Vueのcomponentの書き方に遵守しているっぽいです。
Vue Component の仕様
ルーティングの追加
/src/router/index.jsをいじればいいっぽいですね。
HelloWorldに倣って追加してみました。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TableTest from '@/components/TableTest'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/table_test',
name: 'TableTest', // <- ここがなんなのかは今は不明
component: TableTest
}
]
})
リンクの追加
リンクでの遷移も試してみたかったので、
/src/components/HelloWorld.vueに以下の１行を追加。
<router-link to="/table_test">Goto Test</router-link>
動かしてみよう
いいんじゃないでしょうか！
しかしURLだけは気になるんですよね。
まずhttp://localhost:8080にアクセスするとhttp://localhost:8080/#/にリダイレクトされること。
そして遷移先のURLも/#がついたhttp://localhost:8080/#/table_testだということ。
おいおい真相は明らかになるでしょう！
所感
Vueのコーディングをしている時にリアルタイムに編集が反映されるのにびっくりしました。
「は？何言ってんの？」というミナサマノタメニーgifを用意しました。（長いからちっさいアンド画質悪いけど）
Firebaseを触ってみる
環境設定
何はともあれ
Firebaseのページに行ってプロジェクトを作りましょう。
https://console.firebase.google.com/?hl=ja
そして
Firebase Command Line Interfaceをインストールします。
$ npm install -g firebase-tools
そしてログインします。
ブラウザに飛ばされて認証を行います。
あれどうやってるんでしょう。すごい。
$ firebase login
初期設定します。
Hostingを選んでください。
$ firebase init
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)
❯◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
あーこれがあの噂のコンソールにでるFirebase....崩れて...る
この過程の途中でこんなエラーが出ました。
Error: Must select at least one feature. Use SPACEBAR to select features, or provide a feature with firebase init [feature_name]
その時僕はエラーを読まずにこう考えたのです。
「おいおいなんだよ。なんか名前のつけ方とか違うのか？」
15分くらい悩みました。
よくよくこのHosting選択するときの説明を読むとですね...
これ...選んでエンターではない。スペースでチェック入れてエンターだ！！！
アホかよ。英語でもちゃんと読みましょうね。
（同じことやってる人多そうww）
そして、プロジェクトをビルドする必要があります。
$ npm run build
ビルドが完了したらプロジェクトルートにdistフォルダができているはずです。
このフォルダをhostingのpublicに指定します。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
いよいよデプロイ！！
$ firebase deploy
で...できた...（所要時間2時間）
所感
環境系の作業をしているといつも思いますが、
やっぱりどの人の記事も状況や環境は違うのでぴったり自分の境遇と合わない場合が多い。
この記事読んでFirebaseにVueプロジェクト置いてみようと思っている人もきっとこの手順通りやってもできない人もの方が多いんじゃないでしょうか...
でも世の中そんなもんでしょう。あきらめんな。
参考
Firebaseの始め方
Vue.js + Firebase を使って爆速でユーザ認証を実装する-Firebaseでプロジェクトを作成
firebaseとvue-cliを利用した環境を構築する
ブログで見たい方はこちら
jQueryおにいさんと始める Vue.js その2 〜vue-cliでプロジェクト作ってFirebaseで公開〜