Firebase HostingとVue.jsを触ってみる。

FirebaseでVue.jsを試してみる。どっちも便利なCLIツールがあって簡単で早い。

最近のフレームワークやプラットフォームは、こういう目的に応じたプロジェクを生成してくれたり、簡単にアクセスできる便利なCLIツールがついていることが多くて良い。

試してみよう。というか以下からは公式ドキュメントに書いてあるのでそっち見たほうがよい。

firebase cli toolをnpmでインストールしてみる。

npm install -g firebase-tools

firebase loginとすると、Firebase(というかGoogle)にログインできる。これで認証終わりなのすごい、さすがGoogle。

firebase login

Firebaseは置いておいて、次はVueプロジェクトフォルダを作る。

今度はVueのツールのVue cliでプロジェクトを作ってみる。

Vue cliインストール

npm install -g @vue/cli @vue/cli-service-global

Vueプロジェクトを作る。

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 build

distフォルダにビルドされる。さあ最後にFirebaseで公開するコマンドを打つだけだ。いったんローカルでも確認しよう。

firebase serve

Vueのときと同じ画面が確認できたらデプロイする。

firebase deploy

デプロイが完了したら、アドレスに接続する。

https://アプリケーション名.firebaseapp.com

作ったものが公開された。すごい。

まとめ

Hostingは容量やアクセス量で料金が発生するようだ、個人のこれくらいのごく少量なら無料みたい。

公開したアドレスが自動生成感なく結構読みやすい。しかも最初からhttpsになっている。

コマンドいくつかで、すぐにフォルダの公開までできた。