[Feature Request]: Support serving static assets of CDN

[torkelo]

No description provided.

[mtanda]

same as #2954

[lorenwest]

@mtanda - I don't think this is the same as #2594, because that was about .js assets and the resolution in that issue doesn't work for other assets (fonts, images, etc). Still waiting for this feature as our CDN is closer to the edge, and the 5.1 release doubled the size of javascript, so mobile download speed has suffered.

[torkelo]

5.1 doubled size? Compared to which release?

[lorenwest]

It's actually more than double. The app.xxx.js increased 2.7 times the size from 4.6.3 to 5.1.2

4.6.3: 598946 app.5331f559bd9a1bed9a93.js
5.1.2: 1618439 app.5372b9bbcb8c6d1c027e.js

The vendor file is quite larger as well:

4.6.3: 1348131 vendor.2305a8e1d478628b1297.js
5.1.2: 2130174 vendor.0cea50118711e7e6c839.js

Add plugins, css, and other assets, and it's a lot of content - probably only suitable for latest generation mobile devices.

Mobile download speed + compile time makes 5.x noticeably slower, and anything we can do reduce the size or get the bits to the phone more quickly (CDN) would be welcome.

[sdenel]

@lorenwest It is to note that vendor.0cea50118711e7e6c839.js and app.5372b9bbcb8c6d1c027e.js are not minified (nor sent compressed) at the time of writing.
At least for compression, you can use a reverse proxy (like Nginx).

[lorenwest]

@sdenel - I've forked the repo. and am serving these assets from AWS CloudFront using compression and HTTP/2. This thread is about me being able to do this without custom modifications. Any progress on that front?

[Gauravshah]

@lorenwest would you be able to open a PR so that all can benefit from your changes?

[lorenwest]

@Gauravshah - My fork hardcodes to my CDN in the index.html file. The proper way to incorporate this is to define asset paths in configuration. It shouldn't be very difficult, but it's bigger than the hack that works for me.

[lorenwest]

@torkelo - I'd like to recommend re-opening this, or expanding #2594 to include all assets.

[lukecyca]

@lorenwest any chance you would post your diff in a gist or something? We are interested to make a similar hack to serve the (rather large) javascript assets from a CDN.

[lorenwest]

@lukecyca - I'd rather not post my exact changes, as I fear people would copy/paste the gist as-is, and use my CDN. The change is quite simple. Change lines in .../public/views/index.html from

<script type="text/javascript" src="public/build/vendor.770fad3a626c70250d5f.js"></script>

to this:

<script type="text/javascript" src="https://[my_cdn]/[path-to]/vendor.770fad3a626c70250d5f.js"></script>

Then copy all files under /public/build/* to a path within your CDN.

This isn't ideal because it requires manually patching Grafana for each release, but it works quite well. It would be best if the Grafana server replaced public/build/ with a CDN value specified in settings.

[Gauravshah]

@torkelo do you have some thoughts on how would you want to go about it ?

1. Should we be adding a feature in grafana that would upload the js or
2. just provide an option to replace the host
3. Or provide a util on grafana-cli to upload to given location

[torkelo]

Think it needs some modifications of the webpack builds, at least last time I tried it it only loaded the first js file from cdn and other files from local install.

But welcome a PR that adds a sever setting for CDN

[contactsagarkate]

@lorenwest Thanks for providing a way for supporting it manually.
@torkelo Instead of changing in index.html manually, we need a way to config it in config file.
So please let me know, if you have done this, or if not, when will it done.

[marefr]

Stumbled upon the webpack documentation and it seems like it should be possible to change the publicPath on the fly, see https://webpack.js.org/guides/public-path/#on-the-fly. Have no idea how easy or hard it would be to use that so needs to be investigated/tested.

As Torkel says we need a server setting to point at CDN location. This should be used to dynamically fix all paths so that core builtin static assets like javascript, css, images are loaded from cdn url or local (the default and how it currently works). When in dev mode should always load local assets and not from CDN.

Assets for external plugins are dynamically loaded by SystemJS and in a first step you'll need to make sure that those are resolved by local paths and not CDN. Related code is here: https://github.com/grafana/grafana/blob/master/public/app/features/plugins/plugin_loader.ts#L144-L158

One neat thing would be if the Grafana version/commit could be included as part of the CDN url allowing a CDN to host assets for multiple Grafana versions.

[jimaek]

You could use jsDelivr for this. https://cdn.jsdelivr.net/gh/grafana/grafana@7.3.7/public/
All versions are automatically available without any action.
You can also use version aliasing or specific specific commits.

minification is also supported
https://cdn.jsdelivr.net/gh/grafana/grafana@7.3.7/public/vendor/css/timepicker.css
https://cdn.jsdelivr.net/gh/grafana/grafana@7.3.7/public/vendor/css/timepicker.min.css

[Gauravshah]

@marefr even if its not dynamic we should be able to create a conf on grafana.ini ?