ReactとFirebaseの連携部分を学ぶためにチャットアプリを作りたいと思いました。
調べたところすぐにできそうだと思ったのですがいくつかつまずいた部分を議事録として残します。
まずはFirebaseにデプロイできる環境を作っていきます。
React開発環境を構築
シンプルな設定でいきたいと思います。
npx create-react-app my-appでサクッと構築するか自前で設定するかお好みで。
今回は下記の設定で実装していきます。
{
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --progress --mode production"
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
"dependencies": {
"firebase": "^9.8.2",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
本来は開発環境用と本番用を分けるべきですが、省略します。
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'js/app': ['./src/App.jsx'],
},
output: {
path: path.resolve(__dirname, 'public/'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: ['babel-loader'],
exclude: ['/node_modules/'],
},
],
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
]
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello React!!</h1>;
};
ReactDOM.render(<App />, document.getElementById('app'));
yarn startでhttp://localhost:8080/で確認できると思います。
Firebaseの設定
次にFirebaseにデプロイするための環境を整えていきます。
package.jsonにfirebaseのモジュールをインストールする必要があります。
Firebaseのプロジェクトを作成したあとに実装のガイドが出てくるのでそれに従って実行していけばデプロイに必要な設定は完了できると思います。
◼️参考にした記事
ローカル環境のセットアップ
◼️firebase initを実行、Hostingを選択する
◼️Use an existing projectを選択し、既存のプロジェクトを選びます
◼️デプロイするディレクトリを選択します
What do you want to use as your public directory?
◼️シングルページアプリケーションの設定を有効にするかを選択します
Configure as a single-page app (rewrite all urls to /index.html)?
◼️Githubの自動ビルドとデプロイの設定
Set up automatic builds and deploys with GitHub?
「yes」とするGithubの認証画面がブラウザに表示されます。
Githubのパスワードを入力すれば完了です。
◼️リポジトリを選択します。
For which GitHub repository would you like to set up a GitHub workflow?
◼️デプロイ前にビルドするかどうかの設定
Set up the workflow to run a build script before every deploy?
今回はReactなのでyesを選択します。
◼️デプロイする前に動かすビルドスプリクトを入力する
What script should be run before every deploy?
デフォルトではnpm ci && npm run buildよければEnter。
◼️プルリクエストがマージされた時に本番にマージするか
Set up automatic deployment to your site's live channel when a PR is merged?
◼️本番にマージする場合の対象ブランチを選択します
デフォルトのmainで設定しておきます。
ここまで終わったらディレクトリ内にfirebase.jsonが作成されます。
Firebaseにデプロイする
firebase deployのコマンドを叩けばデプロイが完了すると思います。
完了しれば指定されたURLに接続することでローカル環境と同様の表示が確認できると思います。
問題発生時のTips集
デプロイの設定が完了するまでに出会ったエラーの対処方法をTipsとして残します。
お役立ていただけると幸いです。
プロジェクト一覧表示が失敗して、firebase initが完了しない
firebase initを実行した際に、Failed to list Firebase projectsというエラーが出る場合があります。
firebase-toolsをアップグレードすると認証トークンが無効になる場合があるらしく一度ログアウトしてログインしたら直りました。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
// 途中省略
// errorが出る
Error: Failed to list Firebase projects. See firebase-debug.log for more info.
// debug.logを見ろと言われる
Having trouble? Try again or contact support with contents of firebase-debug.log
// Errorには、認証情報おかしい的なことが書かれている
Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential
// 結局は下記で解決
$ firebase logout
$ firebase login
firebase initでHostingが選択できない…は全角入力になっているから
firebase initを実行すると下記のようにどうしますか？と選択肢を表示してくれます。
矢印キーで上下させスペースキーで選択して、Enterを押す。
だけのはずなのに何故か画像のようにセレクトされない（緑の丸印）場合は「全角入力」になっていると思うので半角入力に直して試してください。
firebase deployで反映されない！
僕の場合はChromeのキャッシュでした。
デプロイ後にシークレットブラウザで確認してみてください。