FirebabaseのAuthenticationアプリをレンタルサーバーで公開する
開発環境で構築したFirebaseのAuthentication機能を、レンタルサーバー内にアップして公開する方法を紹介します。
ユーザー認証関連のバックエンド機能はFirebase、アプリはwebpackを使って構成をしています。
webpackをバンドルした後、生成ディレクトリ内にindex.htmlとfirebase.config.jsonを入れましょう。
ユーザー認証アプリを一般公開する
本記事では、前の記事で作ったユーザー認証・登録アプリを独自ドメインサイト内で一般公開します。
本アプリのユーザー認証機能はFirebaseのバックエンドを使っていますが、webpackのパッケージを使って開発環境を構築しています。
このアプリを、独自ドメインを設定したレンタルサーバー内にUPして表示させます。
webpackのバンドル
webpackは、CSSやJavaScript・画像など、Webサイトを構成するあらゆるファイルを1つにまとめて出力するツールの事です。
複数のjsやCSSを一つのファイルに統合すれば、それだけ読み込めば良くなり、ブラウザのリクエスト数を軽減できます。
ファイル転送を最適化する事にもつながりますね。
バンドル後は1つのファイルを読み込むだけ
前回までwebpackを使ったテスト環境を作りましたが、この段階では十八番である単一ファイルへの統合がされていません。
ですので「バンドル」と言って、使用ファイルを1つのファイルにまとめる必要があるのです。
統合されたjsファイルを1つindex.html内で読み込むだけで、アプリが稼働するという訳です。
バンドルが終わったら、公開ディレクトリ別途index.htmlファイルを用意する必要があります。
構成ファイルの編集
まずは現在の構成を確認しておきましょう（前回の開発環境）。
├― lpeg-auth-test ├─ node_modulesフォルダ ├─ app.js ├─ firebase-config.json ├─ index.html ├─ package.json ├─ package-lock.json └─ webpack.config.js
上記の様な構成になっているはずです。
では各ファイルに修正を加えていきます。
package.jsonの編集
package.jsonファイルの「script」欄に、以下のコードを追記しましょう。
"build": "webpack --mode=production"
上記コードは、「build」での命令時にwebpackの実行と実行モード（--mode）を指定する様にしています。
これにより「npm run build」が使える訳です。
実行時のタイプ
実行時の種類（--mode）は、3つあります。
・development（開発環境）
・production（本番環境）
・none
ここを「production」にする事で、実行時に1つのファイルに統合されるようになります。
さらに〇〇〇.min.jsの様に、圧縮されたファイルとして生成されます。
modeを指定しないと、実行時に警告が発生しますので注意が必要です。
webpack.config.jsの編集
次にwebpack.config.jsです。変更する箇所は以下の部分です。
mode: 'production',
mode部分を、「development」から「production」に変更しましょう。
outputの欄
次にoutputの欄に以下のコードを追記しましょう。
path: path.resolve(__dirname,'public'),
そうすると出力時に「public」フォルダの中に生成されます。フォルダ名は自由です。
このコードを入れなかった場合は自動的に「dist」フォルダが生成されます。以下からはコードを入れずに進めています。
webpackの実行
ではいよいよバンドルをしていきます。
コマンドラインを開いて、対象ディレクトリへ移動しておきましょう（Windows11環境です）。
実行命令
以下のコマンドを入力して下さい。
npm run build
npmを使った実行
本来は直接「webpack」とコマンド入力しても、アプリは実行できます。
但しmodeをproductionで実行する必要があるので、毎回細かく指示しなくて良い様に、先程script欄に追記をした訳です。
「build」の別名（エイリアス）で、webpack実行とmodeの指定を掛ける命令を登録していました。
distファイルの生成
先程生成先のディレクトリを指定するコードを紹介しましたが、ここではコードを入れずにバンドルしています。
ですので「dist」ファイルが自動で生成されているはずです。
構成としてはdistフォルダの中に「jsフォルダ」があり、中にapp.jsが入った状態でしょう。
バンドル後の構成
├── dist（生成ファイル） │ └── js │ └── app.js 以下は現状のまま ├── node_modules ├── package.json └── app.js └── index.html
これでdist/js/内に、統合された新たなapp.jsファイルが生成されました。
index.htmlをコピー設置
本アプリは、index.htmlの中にユーザー認証用の入力フォームやボタンがhtmlソースとして記述されています。
これはこのまま使いますので、開発環境のディレクトリ内にあるindex.htmlを、dist内にコピーしましょう。
├── dist │ └── js │ └── app.js │ └── index.html（コピーしたファイル）
移動はさせましたが、index.html内で読み込んでいるjsのパスは変わらず「js/app.js」なので、問題はありません。
htmlソースの中身は一切変更する必要はありません。
firebase-config.jsonをコピー設置
実はもう一つ任意に設置する重要ファイルがあります。それが「firebase-config.json」です。
firebase-config.jsonには、Firebase Consoleの中で作成したアプリの各ID情報が入っていますよね。
firebase-config.json内の記述
apiKey: "○○○○○○○○", authDomain: "○○○○○○○○", projectId: "○○○○○○○○", storageBucket: "○○○○○○○○", messagingSenderId: "○○○○○○○○", appId: "○○○○○○○○"
このファイルを、先程のindex.htmlファイルと同じ位置に複製してきましょう。
├── dist │ └── js │ └── app.js │ └── index.html │ └── firebase-config.json（コピーしたファイル）
本アプリの様にfirebaseをバックエンドに使っている場合、この様にconfigファイルを設定する必要があります。
本来はビルド時に自動生成するのが良いのでしょうけど、今回は割愛しています。
サーバーにUPする
ではdistファイルを丸ごと、FTPソフトなどでWEBサイトにUPしましょう。
格納したらブラウザで、パス（URL/dist/index.html）を直接打ってみます。
ローカル環境（localhost）の時と同じ「Firebase Authentication ログインテスト」が表示されるはずです。
稼働確認
ログイン／新規登録の画面のみが表示されたら成功です。
テスト環境と同様に、メールアドレスとパスワードを入れて「ログイン」或いは「新規登録」ボタンを押してみましょう。
ユーザー判定・登録などの状況が、Firebase Console側にも反映されているはずです。
