Nuxt3プロジェクトをFirebaseでホスティングしたいだけ

22:10

自分用の簡単なウェブサイトをテンプレートを使って３時間余りで作った。
そして、いざホスティングしようとして早３時間。

前途多難。
最初Github Pagesでホスティングしようとしてたが、どのサイトも言ってることが違って全ての単語の意味がわからなかったので、「Firebaseの方は1回使ったことあるし、できるんじゃないか」と思い立ってFirebase Hostingを使うことにした。

Nuxtの中身は他プロジェクトで1回書いたことあるけど、1から10まで自分でやるのははじめて。したがって出てくる言葉全て未知。

このページを参考にやってみよう。

Nuxt3をFirebaseにデプロイする - Qiita

Firebase のプロジェクト作成まではすぐできた

yarn add --dev firebase-admin firebase-functions firebase-functions-test

ここで

/bin/sh: husky: command not found
error Command failed with exit code 127.

Huskyはテンプレで既に入ってたんだけどなんかエラー出してくるから既に消したはず。。なんでいるんだお前。

余談だけど、一年前くらいからMacの言語切り替えボタンを2回押さないと切り替えられないバグに苦しめられている。ブラインドタッチができないので気づいたら「ぎてゅb」とか打っている。

”scripts”でhusky呼んじゃってた。これを消す。
yarn add 成功。

firebase deploy

これだとi functions: preparing codebase default for deploymentでエラーが出たので、Hostingだけデプロイする。

firebase deploy --only hosting

すると。。。

✔  Deploy complete!

22:40

わーい！！
デプロイされたURLをタップすると。。。

Error: Page not found
The requested URL was not found on this server.

まだ時間が必要なのかな？30分くらい待ってみよう。

次の日　8:28

まだPage not Foundだ。

firebase emulators:start

こっちでやってみると、こんなエラーが

⚠  hosting: Port 5000 is not open on localhost, could not start Hosting Emulator.
⚠  hosting: To select a different host/port, specify that host/port in a firebase.json config file:{// ..."emulators": {"hosting": {"host": "HOST","port": "PORT"}}}i  emulators: Shutting down emulators.
Error: Could not start Hosting Emulator, port taken.

firebase.jsonにこれを追加してみたが違うみたい

"emulators": {
"hosting": {"host": "5000","port": "5000"}
}

こうしてみた。

"emulators": { "hosting": {"port": "3000" } }

すると、さっきのエラーは消えた。次のエラー

i  emulators: Starting emulators: functions, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, firestore, database, pubsub, storage
✔  functions: Using node@16 from host.
i  hosting[churiki-tenna]: Serving hosting files from: .output/public
✔  hosting[churiki-tenna]: Local server: http://localhost:3000
i  ui: downloading ui-v1.7.0.zip...
Progress: ===============================================================================================================================> (100% of 5MB)
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/Users/tenna/Desktop/mySite/.output/server" for Cloud Functions...

Error: An unexpected error has occurred.

Having trouble? Try again or contact support with contents of firebase-debug.log

こうした。
firebase emulators:start --only hosting

│ ✔  All emulators ready! It is now safe to connect your app. 

できた！しかしhttp://localhost:3000/を開いてもPage not Found…💃

こんなWarningが。

⚠  emulators: It seems that you are running multiple instances of the emulator suite for project churiki-tenna. This may result in unexpected behavior.

これは一回visual studioを閉じてからまたやったら消えた。でも相変わらずサイトは表示できない。

ここで提案されてた方法でやってみた。

https://github.com/firebase/firebase-tools/issues/1044

=== Deploying to 'churiki-tenna'...

i  deploying hosting
i  hosting[churiki-tenna]: beginning deploy...
i  hosting[churiki-tenna]: found 121 files in .output/public
✔  hosting[churiki-tenna]: file upload complete
i  hosting[churiki-tenna]: finalizing version...
✔  hosting[churiki-tenna]: version finalized
i  hosting[churiki-tenna]: releasing new version...
✔  hosting[churiki-tenna]: release complete

✔  Deploy complete!

9:00

できた！
Firebaseの「Welcome Firebase Hosting Setup Complete」のページになった。ちょっと待ってみる。

30分くらい待った。するとページが以下の表示になった。

Page Not Found
This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

確かにpublicに指定した.output/publicにはindex.htmlがない。

というかプロジェクト内のどこにもindex.htmlは無い。
これが必要だった。

yarn generate

無事index.htmlが作成されたので、firebase deploy。

できたーーーーーーーーー！！！！！

けどレスポンシブデザインになってるはずなのにレスポンシブになってない。。？
というか画面サイズがおかしい。

とりあえず公開できたので完。