diff --git a/README.md b/README.md index addedf83c0..c82c5ed56f 100644 --- a/README.md +++ b/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. diff --git a/frontend/animation.ts b/frontend/animation.ts index ac2c0cc81a..03036ad2ce 100644 --- a/frontend/animation.ts +++ b/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'; } diff --git a/s3-deploy.sh b/s3-deploy.sh index ba1afecaa7..928150ebc4 100755 --- a/s3-deploy.sh +++ b/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