はじめに
こんにちは。Tsukasaです！
今日は先日行ったCloudFrontとS3を用いて高速ウェブホスティングを実現した際に、文字化けが発生してしまった画面を修正したことについて記事にしたいと思います。
せっかくできたのに文字化けが起きてしまっては何の情報も伝わらず、勿体無いですよね。
このエラーは簡単に解決できましたので、同じようなことで困っているような方にとって役立つ情報になればと思います。
CloudFrontとS3を組み合わせた記事はこちらになるので、まだ読んでない方は是非読んでいただけたらと思います。
それでは早速見て行きましょう！
現状
現状としてはこのように文字化けしてしまっています。
アルファベット以外何もわかりませんよね？笑
ここからしっかりとしたものに直して行きます。
S3側の修正
S3バケット側を修正します。
作成したS3バケットのindex.htmlファイルのページまで飛びます。
そうするとメタデータまで来るので、こちらを編集します。
しかし、キャプチャにある通り、編集ができないので、編集ボタンの上に出ているようにコピーアクションからの編集を行います。
※因みにこのキャプチャは既に変更済みのものとなります。
index.html画面の一番上まで行き、「コピーする」をクリックします。
クリックすると下記の画面に飛ぶので、ここでメタデータを変更します。
「すべてのメタデータを置き換える」を選択します。
タイプは「システム定義」を選択します。
キーは「Context-Type」を選択します。
値は「text/html; charset=utf-8」を手入力します。
ここまでできたらS3側の修正は完了です。
CloudFront側の修正
CloudFront側はディストリビューションページに行き、キャッシュ削除ページを選択します。
index.htmlのキャッシュを削除します。
/index.html
これでCloudFront側の修正も終わりです。
検証
それでは再度確認してみましょう
おーー！！今度はちゃんと表示されました！！
これで私のプロフィールがしっかりと伝わりますね！
終わりに
いかがでしたでしょうか？
まさか文字化けするとは思いませんでした。笑
それでもこういったイレギュラー対応をすることで、自分のできることや知識も増えていくので、今後も積極的に発信を続けて行きたいと思います！