はじめに
こんにちは！@nyakako13 です。
Reactアプリをfirebaseにデプロイする過程で困ったので対処法をまとめます。
問題
$ firebase deploy
して、Hosting URLにアクセスすると・・・
welcomeて！！！
作ったアプリは一体どこに？？
解決方法
$ firebase init
の後の質問事項で、public directoryに"dist"を選択して、
再度
$ firebase deploy
することで改善しました。
原因
firebase init の後の質問に罠がいくつかあります。
①public directoryの罠
公開ルート ディレクトリのデフォルトはpublicなので
深く考えずにそのまま選択してました。
ただ今回は
$ npm run build
でbuildしたので、デプロイしたいファイルはdistディレクトリにありました。
公開したいファイルがある場所を指定しておかないともちろんアプリは表示しません。
これはしょうがない。
ちなみにfirabase initを一度した後だったら
init時に作成される、firebase.jsonで後から変更もできました。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
③Overwrite?の罠
①で指定したディレクトリにindex.htmlがあると上書きするかと最後に聞いてきます。
ここはNです！
yを選ぶとwelcomeページのindex.htmlに上書きされます。（index.htmlを何で上書きするのかちゃんと教えてほしい・・・）
firebase init の後にbuildするなら、
そもそも上書きしないので問題ないですが、
今回はbuildした後に、
(再設定のため)さらに firebase init した時にindex.htmlを上書きしてしまったので
公開ディレクトリをdistにしたのにまたwelcomeページが！？となりました。
感想
2重の罠で少し混乱しましたが、それでもfirebaseのデプロイ楽すぎるー！
ターミナルの英語の選択肢も今後はちゃんと読んでから選びます！！
おわりに
よかったらX(@nyakako13)もフォローしてもらえると嬉しいです。
Qiita100投稿まで残り95！
未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！
参考