CDN unable to access assets from origin

Product Support

AI-generated summary

CDN unable to access assets from origin

A user encountered an issue with their CDN (AWS Cloudfront) unable to access assets from the origin, resulting in 404 errors. The issue was caused by a mismatch in file extensions between the CDN and the origin server.

disc discovered that the ./launcher rebuild app command generates brotli-compressed asset files with a .js.br extension, but the CDN was looking for files with a .br.js extension.

sam explained that this issue occurs when using S3 as an origin for assets in an AWS environment, and provided a solution involving setting DISCOURSE_S3_CDN_URL and running rake s3:upload_assets. This command needs to be run every time ./launcher rebuild app is executed.

disc asked follow-up questions, and sam clarified that rake s3:upload_assets needs to be run after assets:precompile, and that DISCOURSE_S3_CDN_URL can coexist with DISCOURSE_CDN_URL for different origins.

p_shant_gohel encountered an issue with stylesheets not being uploaded to S3, and sam explained that stylesheets must originate from the web server and cannot be uploaded to S3 for use with a CDN.

1

“./launcher rebuild app” generates brotli-compressed asset files with file extension “.js.br”. However, when “view source” in the browser, the asset files all have extension “.br.js”. The mismatch of file names causes 404s for CDN, as a result the browser can’t download those files either.

For example, one of the asset files shows in browser “view source” as,

<link rel='preload' href='https://d5e4emqtwppd2.cloudfront.net/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.br.js' as='script'/>

But inside the container the files actually look like this:

# ls /var/www/discourse/public/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.*
/var/www/discourse/public/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.js
/var/www/discourse/public/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.js.br
/var/www/discourse/public/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.js.gz
/var/www/discourse/public/assets/locales/en-692973624e3f492c9c0634e89f74ffa930b18c27832c1c7d9ca16864c8da12ac.js.map

This happens when using AWS Cloudfront as the CDN provider. When CDN is disabled, it seems to work (at least for Chrome).

2

I am not sure this is a bug. The “flipping” only happens in an AWS environment where you configure all s3 settings via ENV and then s3 acts as an origin for assets.

If you have s3 configured via env BE SURE to set DISCOURSE_S3_CDN_URL and BE SURE to run rake s3:upload_assets, note this is a very advanced setup that I am working on now so it has to be all configured just-so.

3

Thanks for replying Sam.

Does rake s3:upload_assets only need to be run once, or does it need to be added to app.yml, so it runs every time ./launcher rebuild app runs?

Also what happens if both DISCOURSE_CDN_URL and DISCOURSE_S3_CDN_URL are configured via env? I’m not sure if the later will override the former, or if they serve different purposes.

4

It has to run every time after assets:precompile

That is supported, just use different CDNs for both URLs, some paths have to hit the app still for the origin.

5

Worked like a charm!

After adding a hook to run rake s3:upload_assets after assets:precompile, my DISCOURSE_S3_CDN_URL works. So now I have two CDN urls backed by different origins. Nice, and thanks again!

6

I am not able to see stylesheets in my s3 bucket after running the s3:upload_assets task. I am able to see js files in s3 though.
Is there a way to upload stylesheets to s3 too and use them from cdn.

7

No, they have to originate from the web server, just run a second cdn for the web.