Firebase Hosting で Basic 認証を設定する方法をご紹介します。
Firebase Hosting を利用するのは 「無料で使い始められるから」 という理由だけです。
Netlify でも Basic 認証の設定はできるのですが、無料プランでは Basic 認証は使えないので見送りました。
本記事で利用するサービスは Firebase Hosting と Cloud Functions の2つです。
まず、Firebase コンソール からプロジェクトを追加します。
$ 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!
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 です。
? 間違って 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 deploy
以上、Firebase Hosting で Basic 認証を設定した、現場からお送りしました。