Vue.jsで作ったサイトをFirebaseでホスティングする

前回、Vue.js + Firestoreを使用してラーメン一覧を表示するところまで作った。今度はこれをFirebaseでホスティングしてみる。

Vue.js + Firestoreでデータを取得してラーメン一覧を表示する

いつもはホスティングはnetlifyを使っているんだけど、Firebaseにもあるらしいのでせっかくだから試してみようかと。

プロジェクトのルートへ移動して、ホスティング用のファイルを生成する。

Vue.jsはビルドするとdistディレクトリにファイルを吐くので、公開ディレクトリはdistと指定すること。

$ cd todo-vue-cli3
$ firebase init hosting

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: hogehoge-project

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

デプロイしてみたら怒られた。

$ firebase deploy
Error: HTTP Error: 410, This version of the Firebase CLI is no longer able to deploy to Firebase Hosting. Please upgrade to a newer version (>= 4.1.0). If you have further questions, please reach out to Firebase support.

うーん。npmfirebase-toolsをアップグレードしても解消せず、どうやってもfirebase-toolsのバージョンが3系のまま。。

/usr/local/bin/lib/node_modulesの中にfirebase-toolsがインストールされているみたい。グローバル領域に入ってるということだろう。

コマンドでアンインストールしても消えなかったので、mvしてしまった。一応これでyarn addしたfirebase-toolsが参照されるようになったぽい。

$  ls /usr/local/lib/node_modules
@vue           firebase-tools n              pure-prompt    serverless     yarn
$ mv /usr/local/lib/node_modules/firebase-tools ~
$ firebase --version
6.1.2
$ todo-vue-cli3 git:(master) ✗ which firebase
/Users/harada/.nodebrew/current/bin/firebase

気を取り直してデプロイする。

$ firebase deploy

=== Deploying to 'hogehoge-project'...

i  deploying hosting
i  hosting[hogeoge-project]: beginning deploy...
i  hosting[hogeoge-project]: found 2 files in dist
✔  hosting[hogeoge-project]: file upload complete
i  hosting[hogeoge-project]: finalizing version...
✔  hosting[hogeoge-project]: version finalized
i  hosting[hogeoge-project]: releasing new version...
✔  hosting[hogeoge-project]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/hogeoge-project/overview
Hosting URL: https://hogeoge-project.firebaseapp.com

とりあえずデプロイは成功した模様だが、なんらかのデフォルトの画面がでてるっぽい。

デフォルトの画面

ソースコードを確認すると、distには何も吐かれていない。おそらくVue側でビルドする必要がありそうだ。

$ yarn build
$ firebase deploy
=== Deploying to 'hogehoge-project'...

i  deploying hosting
i  hosting[hogehoge-project]: beginning deploy...
i  hosting[hogehoge-project]: found 7 files in dist
✔  hosting[hogehoge-project]: file upload complete
i  hosting[hogehoge-project]: finalizing version...
✔  hosting[hogehoge-project]: version finalized
i  hosting[hogehoge-project]: releasing new version...
✔  hosting[hogehoge-project]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/hogehoge-project/overview
Hosting URL: https://hogehoge-project.firebaseapp.com

できたー!!

ホスティング成功画面

Netlifyは神lifyだとは思うが、cliでちょちょいと適当にコマンドでホスティング出来るのもなかなかイケてる。Firebase側にまとめたいときには十分使えそう。

GitHub GitHub - harada4atsushi/todo-vue-cli3-



mofmof inc. 採用情報

mofmof inc.では、一緒に仕事をしてくださるエンジニアを募集しております。
募集要項については以下をご確認ください。
興味を持っていただけましたら、ぜひ一度ゆっくりお話出来れば嬉しいです。

mofmofは何をしたいのか
https://www.mof-mof.co.jp/recruit/want-to-do