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