こちらの続き。
デザインについて、今参考にしているのは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/
できた!