CloudflareにShift-JISのサイトをデプロイすると文字化けしてしまった

2023/05/06に公開

とある古いWebサイトを Cloudflare Pages に引っ越しました。その際に、Webブラウザでサイトにアクセスする文字化けしてしまいました。サイトには多数のHTMLファイルがあるため、対象の全ファイルを書き換えて表示確認していく作業はできるだけ避けたいところです。

HTMLファイルは *.html*.htm の2種類の拡張子があり、文字コード SHIFT-JIS で書かれています。また各HTMLファイルには次のメタタグが記述されていました。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis”>

ChromeのDevToolsを使ってHTTP Header を確認すると、charset=utf-8 が付与されていることが確認できます。
content-type: text/html; charset=utf-8

https://developers.cloudflare.com/pages/platform/headers

ドキュメントに従って、 _header ファイルを作成し、以下のように記述しました。このファイルは、Gitリポジトリのルートディレクトリではなく、 Build settings でいうところの Build output directory に置く必要があります。

/*.html
  Content-Type: text/html; charset=shift_jis
/*.htm
  Content-Type: text/html; charset=shift_jis
/
  Content-Type: text/html; charset=shift_jis

ほとんどのページは、上から2つの拡張子指定のパターンでうまくいきました。サブディレクトリに入っていてもこの記述で良いようです。
しかしサイトのトップページとなるドメイン直下の index.htmlhttps://example.com/ のようにファイル名を省略してアクセスします。その場合は urlパスの部分を / と記述することでmatchしました。

/* と書いてしまうと、同じサイトの画像ファイルなど HTML以外のファイルにも、Headerが付与されてしまいました。ブラウザはファイルの内容で判断して画像は画像として表示してくれるため一見期待通りに設定できたようにも見えますが、正しい設定ではないので修正しました。

ドキュメントサイト(英語)に書いてある内容ですが、日本語の情報が見当たらなかったことと、文字化けの現象から、Headerの指定を追加するというところに思考がたどり着けない場合もあるかと思い、対応方法の記録としてこうして記事にしました。同じような現象で困っている方のお役に立つことができたら幸いです。

Discussion