Cdn upload (#135)

* Bruk CDN for statiske filer
* Legg til Faro variabler i ENV istedet for å bruke black magic nais.js

.env.example

@@ -21,5 +21,8 @@ SANITY_PROJECT_ID="rt6o382n"
 SANITY_ACCESS_TOKEN=""
 SANITY_DATASET="development"
 
+FARO_URL="http://localhost:12347/collect"
+GITHUB_SHA="local"
+
 UNLEASH_SERVER_API_TOKEN="" # Finn token her https://dagpenger-unleash-web.iap.nav.cloud.nais.io/admin/api
 UNLEASH_SERVER_API_URL=https://dagpenger-unleash-api.nav.cloud.nais.io/api

.github/workflows/deploy.yml

@@ -17,13 +17,13 @@ jobs:
       packages: "write"
     outputs:
       image: ${{ steps.docker-build-push.outputs.image }}
-      version_tag: ${{ steps.version-tag.outputs.VERSION_TAG}}
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
         with:
           node-version: "22.x"
 
@@ -40,6 +40,21 @@ jobs:
           dockerfile: Dockerfile
           docker_context: .
 
+      - name: Build static files
+        uses: docker/build-push-action@v6
+        with:
+          target: build-export
+          outputs: type=local,dest=build
+          secrets: NODE_AUTH_TOKEN=${{ secrets.READER_TOKEN }}
+
+      - name: Upload static files
+        uses: nais/deploy/actions/cdn-upload/v2@master
+        with:
+          team: teamdagpenger
+          source: ./build/client
+          destination: "/dp-saksbehandling-frontend/"
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
 
 
   playwright:

.nais/nais.yaml

@@ -90,6 +90,11 @@ spec:
     - name: UNLEASH_SERVER_API_URL
       value: {{unleash.url}}
 
+    - name: FARO_URL
+      value: {{faro_url}}
+    - name: GITHUB_SHA
+      value: {{githubSha}}
+
   envFrom:
     - secret: dp-saksbehandling-frontend-unleash-api-token
 

.nais/vars-dev.yaml

@@ -22,6 +22,8 @@ sanity_project_id: "rt6o382n"
 sanity_access_token: ""
 sanity_dataset: "production"
 
+faro_url: "https://telemetry.ekstern.dev.nav.no/collect"
+
 unleash:
   url: https://dagpenger-unleash-api.nav.cloud.nais.io/api
   environment: development

.nais/vars-prod.yaml

@@ -22,6 +22,8 @@ sanity_project_id: "rt6o382n"
 sanity_access_token: ""
 sanity_dataset: "production"
 
+faro_url: "https://telemetry.nav.no/collect"
+
 unleash:
   url: https://dagpenger-unleash-api.nav.cloud.nais.io/api
   environment: production

Dockerfile

@@ -30,6 +30,11 @@ COPY ./package-lock.json  ./
 RUN npm ci --ignore-scripts --omit dev
 
 
+# export build to filesystem (GitHub)
+FROM scratch AS build-export
+COPY --from=app-build /app/build ./
+
+
 # runtime
 FROM gcr.io/distroless/nodejs22-debian12 AS runtime
 WORKDIR /app

app/entry.server.tsx

@@ -27,7 +27,12 @@ if (getEnv("USE_MSW") === "true") {
 
 const csp = {
   "script-src": ["blob:"],
-  "img-src": ["'self'", "data:", "blob:"],
+  "img-src": [
+    "'self'",
+    "data:",
+    "blob:",
+    "https://cdn.nav.no/teamdagpenger/dp-saksbehandling-frontend/",
+  ],
   "connect-src": [
     "'self'",
     "*.nav.no",

app/faro.ts

@@ -3,8 +3,6 @@ import { TracingInstrumentation } from "@grafana/faro-web-tracing";
 
 import { getEnv } from "~/utils/env.utils";
 
-import nais from "./nais.js";
-
 let faro: Faro | null = null;
 
 export function initFaro() {
@@ -14,8 +12,11 @@ export function initFaro() {
 
   faro = initializeFaro({
     paused: getEnv("IS_LOCALHOST") === "true",
-    url: nais.telemetryCollectorURL,
-    app: nais.app,
+    url: getEnv("FARO_URL"),
+    app: {
+      name: "dp-saksbehandling-frontend",
+      version: getEnv("GITHUB_SHA"),
+    },
     sessionTracking: {
       enabled: true,
       persistent: true,

app/root.tsx

@@ -61,18 +61,18 @@ export function links() {
       rel: "icon",
       type: "image/png",
       sizes: "32x32",
-      href: `${getEnv("BASE_PATH")}/favicon-32x32.png`,
+      href: `${getEnv("IS_LOCALHOST") ? "/saksbehandling" : "https://cdn.nav.no/teamdagpenger/dp-saksbehandling-frontend/client"}/favicon-32x32.png`,
     },
     {
       rel: "icon",
       type: "image/png",
       sizes: "16x16",
-      href: `${getEnv("BASE_PATH")}/favicon-16x16.png`,
+      href: `${getEnv("IS_LOCALHOST") ? "/saksbehandling" : "https://cdn.nav.no/teamdagpenger/dp-saksbehandling-frontend/client"}/favicon-16x16.png`,
     },
     {
       rel: "icon",
       type: "image/x-icon",
-      href: `${getEnv("BASE_PATH")}/favicon.ico`,
+      href: `${getEnv("IS_LOCALHOST") ? "/saksbehandling" : "https://cdn.nav.no/teamdagpenger/dp-saksbehandling-frontend/client"}/favicon.ico`,
     },
   ];
 }
@@ -118,6 +118,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
       INNTEKTREDIGERING_URL: process.env.INNTEKTREDIGERING_URL,
       GRISEN_URL: process.env.GRISEN_URL,
       DAGPENGER_NORGE_URL: process.env.DAGPENGER_NORGE_URL,
+      GITHUB_SHA: process.env.GITHUB_SHA,
+      FARO_URL: process.env.FARO_URL,
     },
   });
 }

app/utils/env.utils.ts

@@ -24,6 +24,8 @@ interface IEnv {
   NAIS_FRONTEND_TELEMETRY_COLLECTOR_URL: string;
   UNLEASH_SERVER_API_URL: string;
   UNLEASH_SERVER_API_TOKEN: string;
+  FARO_URL: string;
+  GITHUB_SHA: string;
 }
 
 export function getEnv(value: keyof IEnv) {

vite.config.ts

@@ -7,7 +7,10 @@ import tsconfigPaths from "vite-tsconfig-paths";
 installGlobals();
 
 export default defineConfig({
-  base: "/saksbehandling/",
+  base:
+    process.env.NODE_ENV === "production"
+      ? "https://cdn.nav.no/teamdagpenger/dp-saksbehandling-frontend/client/"
+      : "/saksbehandling/",
   server: {
     port: 3000,
   },
@@ -20,9 +23,6 @@ export default defineConfig({
   build: {
     manifest: true,
     sourcemap: true,
-    rollupOptions: {
-      external: ["./nais.js"],
-    },
   },
   resolve: {
     alias: {