0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

S3静的Webサイトでテキストファイルの文字化けを防止する方法

Posted at

やりたいこと

日本語が入ったテキストファイル(.txt)をS3の静的Webサイトで配布しようとしたところ、そのままでは文字化けしました。
ググって対処したので、今後のメモとして残しておきます

(前提は以下です。)

  • AWSにて、S3で静的Webサイトを構成済み(私の環境はさらにCloudFrontをつなげています)
  • 文字コードがUTF-8のテキストファイルを表示したい

そのままだと文字化け

日本語が含まれたテキストファイル(文字コード:UTF-8)をアップすると、そのままでは文字化けします。

image.png

ちゃんと設定すると、文字化けしなくなります

image.png

解消方法

上手くいかない例

当初、「なんとなく」で設定して上手くいかなかった例です

  1. S3にて、文字化けするファイルを選択し、「アクション」→「コピー」を選択。(ファイルの属性などを変える場合も、コピーして上書き保存、という感じの操作になる模様です)
    image.png
  2. 「送信先」にて、もともとファイルがあったバケット・パスを指定
    image.png
  3. 「その他のコピー設定」にて「設定を指定」を選択
    image.png
  4. 「メタデータ」の部分で「すべてのメタデータを置き換える」を選択し、Content-Type: text/plainContent-Encoding: utf-8を指定
    image.png
  5. 一番下の「コピーする」でコピーを実行。必要に応じてCloudFront側でキャッシュ削除を実施。
  6. これでは上手くいかず・・・

上手くいく例

正しいやり方です

  1. 【上と同様】S3にて、文字化けするファイルを選択し、「アクション」→「コピー」を選択。(ファイルの属性などを変える場合も、コピーして上書き保存、という感じの操作になる模様です)
    image.png
  2. 【上と同様】「送信先」にて、もともとファイルがあったバケット・パスを指定
    image.png
  3. 【上と同様】「その他のコピー設定」にて「設定を指定」を選択
    image.png
  4. ★ここだけ違います★「メタデータ」の部分で「すべてのメタデータを置き換える」を選択し、Content-Typetext/plain;charset=utf-8を指定
    image.png
  5. 【上と同様】一番下の「コピーする」でコピーを実行。必要に応じてCloudFront側でキャッシュ削除を実施。

おわりに

Content-Typeに文字コードも指定するのが、個人的に違和感ありありでした。。
ただ調べたところ、「Content-Encoding」は圧縮方式(gzip, deflate等)を指定するらしく、文字コードとは似て非なるもののようです。
VSCodeでは文字コードを「Encoding」と呼びますが、文脈によって「エンコード」の意味は変わるので、、Web的な文脈では「charset」と呼んだほうがいいですね・・・

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?