Update frontend, deploy script to use "static" image asset URLs

README.md

@@ -26,7 +26,7 @@ Running the server
 The AWS setup is divided into two buckets: one that houses simply index.html,
 which is hosted from `jungle.horse`. The other assets are distributed via 
 Cloudfront, and are loaded from `cdn.jungle.horse`. There is some CORS header
-setup work to do.
+setup work to do. (See the s3-cors and s3-bucket files for config.)
 
 The backend is a docker image containing the compiled Rust binary, config file,
 and sound files. It can be built into a zip with the `./ebs-deployable` script.

frontend/animation.ts

@@ -16,9 +16,8 @@ function getImagePathPrefix() : string {
 
   switch (environment.toLowerCase()) {
     case 'production':
-      let cdnHost = $('meta[name=cdn_host]').attr('content'),
-          contentHash = $('meta[name=content_hash]').attr('content');
-      return `${cdnHost}/assets/${contentHash}/images`;
+      let cdnHost = $('meta[name=cdn_host]').attr('content');
+      return `${cdnHost}/images`;
     default:
       return '/assets/images';
   }

s3-deploy.sh

@@ -1,55 +1,73 @@
 #!/bin/bash
 # Upload all the things to S3.
 
+set -ex
+
 build_assets() {
   gulp
-  pushd ./frontend > /dev/null
+  pushd ./frontend
   MINIFY=1 webpack
-  popd > /dev/null
+  popd
 }
 
-echo "> Build artifact."
-build_assets
+# Upload the assets that undergo frequent change (JS, CSS, etc.)
+# Don't include large, infrequently changing files here as it's expensive.
+upload_assets() {
+  echo "> Build artifact."
+  build_assets
 
-# Calculate output directory.
-echo "> Calculate artifact SHA."
-pushd ./web/output > /dev/null
-declare checksum=$(find . -type f -exec md5sum {} + | awk '{print $1}' | \
-                   sort | md5sum | awk '{print $1}')
-popd > /dev/null
+  # Calculate output directory.
+  echo "> Calculate artifact SHA."
+  pushd ./web/output > /dev/null
+  declare checksum=$(find . -type f -exec md5sum {} + | awk '{print $1}' | \
+                     sort | md5sum | awk '{print $1}')
+  popd > /dev/null
 
-declare -r output_dir="deploy/${checksum}"
+  declare -r output_dir="deploy/${checksum}"
 
-# Prep upload artifact.
-echo "> Prep upload of artifact ${checksum}."
-pushd ./web > /dev/null
-mkdir -p $output_dir
-cp *css $output_dir
-cp *html $output_dir
-cp -R images/ $output_dir
-cp favicon.ico $output_dir
-cp output/* $output_dir
+  # Prep upload artifact.
+  echo "> Prep upload of artifact ${checksum}."
+  pushd ./web
 
-# Modify URLs in index.html
-echo "> Modify asset paths, etc. in index.html."
-pushd $output_dir > /dev/null
-# /assets/output/main.built.js -> /assets/main.built.js
-sed -i "s/assets\/output/assets/g" index.html
-# /assets/main.built.js -> //cdn.junglehorse.com/assets/${checksum}/main.built.js
-sed -i "s/\/assets/\/\/cdn.junglehorse.com\/assets\/${checksum}/g" index.html
-# Variable substitutions
-sed -i "s/asset_content_hash/${checksum}/g" index.html
-sed -i "s/DEVELOPMENT/production/g" index.html
-sed -i "s/API_HOST/http:\/\/jungle.horse/g" index.html
-sed -i "s/CDN_HOST/\/\/cdn.junglehorse.com/g" index.html
-popd > /dev/null
+  mkdir -p $output_dir
+  cp *css $output_dir
+  cp *html $output_dir
+  cp output/* $output_dir
 
-echo "> Upload to S3."
-aws s3 cp $output_dir s3://junglehorse-frontend/assets/${checksum} --recursive
-aws s3 cp $output_dir/index.html s3://junglehorse.com/index.html
-aws s3 cp $output_dir/error.html s3://junglehorse.com/error.html
-aws s3 cp $output_dir/favicon.ico s3://junglehorse.com/favicon.ico
+  # Modify URLs in index.html
+  echo "> Modify asset paths, etc. in index.html."
+  pushd $output_dir
+  # /assets/output/main.built.js -> /assets/main.built.js
+  sed -i "s/assets\/output/assets/g" index.html
+  # /assets/main.built.js -> //cdn.junglehorse.com/assets/${checksum}/main.built.js
+  sed -i "s/\/assets/\/\/cdn.junglehorse.com\/assets\/${checksum}/g" index.html
+  # Variable substitutions
+  sed -i "s/asset_content_hash/${checksum}/g" index.html
+  sed -i "s/DEVELOPMENT/production/g" index.html
+  sed -i "s/API_HOST/http:\/\/api.jungle.horse/g" index.html
+  sed -i "s/CDN_HOST/\/\/cdn.junglehorse.com/g" index.html
+  popd
 
-popd > /dev/null
-echo "> Done."
+  aws s3 cp $output_dir s3://junglehorse-frontend/assets/${checksum} --recursive
+  aws s3 cp $output_dir/index.html s3://junglehorse.com/index.html
+
+  popd
+}
+
+# Upload files to S3 that infrequently change.
+# Don't run this often as it adds to PutObject costs!
+upload_stable_assets() {
+  echo '> Upload stable assets (images, robots.txt, etc.)'
+  pushd web
+  # Keep error.html in both buckets.
+  aws s3 cp error.html s3://junglehorse-frontend/
+  aws s3 cp error.html s3://junglehorse.com/
+  aws s3 cp favicon.ico s3://junglehorse.com/favicon.ico
+  aws s3 cp images/ s3://junglehorse-frontend/images/ --recursive
+  aws s3 cp robots.txt s3://junglehorse-frontend/
+  popd
+}
+
+upload_assets
+#upload_stable_assets