S3 & Cloudfront

set up s3 bucket for static resources and cloudfront distribution various static files are stored in s3 behind a cloudfront distribution if you are serving the client files from the storage provider, then all client files will be stored and served from these as well create s3 bucket in the aws web client, go to s3 > buckets and click create bucket name the bucket \<name> static resources , e g ir engine static resources , and have it be in region us east 1 under object ownership, select 'acls enabled', and under that select 'object writer' under block public access settings for the bucket, uncheck the checkbox block all public access; you need the bucket to be publicly accessible check the box that pops up confirming that you know the contents are public all other settings can be left to their default values; click create bucket open the bucket's settings and go the permissions tab midway down is 'access control list' edit that, and check the boxes for objects and bucket acl for 'everyone (public access)' click the box with the warning label that appears that says "i understand the effects of these changes on my objects and buckets", then click save changes at the bottom of the permissions tab is a cross origin resource sharing (cors) box it should have the following settings; if not, click edit and copy this in \[ { "allowedheaders" \[], "allowedmethods" \[ "head", "get", "post" ], "allowedorigins" \[ " " ], "exposeheaders" \[] } ] create cloudfront distribution in the aws web client, go to cloudfront > distributions and click on create distribution under 'web', click on get started under origin , click on the text box under origin domain , and select the name of the s3 bucket you just made the name field should be automatically populated, and should be left as whatever that value is several fields in default cache behavior will be changed under viewer > viewer protocol policy , select 'redirect http to https' under viewer > allowed http methods , select 'get, head, options', and check cache http methods > options in cache key and origin requests , leave it on cache policy and origin request policy if this option is not available, see the below subsection for legacy cache settings for cache policy , you will need to make a new policy, which is easily done by clicking the link create policy underneath the selector; this will open a new tab name this policy anything you want, e g 'cached on headers', then under cache key settings , click on the headers selector and select 'include the following headers' a new selector should appear under that titled add header click the selector, and check 'origin', 'access control request method', and 'access control request headers', then click away from the menu click the 'create' button to create the new policy once the policy has been created, go back to the tab that you were creating the cloudfront distribution in click the refresh button to the right of the cache policy selector to fetch your new policy, then click the selector, and your new policy should appear in the selector at the bottom of the list under the header 'custom' select it for origin request policy , select the option 'cors s3origin' you should also make a custom response header policy so that files are served with the origin agent cluster header, which will tell most browsers to isolate resources for same site cross origin requests to do that, you will need to make a custom response header policy under response headers policy , select create policy this will open a separate tab name this something like origin agent cluster , then under custom headers , click add header for name, enter origin agent cluster , and for value , enter ?1 then click the create button at the bottom go back to the tab where you were creating the cloudfront distribution click the refresh button to the right of the response headers policy selector to fetch the new policy, then click the selector, and your new policy should appear in the selector at the bottom of the list under the header custom select it under settings , you can change price class to 'use only north america and europe' to save some money for alternate domain names, click 'add item', then in the text box that appears, enter 'resources \<domain> ', e g resources etherealengine org , or '\<release name> \<domain> ', e g dev etherealengine org , depending on whether you are serving the client files from client/api pods or the storage provider, respectively under custom ssl certificate , click on the selector that says 'choose certificate', then select the 'resources \<domain> '/' \<release name> \<domain> ' certificate you made earlier if you are serving the client files from the storage provider, under default root object , enter client/index html ; if you are serving the client files from client/api pods, leave this blank everything else can be left at the default values, click create distribution legacy cache settings if for some reason cache policy and origin request policy is not available for you, and you have to use legacy cache settings , the under headers , select 'include the following headers' under add header that appears, click on the selector titled 'select headers', and in the menu that opens, check 'host', 'origin', 'access control request method', and 'access control request headers', then click away