정적 웹 사이트 호스팅 S3 버킷에 SPA를 업로드했지만 * .js를로드 할 때 오류가 발생했습니다.

정적 호스팅을 사용하도록 설정한 AWS S3 버킷(기타 권한도 설정됨)에 Angular에서 생성한 SPA를 aws cli로 업로드한 후 Chrome.index.html을 시작할 때 *.js를 로드할 수 없다는 오류가 Chrome Console에 출력되었습니다.



Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".
Strict MIME type checking is enforced for module scripts per HTML spec.

"Angular의 tsconfig.json 설정인가?"등 여러가지 조사했다.

왜 발생했는가 하면 , 계기는 aws cli 의 *.js 커멘드를 사용하고 있었던 일.
이 명령은 기본적으로 파일 형식에 따라 자동으로 content-type을 설정합니다 (실제로 text/html 파일에는 s3 sync가 설정되었습니다). 에 기대하는 *.ico 가 설정되지 않고
image/x-icon 가 설정되었습니다.

덧붙여서 동작 환경은 Windows10 Pro x64. macOS나 Linux에서는 또 다른 결과일지도 모른다.

환경에 따라서 content-type 가 바뀌는 것이 싫었기 때문에, *.js 파일에 대해서는 임의의 content-type 를 지정하기로 했다.

1

여기의 해결 방법을 배워 다음과 같은 명령으로 했다.

■Linux/macOS

aws s3 sync ＜アップロード元ディレクトリ 例: ./dist/ ＞ \
  s3://＜バケット名＞ \
  --acl public-read \
  --exclude "*.js" \
  --delete

aws s3 sync ＜アップロード元ディレクトリ 例: ./dist/ ＞ \
  s3://＜バケット名＞ \
  --acl public-read \
  --exclude "*" \
  --include "*.js" --content-type application/javascript

■Windows

call aws s3 sync ＜アップロード元ディレクトリ 例: .\dist\ ＞ ^
  s3://＜バケット名＞ ^
  --acl public-read ^
  --exclude "*.js" ^
  --delete

call aws s3 sync ＜アップロード元ディレクトリ 例: .\dist\ ＞ ^
  s3://＜バケット名＞ ^
  --acl public-read ^
  --exclude "*" ^
  --include "*.js" --content-type application/javascript

첫 번째 application/javascript에서 text/html를 제외하고 업로드하고 두 번째로 *.js만 업로드하고 content-type을 명시 적으로 sync로 설정합니다.*.js 는, 버킷 전체로 공개로 하고 있으면 불필요하다고 생각되기 때문에 기호로.

s3 sync는 변경된 내용만 업로드되므로 잘못된 content-type으로 업로드된 파일을 수동으로 삭제한 다음(또는 *.js 스크립트를 실행하는 것이 확실합니다.



aws s3 sync on Windows wrongly sets Content-Type to text/plain for js files · Issue #3367 · aws/aws-cli 을 추적하는 데 상당히 시간을 사용해 버렸다 이 근처의 정보