どんな時に読み込まれないのか
Chromeの開発者ツール(F12)でページを見たときに、
下記のエラーメッセージが出ていれば、後述する対処法に従うことで解決する可能性が高いです。
Refused to execute script from '<スクリプトのURL>'
because its MIME type ('binary/octet-stream') is not executable,
and strict MIME type checking is enabled.
原因
- 読み込もうとしたファイルのMIMEタイプが実行不可能なタイプ(
binary/octet-stream)であるため - 現在閲覧中のWEBサーバーで厳格なMIMEタイプ判別を行っているため
エラー説明文のままですが…
説明
binary/octet-stream は、正体不明のバイナリーファイルに用いられます。
厳格なMIME判別を行うWEBサーバーにおいて、このタイプはダウンロードされるのみで、
ブラウザ上で実行されないために、当該のJavaScriptファイルは読み込まれません。
S3アップロード時(PUT)のContent-Typeの既定値が binary/octet-stream らしく、
一部のファイルはこれが原因で表示されないみたいです。
何がトリガーで binary/octet-stream が設定されるのかはよくわかってません。すいません
解決方法
Step1. S3でファイルのContent-Typeを application/x-javascript に変更する
※HTMLファイル上の記述に以下のように type="text/javascript"を追加しても意味はないです。S3でメタデータを編集する必要があります
<script src="common/js/common.js"></script>
↓
<script type="text/javascript" charset="utf-8" src="common/js/common.js"></script>
S3コンソールで以下の操作をします
Amazon S3 > {S3バケット名} > common > js を開く
common.js にチェックを入れて、 アクション > メタデータの編集 をクリック
※バケット名やディレクトリ名は皆さまのお使いの環境で読み替えてください
メタデータ
タイプ: システム定義
キー: Content-Type
値: binary/octet-stream -> application/x-javascript に変更
メタデータの編集ボタンを押す
※ディレクトリ内のファイルを一括で変更するには以下のようにします
Amazon S3 > {S3バケット名} > common > js を開く
ディレクトリ左上にあるチェックボックスをクリックして一括チェック後、 アクション > メタデータの編集 をクリック
※バケット名やディレクトリ名は皆さまのお使いの環境で読み替えてください
メタデータの追加
タイプ: システム定義
キー: Content-Type
値: application/x-javascript
メタデータの編集ボタンを押す
これにより、もともと定義されていた Content-Type の値が上記で設定した値に上書きされます。
Step2. CloudFrontのキャッシュを削除する
メタデータを編集しても、キャッシュが削除されなければ反映されません。
ブラウザのキャッシュを削除しても、CDNサーバー上にキャッシュが残っているので無意味です。
CDNサーバー上のキャッシュを削除する必要があります。
以下の操作でCDNサーバー上のキャッシュを削除します。
CloudFront > ディストリビューション > {ディストリビューションID}
キャッシュ削除 > キャッシュ削除を作成 をクリック
オブジェクトパスを追加
/common/js/common.js
※ディレクトリ名やファイル名はお使いの環境で読み替えてください
キャッシュ削除を作成 をクリック
ステータス: 進行中 が 完了済み になるまで待ちます
※一括でキャッシュ削除するなら以下のようにします
オブジェクトパスを追加
/common/js/*
キャッシュ削除を作成 をクリック
ステータス: 進行中 が 完了済み になるまで待ちます
Step3. 動作確認
ステータスが完了になった後、改めてChromeで当該ページを開くと、
ちゃんと読み込まれるようになると思います。
開発者ツール(F12)を開いた状態でページをリロードした後、
開発者ツールの ネットワーク タブを開き、ちゃんと読み込まれていなかったJavaScriptファイルをクリック、
ヘッダー > レスポンスヘッダー > content-type の値が application/x-javascript に変わっていればOKです。