Firebaseにhtml/cssをアップして、Webページを確認する

Tweet

ことの始まり(飛ばしていいです)

久々にFirebaseにwebページをアップしようとしたら、見事にさっぱり忘れていた。FirebaseでWebページ確認するのって、URL貼って色んなブラウザごとに変なとこないか見れるから便利〜♪って思ってたので悔しい。

そもそも私のMacは、呪われている(訳: 結構前から中途半端にプログラミングをやってたせいで、.bashとかその辺が混乱してるんだと思う。パスを通すとか、すんなりできた試しがない。先生が無言になったこともある)。

ところでネットの記事って、どっかのマーケティング会社に言われたんだか何だか、文字数稼ぐために「**とは？」から始まるの、マジうざくね？
記事の始めに、どうでもいいアイコンが会話してスクロール長いのも、マジうざくね？

さて、Firebaseだけでもいいから、なんとかしたい。

問題: 読み込みたいと思ってるものと違うプロジェクトをなぜかデプロイしようとしてて、しかも失敗する。

色々、かなり、ググったり、ダクったり(* DuckDuckGo検索。広告が出づらい)したけどできない。DeepLを駆使して、恥を忍んでサポートに聞いた。

Firebaseのサポートの回答：このリンク(https://firebase.google.com/docs/cli#project_aliases)をチェックしてください。プロジェクト・エイリアスに関するドキュメントです。CLIは、プロジェクトのリストを含む.firebasercファイルにより、どのプロジェクトを使用するかを認識します。デフォルトではデフォルトのプロジェクトしかありませんが、例えば「***-****-****」という別のプロジェクトにデプロイしたい場合には、このファイルに追加して名前を付ける必要があります。手動で行う必要はなく、簡単なコマンドを使うだけです。

firebase use –add
(* プロジェクト エイリアスを追加する)

すると、プロジェクトリストから追加するプロジェクトを選び、名前を付けるように促されます。
例えば “staging “と名付けた場合は、”firebase use staging “で切り替えることができます。
firebase deploy –only hosting “と入力すると、コンテンツは***-****-****のウェブサイトにデプロイされます。

ふむ、CLI = コマンドラインツール (Firebase CLI) の略らしい(ここから)。

ここで、言われた通り、firebase use　(* プロジェクト ディレクトリに現在定義されているエイリアスのリストを表示)とか、
firebase use \ –unalias PROJECT_ALIAS　(* プロジェクト ディレクトリからエイリアスを削除)をターミナルでやって、邪魔者(プロジェクト)を消した。
更にFirebaseのコンソール(https://console.firebase.google.com/)からも消した。消したやつが何だったかは忘れた。
こうやって色んな成仏できない霊が生まれていくので、除霊していかないといけない。誰だったかも思い出せないけど。

問題2: .json関係でまたもエラー

でもまだうまく行かない。「.scssがダメだな！全然ダメだ！」的な不可思議なエラーを吐く。scssファイルなんかが、なぜ？解決した今でも、このエラーが結局何だったのかわからない。だって.scss消しても、検索しても出ないんだもん。
多分.jsonの中身が何か違うか、ファイルの置き場所が違うのではないかと思う。始めはよく分からず、Hosting以外にもRealtimeDataBaseとか選んでたから、そのせいかも。

サポートから言われた firebase deploy –only hosting –debug (* プロジェクトのルートディレクトリにfirebase-debug.logというファイルが作成される) をターミナルに何度か入れたり、firebase init (* 初期化)してる内に、なぜか直った。

エンジニアやるのってこういう不確定要素多すぎじゃない？無理じゃない？

基本はログイン > init > deployの順で、数年前と変わってない

以下、firebaseにwebページをアップする手順。

手順1

ターミナルで cd user/public でパスを移動する。
こうやって書くと、スマートに黒い画面だけで何かやってるように見えるけど、cd(半スペース)って打って、ターミナルにpublicフォルダまるっとドラッグ&ドロップでおk。
ちなみに玄人は多分、publicフォルダなんか使わず、任意のフォルダ指定して使ってるのかも知れないし、わざわざFinderへ戻ったりもしてない。

手順2

user/publicに、諸々のhtmlやcss, JS他をフォルダをまるっとぶっこんどく(手順１と2、逆でもいい)。

手順3 login

firebase login (* Firebaseへログインする)

(補足)
npm install -g firebase-tools@latest (* CLIを更新)
firebase –version (* 現バージョンを確認)
firebase deploy –only hosting –debug をやると、うまくいかないときにサポートに泣きついて説明する用のログが生成される。

手順4 init

firebase initをやると.jsonがuser/publicに生成されてるのが確認できる。
続いて設定を選ぶ。Realtimeなんとかとか色々書いてあるけど、Webページ上げるのは３つ目のHostingを選べばおk。
一番最初の質問で「publicでいい？」と英語で聞かれるのでEnter。あとは全部 N を入力してEnter。なぜならファイルをfirebaseの用意したhtmlファイルに上書きされることにも、GitHubを開かれてログインする用事も特にないので(用事がある人はしてください)。
.jsonがないと、firebaseはうんともすんとも言わない。.jsonの中身見ると、ホスティングがなんとかとか書いてあるが、難しいことは知らん。

手順5 deploy

ターミナルで、 firebase deploy
で、できるはずなのに、なぜかまだできなかった。。

続・デプロイできなかった原因

firebaseが読み込んでるパスが違うのが原因でアップロードできなかったようだったので、「もうFirebaseさんが思ってるパスでいいです。。」って打った(移動コマンド、パス変えてやり直した)。なぜこんな相違が起きたのかナゾ。前は素直にPublicを読んでたのに。

【誤】私が読み込もうとしてたパス
/Users/-私のPCの名前-/Public/(ここにhtmlファイルやcss, jsのフォルダとか)

。。なんかここにfirebase.json、database-debug.log、.firebaseのフォルダが生成されてる。なのに作ったファイル読み込んでるのは別のフォルダ。

ところでエンジニアって、フォルダをディレクトリって呼ぶよね。サーバと違って、2文字長くなってるのに(小声)。

【正】firebaseが読み込んでるパス
/Users/-私のPCの名前-/Public/public/(ここにhtmlファイルやcss, jsのフォルダとか)

cdで移動したときになんか間違えた？どうやって？？
そして、ここにあったdatabase-debug.logと、ui-debug.logは多分要らないので消した。

最後にcss(scss)が反映されてない、小さめのエラー

デプロイはなんとかできたが、.scssを読んでないようで、せっかく作ったcssがめちゃくちゃだ。なぜこうも呪われているのか。

解決策 > キャッシュを消す

Chromeのデベロッパーツール開く(⌘ + Option + i) > 右上の歯車マーク > Preferences > Network > Disable cache (while DevTools is open) にチェックを入れる > リロード(⌘ + R)

あと、作業自体はpublicでやらないほうがいいと思う(獣の勘)。

(ぼやき) リアルでJSができるデザイナーに会ったことがない

そういう募集要項は多いのに。
「私バカだから、htmlとかcssとか分かんないけど、html/cssの本書きました〜」ってデザイナー(女)は見たことあるけど。
私に足りないのはエンジニアスキルではなく、自尊心だったかも知んない。
そしてその本は、別に手に取らない。

ていうか、デザイナーなのにJavaScriptができるって何？
ポップアップウィンドウや、ドロップダウンリストが実装できること？
バックエンドの後工程が要る、ファイルのドラッグ＆ドロップとかができること？
そこまでできたら、フロントエンドエンジニアやればよくない？

ちなみにFirebaseのサポートの方の対応は、超早かったです。簡単な質問だと数時間後に来た(どこの国から送ってるんだろ？)。私が返信するのは、まったり三日後とかそんなだったのに。
ごめんなさいとありがとう。

おしまい。

Firebase Hosting を使ってみる
https://firebase.google.com/docs/hosting/quickstart?hl=ja

【第1回】 Google の mBaaS 「 Firebase 」とは？【はじめてみよう Firebase】
https://www.topgate.co.jp/firebase01-what-is-firebase#firebase-sdk

ざっくりFirebase入門&チャットアプリを作る
https://zenn.dev/lotoyamaguchi/articles/4c035ef07a8516

Tweet