こんにちは、@codeship_techです。
今回はCodeShipで人気のReact.jsとFirebaseのホスティングサービスを使ったデプロイについてです。
あるあるの問題だと思うのでぜひ参考にしてください！
Firebaseを利用してとりあえずデプロイしてみたけど、どこのページが表示されているのか分からない上に、Firebase関連のコードにエラーが出ている。
Firebaseの設定が読み込まれていないようです。
Firebaseを利用する際は、APIKeyなどを格納した.envファイルをconfig.jsの様なファイルで読み込んであげて、その設定を元に、Firebaseパッケージを初期化します。
そこからRealtimeDatabaseやCloudFirestoreのインスタンスを作成することで初めてデータベースを利用することができます。
コードを見て、ちゃんとFirebaseの設定ファイルが読み込めていない場合は、適切にインポートするコードを描いてください。
さらに、初期表示がどこを表示されているかは、まずsrcディレクトリのindex.jsを見ましょう。
jsxで作成したReactコンポーネントを統合しているAppコンポーネントが、正常にhtmlにレンダリングできていないため、ReactDOM.render(<App />, document.getElementById(‘root’));
という記述を追記しましょう。
これはrootとIDのついたhtml要素に対してReactで作成した仮想DOMを埋め込む記述です。
そのため、htmlファイルにその要素が存在する必要があります。
public/index.htmlの中身を見て、IDがrootの要素がなければ適当に作成しましょう。
デプロイ時に表示されている画面は、ここに直接記述されています。
不要なものは削除しましょう。
授業日記についてのご意見
CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。
