SPAをデプロイしたCloudflare WorkersにBasic認証を設定する

Cloudflare Pagesがdeprecated（？）になるようで

https://x.com/yusukebe/status/1917869496267915641

お試しに、書いている最中のフロントエンド（React SPA）をCloudflare Workersにデプロイし直した。

ただBasic認証をかける方法が見つからず... Pagesであればfunctions/_middleware.jsで済んだのだが...

探してもあまり見つからなかったので、メモ。

worker.jsを作成していつもの「アレ」を書いて、wrangler.jsoncに色々と書く。この「色々と書く」部分でちょっと詰まった。

手順

1. src/worker.jsを作成

いつもの「アレ」。こういう、よく調べるけどイチから書くのがめんどいコードを秒で出してくれるので、LLMsには頭が上がらない。

env.~で、Cloudflare Workersのシークレットを参照できる。

export default {
  async fetch(request, env, ctx) {
    const username = env.BASIC_AUTH_USERNAME
    const password = env.BASIC_AUTH_PASSWORD  
    
    const authString = `${username}:${password}`
    const expectedAuth = `Basic ${btoa(authString)}`
  
    const authHeader = request.headers.get('Authorization')
  
    if (!authHeader || authHeader !== expectedAuth) {
      return new Response('401 Unauthorized', {
        status: 401,
        headers: {
          'WWW-Authenticate': 'Basic realm="Secure Area"',
          'Content-Type': 'text/plain'
        }
      })
    }

    return env.ASSETS.fetch(request)
  }
}

2. wrangler.jsoncを作成

これが正しいかは分からない。ただ、「動いた」。

ハマりどころとしては、"run_worker_first": true,を書くだけではWARNINGが表示される。"binding": "ASSETS",も書いてあげる必要がある。

{
    "$schema": "node_modules/wrangler/config-schema.json",
    "name": "app",
    "compatibility_date": "2025-05-07",
    "main": "src/worker.js",
    "assets": {
        "directory": "./dist/",
        "binding": "ASSETS",
        "run_worker_first": true,
    },
}

あとは普通にWorkersにデプロイすると、Basic認証の入力が表示されるはずです。

誤りありましたらご教示いただけますと幸いです。