概要
下記の記事の対応でHTMLのファイルを1階層下げたり、CSSのスタイルシートを別のフォルダに設置したりした。
上記の記事よりも前に下記の記事でリダイレクトを用いた別ドメインでの提供がうまく動かなくなった。
これをうまく動くように修正してみる。
方法
-
リダイレクトを管轄しているworkersの「redirect-static-file」のコードを下記の様に修正
export default { async fetch(request, env) { const url = new URL(request.url); // /detail/パスへのリクエストをR2バケットにリダイレクト if (url.pathname.startsWith('/detail/')) { const key = url.pathname.replace('/detail/', ''); const r2Url = `https://public.www.miriwo.work/pages/${key}`; const r2Response = await fetch(r2Url); if (!r2Response.ok) { return new Response('Not Found', { status: 404 }); } const headers = new Headers(r2Response.headers); return new Response(r2Response.body, { headers, }); } // その他のリクエストはRemixアプリケーションにフォワード return env.ASSETS.fetch(request); }, }; -
保存してデプロイをしておく
ここまで設定すれば https://miriwo.work/detail/index.htmlにアクセスすることでファイルを開くことはできるようになる。
しかしよく見るとスタイルが当たっておらず、これをなんとかしたい。
-
下記のようにindex.htmlのlink要素を変更（要は直接R2の中のCSSを指定）
static/pages/index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" href="../assets/css/index.css"> --> <!-- <link rel="stylesheet" href="https://R2のパブリックバケットのドメイン/assets/css/index.css"> --> <link rel="stylesheet" href="https://public.www.miriwo.work/assets/css/index.css"> <title>Document</title> </head> <body> <h1>Hello Cloudflare R2(Other directory style)</h1> </body> </html>
これでhttps://miriwo.work/detail/index.htmlにアクセスしたところ下記のようにスタイルが当たった。
