作れたけどぶっちゃけ一向に理解ができていない。
環境
- Windows10 PowerShell
「npm」を使うのでNode.jsをインストールしておく。
具体的にはこう。
Firebaseもインストール。
npm install firebase
インストールできてるか、バージョン情報を叩いて確認。
node --version
npm --version
firebase --versionセキュリティに引っかかって一部のコマンドを受け付けない場合があるので、実行ポリシーをいじっておく。そうなってからでもいいけど。
Set-ExecutionPolicy RemoteSigned -Scope Process選択肢が出たら「Y」。この設定はPowerShellを終了するとリセットされるくさい。
Firebaseの準備
「Firebase Authentication」とかで検索すれば設定方法はいくらでも出てくるのでそれを参考に。
Authenticationのログインプロバイダに「Google」を追加しておくこと。
コンソールからもプロジェクトの作成とかはできるけど、わからないうちは管理画面からやるのが楽。
参考記事
この記事がベースだけど色々アレだった。
やっていく
作業ディレクトリにwebpackとwebpack-cliをインストール。
npm i -D webpack webpack-cli参考記事に沿って以下のディレクトリやらファイルを作成。
- dist/index.html
- src/index.js
- firebase.json
- webpack.config.js
package.jsonはインストール時に生成されてるので、参考記事と中身を見比べて不足部分を追記。
記事通りにこれで実行するとエラーを吐いた。記事通りにいかない。
追加で以下の内容でインストールするとエラーが出ずに正常にbundle.jsが書き出された。
npm i -D --legacy-peer-deps terser-webpack-plugin optimize-css-assets-webpack-plugin実行コマンドはこれ。
npm run build「dist/index.html」をブラウザで開いて「サインイン」が表示されていれば成功。
認証はローカル環境だと動かないのでWEBサーバーにアップする。distディレクトリの中身をまるまる移す（index.htmlとbundle.js）。「サインイン」をクリックするとGoogle認証のポップアップが出る。
サインインするとfirebaseの「Authentication」にユーザーが追加される。
振り返り
調べたところFirebaseの紹介記事はないことはないんだけど現行バージョンに対応するものが殆どなかった。大型アップデートだったんでしょうね。でもって、開発環境は様々だから色んなアプローチがあるわけで、しかもみんな基礎になる部分をすっ飛ばして要点を書いてあるからズブの素人には全く参考にできない。
方法を公開している方々と同様の環境じゃないからコケた部分があると思う。OSのこと、PC自体にインストールしているもの、とか。単純に記載漏れもあるかもしれない。ともあれ、なんとかなってよかった。
「–legacy-peer-deps」について
最後の方に追加でインストールした内容。
webpackのバージョンが噛み合わないようで、通常の方法だとwebpack-pluginがインストールできない。そういった場合に突破するのが「–legacy-peer-deps」。動くかどうかは別問題なので、インストールできたからと行っても安心できない点がある。
問題というか課題
Firebaseを扱うことがテーマだったので一旦これで成功だけど、これ単体ができたところで何も話にならないわけで。特にログインなんてWEBサイトを構築する中の1つのコンテンツでしかないので、組み合わせとか応用の方法を理解していかなきゃいけない。
おまけ：webpack-dev-serverを使う
localhostの鯖立てで動作確認しようぜって感じの。
現行バージョンは4.9.2。
まずインストールする。
npm install webpack-dev-server --save-devインストールしたらバージョン確認兼インストール確認
npx webpack -v
//結果例
webpack: 5.73.0
webpack-cli: 4.10.0
webpack-dev-server 4.9.2package.jsonにスクリプトを仕込む。
{
...
"scripts": {
...
"start": "webpack-dev-server"
},
...
}これで「npm start」が使えるようになる。
webpack.config.jsにも数行足す。
module.exports = {
...
mode: 'development',
devServer: {
static: {
directory: path.join(__dirname, 'dist')
}
}
...
};こっちはサーバーの設定。distに入ってるものを表示させたいのでディレクトリをそのように指定する。
この他にも色々設定できるので、興味があれば以下を参照。
コマンド入力からサーバーを稼働させる
npm start色々出力される中にURLが入ってるのでそれにアクセスする。
例：http://localhost:8080/エラーがなく表示されてたら成功。
ビルドしなくてもちゃんと動いてくれるので、手を入れる際に便利ですね。
終了するときはコンソール上で「Ctrl + C」から「Y」。
コメント