Firebase Hostingにデプロイ

こちらの続き。

デザインについて、今参考にしているのはVuetify公式サイトのレイアウトサンプル。
https://vuetifyjs.com/ja/framework/pre-made-layouts

これとかすごいと思いますが、初心者はまだ手を出さないことにします。
Vue Material Admin
https://vuejsprojects.com/vue-material-admin

Firebase Hostingにデプロイ

引き続き、こちらを参考に。
Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 4/5 – Firebase Hostingにデプロイ]

https://note.mu/tkugimot/n/n44c327a22c24

最終的にはGCPにリリースする予定ですが、Firebaseも勉強してみたいので、流れに沿ってやってみます。

npm install -g firebase-tools

でfirebase-toolsのインストール、

firebase login

でログインして、プロジェクト作成して、というところは書いているまま。
この次の

firebase init

をどこで実行すべきか?
今現在nuxtアプリを作っている、すなわち、componentsとかlayoutsとかが存在するフォルダで実行します。
最初
? What do you want to use as your public directory?
に対して、初期値のpublicで進めてしまいましたが、distを指定すべき。
? Configure as a single-page app (rewrite all urls to /index.html)?
はNoでよいかと。
ところが、

npm run build

で大量エラー。
この状態でも

 firebase deploy

はできる。この時点では、public内に作成された雛形のindex.htmlが表示される。

よくよく見ると

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Missing binding・・・
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 12.x
Found bindings for the following environments:
  - Linux/musl 64-bit with Node.js 12.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports・・・

というようなエラーなので、

npm rebuild node-sass

をやると
npm run build
OK!
npm run generate
OK!
しかし、publicではなくdistに作られた
なので、もう一回firebase init
上書きを聞いてくれるのでNo

firebase deploy

https://titanicfire-d43cd.web.app/

できた!