Netlify + Cloudflareで静的サイトにBasic認証を無料で追加する

NetlifyのBasic認証機能は有料プラン

無料で使えて機能も豊富なNetlifyですが、Basic認証については有料のPROプラン以上で使える機能となっています。ここは、Netlifyに限らず他のホスティングサービスでも同じ傾向にあります。

Basic認証が使える静的サイトホスティングサービス

Basic認証が使える静的サイトホスティングサービスをまとめました。

しかし、社内用サイトだったり、テストサイトの運用として、Netlifyの無料プランでもBasic認証が使いたいというケースが意外とあります。そうした時に使えるのがCloudflare Workersです。簡単でスピーディにBasic認証を追加できます。

Cloudflare Workersはエッジサーバーで稼働するので、Netlify以外のホスティングでも利用可能です。

Cloudflare WorkersでBasic認証のWorkerを用意する

Cloudflare Workersで動かすBasci認証プログラムは、下記のレポジトリにあるのでそちらを利用します。

dommmel / cloudflare-workers-basic-auth

レポジトリをクローンしたら、プロジェクトのディレクトリに入って、

wrangler init

でWorkerを初期化します。初期化すると、wrangler.tomlが作成されるので、ファイルの中の「account_id」に自分のWorkerアカウントIDを記入します。

name = "cf-basic-auth"
type = "webpack"
account_id = "WorkerのアカウントID"
workers_dev = true
route = ""
zone_id = ""

ID・パスワードを設定

続いて、ID・パスワードを設定します。

ID・パスワードはindex.jsにベタが記されているので、そちらを変更しても良いですが、Cloudflare Workersは環境変数で持っておくことができるので、そちらを利用した方が安全です。

Environments | Cloudflare Workers

プログラムに直接書く場合は、index.jsの最初の

const NAME = "super"
const PASS = "secret"

を書き換えればOKです。

Workerを公開する

ここまで準備ができたらWorkerを公開します。wranglerでログインしているものとします。

wrangler publish

このコマンドだけでWorkerが公開されます。公開されたWorkerはデフォルトで、xxxx.WorkerアカウントID.workers.devに公開されるので、そこでテストしてみましょう。

Workerとルートを紐付ける

NetlifyプロジェクトをCloudflareでプロキシする

Workerをルートと紐付けるには、NetlifyのプロジェクトをCloudflareのProxy環境下に置く必要があります。

DNSをCloudflareにして、DNSレコードのWorkerを使うサブドメインのProxy（雲マーク）をオンにします。DNSオンリーだとCloudflare Workersが効かないので注意が必要です。

ちなみに、NetlifyでCloudflareを使うとNetlifyのLet's EncryptによるSSL証明書更新に失敗するので、裏技を使って回避するようにしましょう。

Netlify + CloudflareプロキシでLet's EncryptのSSL更新を自動化する

Netlify + Cloudflareプロキシ環境下だと、NetlifyでLet's EncryptのSSL更新がエラーになります。今回はこのエラーを回避してSSL更新を自動化する方法をまとめました。

Workersを使うルートを指定する

Cloudflareのドメインごとのページに入ると、上に「Workers」というメニューがあるのでそちらをクリックします。

メニューに入ったら「ルートを追加」ボタンをクリックして、ルートを追加します。

• ルート：URLのマッチパターン
• Worker：先ほどアップしたBasic認証のWorker

とすれば数分もしないうちに、Basic認証がNetlifyのプロジェクトに追加されているはずです。

ルートの仕組みや指定方法などは下記の記事をどうぞ。

Cloudflare Workersを独自ドメイン・サブドメインで使う方法

無料で使えるエッジサーバー・Cloudflare Workersを独自ドメイン・サブドメインで使う方法をまとめました。Workerと独自ドメインの関係や具体的な設定方法を解説します。

Cloudflare WorkerでBasic認証をする際の注意点

今回の方法は、無料でBasic認証が使えるのですが、注意点もあります。

一番大きいのは、Cloudflare Workerは無料では一日10万リクエスト上限という点です。

規模が小さいサイトであれば問題ありませんが、従業員1000人クラスの企業の社内ツールなどで使う場合には、1日で上限に到達してしまう可能性が高いので注意しましょう。

また、設定のところで指摘した通り、ID・パスワードの管理についても環境変数を使わないと流出した時にトラブルになるので、しっかりと管理するようにしましょう。

Netlify + Cloudflareで静的サイトにBasic認証を無料で追加する方法をみてきました。

Netlifyの無料プランなど、Basic認証がホスティング側で出来ないサービスを利用している方はぜひ試してみてください。