10. AWS S3 でサーバーを立てて bootstrap 等を使おうとするとアイコンが表示されない場合
| (1) AWS S3 で10円サーバーを立てて、ここに bootstrap のソースを置いて、別のサーバー（ドメイン）で、それらのソースを読み込み表示させた場合、アイコンがうまく表示されなかった。 画像は、chrome での表示。□で表示されてしまう。 |
 |
| (2) S3上でアクセス権は正しく設定されていたが、content-type が個々の個別ファイルで設定できるようになっていて、これが適切ではないからではないかとうことで、下記のS3の管理画面で設定を施した。 なぜだか、アップロードしたファイルのデフォルトは、 application/octet-stream になっているようだ。 |
 |
| これを拡張子に応じて、下記の通りに設定した .css ⇒ text/css .js ⇒ application/x-javascript .woff ⇒ application/font-woff .woff2 ⇒ application/font-woff2 .ttf ⇒ application/x-font-ttf .otf ⇒ application/x-font-otf .svgf ⇒ image/svg+xml .eot ⇒ application/vnd.ms-fontobject |
| (3) バケットのクロスドメインの設定を下記のようにした |
 |
| <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> |
| <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration> |
| (4) 読み込みなおすと、正しく表示された |
 |