841-biborokuWebフロントエンドの備忘録

Cloudflare Pages functionのMiddlewareとhonoでBasic認証をかける

Cloudflareにデプロイするとプロダクションやプレビュードメイン、*.pages.devが発行される。

メインドメイン以外は、Basic認証をかける。

ついでに特定ディレクトリにもBasic認証をかけられるか試してみる。


やりたいこと

  • Cloudflare Pagesのドメイン.pages.devに対して
    • Basic認証をかける
    • X-Robots-Tag:noindexを設定する
  • メインドメインの特定ディレクトリにBasic認証をかける


使用したもの

  • Cloudflare Pages function Middleware
  • Cloudflare Pagesの環境変数(ローカルは wrangler.toml)
  • npmパッケージ hono

hono


npm i hono@latest

Middleware

functions/_middleware.ts

import { Hono } from 'hono'
import { basicAuth } from 'hono/basic-auth'
import { EventContext, handle } from 'hono/cloudflare-pages'
type Bindings = {
  eventContext: EventContext
  BASIC_AUTH_USER: string
  BASIC_AUTH_PASSWORD: string
  BASIC_HOST: string
}

const app = new Hono<{ Bindings: Bindings }>({ strict: false })

app.all(
  '/basic/*', 
  async (c, next) => {
    const auth = basicAuth({
      username: c.env.BASIC_AUTH_USER,
      password: c.env.BASIC_AUTH_PASSWORD,
    })
    return auth(c, next)
  }
)

app.all(
  '*', 
  async (c, next) => {
    const BASIC_HOST = c.env.BASIC_HOST
    const host = c.req.header('Host')

    if( host != BASIC_HOST ){
      const auth = basicAuth({
        username: c.env.BASIC_AUTH_USER,
        password: c.env.BASIC_AUTH_PASSWORD,
      })
      return auth(c, next)
    }
    return c.env.eventContext.next()
  }
)

app.all(
  '*',
  async (c) => {
    return c.env.eventContext.next()
  }
)

export const onRequest = handle(app)

Cloudflareの環境変数を設定

Pages > 対象プロジェクト > 設定 > 環境変数

プロダクション、プレビュー両方に以下を設定。

  • BASIC_AUTH_PASSWORD
  • BASIC_AUTH_USER
  • BASIC_HOST


X-Robots-Tagの設定

public/_headers

https://:project.pages.dev/
  X-Robots-Tag: noindex

ローカルで実行して確認してみる

wrangler.toml


BASIC_AUTH_USER = "ユーザ名"
BASIC_AUTH_PASSWORD = "パスワード"
BASIC_HOST="ホスト名"
npm run wrangle

シェア