Build: Fix failing CSS asset paths (#95380)

* build(webpack): set publicpath and process urls to resolve assets correctly

* build(webpack): add back --progress to build

* Add local cdn

(cherry picked from commit 7a19523fa4)

* chore(devenv): fix local_cdn path in ngnix conf

* chore(codeowners): add frontend-ops as owners of local_cdn docker block

---------

Co-authored-by: Andreas Christou <andreas.christou@grafana.com>

.github/CODEOWNERS

@@ -241,6 +241,7 @@
 /devenv/docker/loadtest/ @grafana/grafana-backend-services-squad
 /devenv/docker/rpmtest/ @grafana/grafana-backend-services-squad
 /devenv/jsonnet/ @grafana/dataviz-squad
+/devenv/local_cdn/ @grafana/frontend-ops
 /devenv/local-npm/ @grafana/frontend-ops
 /devenv/setup.sh @grafana/grafana-backend-services-squad
 /devenv/plugins.yaml @grafana/plugins-platform-frontend

devenv/local_cdn/default.conf

@@ -0,0 +1,24 @@
+server {
+	root /data;
+	autoindex on;
+
+	location / {
+		if ($request_method = 'OPTIONS') {
+			add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+			add_header 'Access-Control-Allow-Credentials' 'true' always;
+			add_header 'Access-Control-Allow-Headers' '*' always;
+			add_header 'Access-Control-Allow-Methods' '*';
+			# add_header 'Access-Control-Max-Age' 1728000;
+			add_header 'Content-Type' 'text/plain; charset=utf-8';
+			add_header 'Content-Length' 0;
+			return 204;
+		}
+
+		add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+		add_header 'Access-Control-Allow-Methods' '*' always;
+		add_header 'Access-Control-Allow-Headers' '*' always;
+		add_header 'Access-Control-Allow-Credentials' 'true' always;
+
+		rewrite ^/grafana-oss/11.4.0-pre/public(.*)$ $1 last;
+	}
+}

devenv/local_cdn/docker-compose.yaml

@@ -0,0 +1,11 @@
+version: '2'
+
+services:
+  grafana_local_cdn:
+    image: nginx:alpine
+    container_name: grafana_local_cdn
+    ports:
+      - "8080:80"
+    volumes:
+      - ../../public:/data
+      - ./default.conf:/etc/nginx/conf.d/default.conf

package.json

@@ -6,7 +6,7 @@
   "version": "11.4.0-pre",
   "repository": "github:grafana/grafana",
   "scripts": {
-    "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js",
+    "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js --progress",
     "build:nominify": "yarn run build -- --env noMinify=1",
     "dev": "NODE_ENV=dev nx exec -- webpack --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",

scripts/webpack/sass.rule.js

@@ -7,7 +7,12 @@ module.exports = function (options) {
   return {
     test: /\.(sa|sc|c)ss$/,
     use: [
-      MiniCssExtractPlugin.loader,
+      {
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          publicPath: './',
+        },
+      },
       {
         loader: 'css-loader',
         options: {

scripts/webpack/webpack.dev.js

@@ -74,7 +74,7 @@ module.exports = (env = {}) => {
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false,
+          preserveUrl: true,
         }),
       ],
     },

scripts/webpack/webpack.prod.js

@@ -47,7 +47,7 @@ module.exports = (env = {}) =>
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false,
+          preserveUrl: true,
         }),
       ],
     },