title: Amazon S3 gzipped files getting incorrect metadata and causing error
body: <p>My static files are being served from Amazon S3. I am using circleci for my CI/CD to deploy my files. The files are getting added to the s3 bucket as expected, but when I go to the static website link I see a blank page with the console error "Uncaught SyntaxError: Unexpected token ILLEGAL".</p>
  
  <p>Through some sleuthing (see <a href="https://stackoverflow.com/questions/8080824/how-to-serve-gzipped-assets-from-amazon-s3/56782209">this link</a> as one example) I found that the issue was in the metadata. The js files get added with a content type of <code>application/javascript</code> instead of <code>text/js</code>. When I manually go into my bucket and click on the individual files, go to Properties and then Metadata, and remove the existing content type and add the line <code>Content-Type</code> with a value of <code>text/js</code> for all the js <code>gz</code> files, the website starts displaying as it should. The only file that isn't a js file that's getting added is the <code>index.html</code> and that one gets the correct metadata (<code>text/html</code>). </p>
  
  <p>I was super excited that it worked when I switched the content type, thinking I solved the issue. However, when I redeployed the app, the same incorrect metadata was added again. I found one solution to this, which was to add the <code>content-type</code> tag with a value of <code>text/js</code> during the deploy. This did work to get the correct content type associated with the <code>js.gz</code> files, BUT the index.html file is also being deployed. Since the index.html file also got the <code>text/js</code> file, we got the error "This site can't be reached". </p>
  
  <p>Does anyone have any ideas for solutions? I am working on finding a way to dynamically choose one content type or the other, but I am wondering if there's a better solution. The app is being distributed through CloudFront.</p>
  
  <p>Thank you for any help!</p>
  
  <p>This is the end of my circleci config.yml where the deploy is happening:</p>
  
  <pre><code>      - run: sudo apt-get update &amp;&amp; sudo apt-get install -y python-dev
        - run: sudo curl -O https://bootstrap.pypa.io/get-pip.py
        - run: sudo python get-pip.py
        - run: sudo pip install awscli --upgrade
        - run: aws --version
        - run: aws s3 ls
        - run: yarn run deploy
  </code></pre>
  
  <p>The line <code>yarn run deploy</code> runs this:</p>
  
  <pre><code>yarn build &amp;&amp; aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip
  </code></pre>
  
  <p>The updated line that added in <code>content-type</code>: </p>
  
  <pre><code>yarn build &amp;&amp; aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip --content-type text/js
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>I thought I found a solution by adding tags to include or exclude files by the extension, as should below. </p>
  
  <pre><code>"deploy-html": "yarn build &amp;&amp; aws s3 sync dist/ s3://[bucket name] --exclude *.html --include *.gz --delete --content-encoding gzip --content-type text/js",
  "deploy-js": "yarn build &amp;&amp; aws s3 sync dist/ s3://[bucket name] --exclude *.js --include *.html --content-encoding gzip --content-type text/html",
  "deploy": "yarn build &amp;&amp; yarn run deploy-html &amp;&amp; yarn run deploy-js"
  </code></pre>
  
  <p>However, that makes them unavailable in general so it results in the error: </p>
  
  <pre><code>Unknown options: server.js,webpack.common.js,webpack.dev.js,webpack.prod.js
  </code></pre>