Firebase HostingとVue.jsを触ってみる。
FirebaseでVue.jsを試してみる。どっちも便利なCLIツールがあって簡単で早い。
最近のフレームワークやプラットフォームは、こういう目的に応じたプロジェクを生成してくれたり、簡単にアクセスできる便利なCLIツールがついていることが多くて良い。
試してみよう。というか以下からは公式ドキュメントに書いてあるのでそっち見たほうがよい。
firebase cli toolをnpmでインストールしてみる。
npm install -g firebase-toolsfirebase loginとすると、Firebase(というかGoogle)にログインできる。これで認証終わりなのすごい、さすがGoogle。
firebase loginFirebaseは置いておいて、次はVueプロジェクトフォルダを作る。
今度はVueのツールのVue cliでプロジェクトを作ってみる。
Vue cliインストール
npm install -g @vue/cli @vue/cli-service-globalVueプロジェクトを作る。
vue create project-nameここで、vue routerやvuexなど、プロジェクトに含めるプリセットを選べる。
あとから追加することもできる。シンプルにデフォルトを選択した。
あとvue uiというコマンドを使うとGUIでプロジェクトを作ったり、プリセットの管理ができるようだ。すごい
プロジェクトが作られたので、プロジェクトに移動して開発サーバーを立ち上げる。
cd project-name
npm run serve立ち上げたらとりあえずApp.vueにVueのコードを書いてみて画面で確認する。
<template>
<div id="app">
<div v-text="hello"></div>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return { hello: "hello" };
}
};
</script>画面に反映された。
次はこのVueプロジェクトをFirebase Hostingで公開できるようにする。
プロジェクト内で以下のコマンドを打つ
firebase init・プロジェクトに含めるFirebaseの機能を選べる。Database,Firestore,Functions,Hosting,Storage,Emulatorsというのがあるようだ。Hostingを選ぶ。
・次にFirebaseにある既存のアプリケーションにするか、新しく作るかみたいなのを聞いてくる。新しいアプリケーションを作るを選ぶ。
・他のユーザーとかぶらない名前を英語小文字でつける。アドレスになるからね。
うまくいったらプロジェクトが作られる。うまくいかなかったらウェブサイトにいって作ってから戻ってきて、既存のアプリケーション使うを選ぶ。
・公開するディレクトリ名を設定する。publicはVueがコンテンツ置き場に使っているので、publicじゃなくてdistにする。
・indexアドレス以外へのアクセスを全部indexにつなげるか聞かれる。シングルページアプリケーションを作るつもりなので、yと答える。
これで設定は完了。.firebaseという設定ファイルが作られる。こいつを直接編集してもよい。firebase initするとまた書き換えられる。
dist/index.htmlにサンプルコードが書かれている。消す前にいちべつする。firebase.jsといったjsファイルを持ってきて書くだけで、いろいろfirebaseの機能が使えるんだね。今はつかわない。
ここでまたVue プロジェクトに話を戻すが、プロジェクトをビルドする。
Vueプロジェクトフォルダ内で以下
npm run builddistフォルダにビルドされる。さあ最後にFirebaseで公開するコマンドを打つだけだ。いったんローカルでも確認しよう。
firebase serveVueのときと同じ画面が確認できたらデプロイする。
firebase deployデプロイが完了したら、アドレスに接続する。
https://アプリケーション名.firebaseapp.com作ったものが公開された。すごい。
まとめ
Hostingは容量やアクセス量で料金が発生するようだ、個人のこれくらいのごく少量なら無料みたい。
公開したアドレスが自動生成感なく結構読みやすい。しかも最初からhttpsになっている。
コマンドいくつかで、すぐにフォルダの公開までできた。