Firebase Hosting で Basic 認証を設定する方法

Firebase Hosting で Basic 認証を設定する方法をご紹介します。

Firebase | ファイヤーベース

背景 Firebase Hosting で Basic 認証を設定したい

なぜ Firebase Hosting を使うのか?

Firebase Hosting を利用するのは 「無料で使い始められるから」 という理由だけです。

Netlify でも Basic 認証の設定はできるのですが、無料プランでは Basic 認証は使えないので見送りました。

利用サービス Firebase Hosting + Cloud Functions

本記事で利用するサービスは Firebase Hosting と Cloud Functions の2つです。

Firebase Hosting + Cloud Functions で Basic 認証

Firebase プロジェクト作成

まず、Firebase コンソール からプロジェクトを追加します。

firebaes init

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/tadashi_shigeoka/works/codenote-net/firebase-sandbox/firebase_hosting_with_basic_auth

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Functions: Configure and 
deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: basic-auth-sandbox (basic-auth-sandbox)
i  Using project basic-auth-sandbox (basic-auth-sandbox)

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
✔  Wrote functions/package.json
✔  Wrote functions/.eslintrc.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> [email protected] postinstall /Users/shige/works/codenote-net/firebase-sandbox/firebase_hosting_with_basic_auth/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 367 packages from 263 contributors and audited 1116 packages in 7.224s

31 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

Basic 認証の設定

Firebase Hosting + Cloud Functions で Basic 認証を設定するサンプルコードは、以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

🔗 Firebase Hosting with Basic Auth · Pull Request #1 · codenote-net/firebase-sandbox

また、サンプルコードは https://basic-auth-sandbox.web.app/ へ hosting していますので、そちらをご確認ください。

Basic 認証の「ユーザー名」と「パスワード」は youruser, yourpassword です。

Cannot GET / エラーの解決方法

👎 間違って static を public と同じ階層に作成した場合

間違って static を public と同じ階層に作成した場合、Cannot GET / というエラーメッセージが表示されます。

$ ls -l
total 32
-rw-r--r--   1 youruser  staff   320  4 9 22:46 firebase.json
drwxr-xr-x   8 youruser  staff   256  4 9 22:41 functions
drwxr-xr-x   2 youruser  staff    64  4 9 22:38 public
drwxr-xr-x   3 youruser  staff    96  4 9 22:38 static

👍 正しくは static は functions 直下に作成する

$ ls -l functions
total 8
-rw-r--r--  1 youruser  staff  320  4 9 22:46 firebase.json
drwxr-xr-x  9 youruser  staff  288  4 9 22:54 functions
drwxr-xr-x  2 youruser  staff   64  4 9 22:38 public

$ ls -l functions
total 248
-rw-r--r--    1 youruser  staff     361  4 9 22:39 index.js
drwxr-xr-x  296 youruser  staff    9472  4 9 22:35 node_modules
-rw-r--r--    1 youruser  staff  118274  4 9 22:35 package-lock.json
-rw-r--r--    1 youruser  staff     711  4 9 22:36 package.json
drwxr-xr-x    3 youruser  staff      96  4 9 22:38 static

Firebase Hosting へ deploy

最後に Firebase Hosting へ deploy します。

firebase deploy

以上、Firebase Hosting で Basic 認証を設定した、現場からお送りしました。