やりたいこと
日本語が入ったテキストファイル(.txt
)をS3の静的Webサイトで配布しようとしたところ、そのままでは文字化けしました。
ググって対処したので、今後のメモとして残しておきます
(前提は以下です。)
- AWSにて、S3で静的Webサイトを構成済み(私の環境はさらにCloudFrontをつなげています)
- 文字コードがUTF-8のテキストファイルを表示したい
そのままだと文字化け
日本語が含まれたテキストファイル(文字コード:UTF-8)をアップすると、そのままでは文字化けします。
ちゃんと設定すると、文字化けしなくなります
解消方法
上手くいかない例
当初、「なんとなく」で設定して上手くいかなかった例です
- S3にて、文字化けするファイルを選択し、「アクション」→「コピー」を選択。(ファイルの属性などを変える場合も、コピーして上書き保存、という感じの操作になる模様です)
- 「送信先」にて、もともとファイルがあったバケット・パスを指定
- 「その他のコピー設定」にて「設定を指定」を選択
- 「メタデータ」の部分で「すべてのメタデータを置き換える」を選択し、
Content-Type: text/plain
とContent-Encoding: utf-8
を指定
- 一番下の「コピーする」でコピーを実行。必要に応じてCloudFront側でキャッシュ削除を実施。
- これでは上手くいかず・・・
上手くいく例
正しいやり方です
- 【上と同様】S3にて、文字化けするファイルを選択し、「アクション」→「コピー」を選択。(ファイルの属性などを変える場合も、コピーして上書き保存、という感じの操作になる模様です)
- 【上と同様】「送信先」にて、もともとファイルがあったバケット・パスを指定
- 【上と同様】「その他のコピー設定」にて「設定を指定」を選択
- ★ここだけ違います★「メタデータ」の部分で「すべてのメタデータを置き換える」を選択し、
Content-Type
はtext/plain;charset=utf-8
を指定
- 【上と同様】一番下の「コピーする」でコピーを実行。必要に応じてCloudFront側でキャッシュ削除を実施。
おわりに
Content-Typeに文字コードも指定するのが、個人的に違和感ありありでした。。
ただ調べたところ、「Content-Encoding」は圧縮方式(gzip, deflate等)を指定するらしく、文字コードとは似て非なるもののようです。
VSCodeでは文字コードを「Encoding」と呼びますが、文脈によって「エンコード」の意味は変わるので、、Web的な文脈では「charset」と呼んだほうがいいですね・・・