調べ物

静的サイトにBasic認証をかける

2021-04-13

静的サイトジェネレーターとサーバーレスインフラ(Amazon S3,／Github pages／Cloudflare Pages等)で構築したWebサイトを運営していると、特定のページだけBasic認証のようにゆるめの認証をかけてパスワードを知っている関係者だけに閲覧させたい時が発生します。

そんなときにどう対処できるか調べてやってみました。

目次

  1. はじめに
  2. Cloudflare Workersとは？
  3. Basic認証のソースコード
  4. まとめ

はじめに

私が運営しているサッカーチームのWebサイトがあります。このサイトで特定のページだけ関係者（コーチや保護者等）だけ閲覧できるようにしてほしいと依頼がありました。 (LINEのグループでやりとりすればいいやんと思うところですが…)

Webサイトにかかるサーバ費用は、可能な限り0円運用する方針のもと、以下のような構成にしてます。

alt text

※ドットコム(.com)にしたいという要望よりGoogle Domainsを使用

Github Pagesに、.htaccess のような機能があるのでは？と思いググりましたが、そのような機能はありませんでした。(リダイレクトはあるようです) 色々と調べてみると Cloudflare Workers でできるかもという情報を得ました。

Cloudflare Workersとは？

Cloudflare Workersは、Cloudflareが提供するサーバレス環境です。特徴は、Cloudflareが提供するグローバルレベルのCDNエッジでプログラム（現状JavaScript、Rust、C、C++）が実行できるので低遅延と言われてます。 Cloudflareをつかっていたこともあり、すぐに利用できました。

このCloudflare WorkersにBasic認証を実行するプログラムを書いて、どのパスに適用するかを設定すれば完成です。

Basic認証のソースコード

こちらのコードを参考にしました。

IDとパスワードは、以下を任意の文字に変更します。

const NAME = “super“
const PASS = “secret”

Cloudflare Workers の設定

  1. Cloudflare Workersの管理画面にいき、「Workerを作成」を押します。 alt text
  2. Cloudflare Workersの管理画面から「スクリプト」のところに、1. のプログラムを貼り付け、「保存してデプロイ」を押します。 alt text しばらくすると、デプロイが実行され利用できるようになります。これで準備はできました。 あとはどのディレクトリに設定するかだけです。
  3. Cloudflareで自分のサイト画面に戻り、Workersを選択、その画面で「ルートを追加」を押します。 alt text
  4. Basic認証を設定したいパスと先ほど作成したWorkerを選択して、保存します。 alt text これで、指定したパスにBasic認証をかけるようになりました。サイトにはすぐ反映されます。

Basic認証を施したサーバ構成は以下のような構成となりました。 alt text

費用について

現在(2021年4月)、Cloudflare Workersの費用は、1日10万リクエストまでは無料なのです！Cloudflareは無料でガンガン利用できるのが大変素晴らしい。 0円運用にはぴったりですね。

まとめ

  • Cloudflare Workersを使えば、静的サイトでもBasic認証は設定できる
  • Cloudflare Workersの公式ドキュメントには、チュートリアルが多数あり、Twilioを使ってSMSを送るデモなどもあります。静的ページを運営しているかたはご参考にしてはどうでしょうか

次は、Oktaが無料枠として、月間アクティブユーザ数を1,000人から15,000人を広げたので、法人向けのサイトで認証をかける場合はこれも利用してみたいです。

© 2023 tk2021