Bygger backend med Webpack og tatt ibruk Node 20 LTS i Dockerfile (#1187)

* Bruker webpack til å bygge backend del av app og tar ubruk node 20 i Dockerfile

* Rydder i workflows

Author: bragejahren

.github/workflows/build_n_deploy_dev.yaml

@@ -14,34 +14,29 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           registry-url: "https://npm.pkg.github.com"
-      - name: Installer node-pakker
         env:
           NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+      - name: Installer node-pakker
         run: yarn --prefer-offline --frozen-lockfile
       - name: Kjør typecheck
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn typecheck
       - name: Kjør tester
-        env:
-          CI: true
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn test
 
   bygg:
     name: Bygg app/image og push til GitHub
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           registry-url: "https://npm.pkg.github.com"
       - name: Yarn install
         env:
@@ -57,28 +52,23 @@ jobs:
         id: docker-push
         with:
           team: teamfamilie
-          push_image: true
-          dockerfile: Dockerfile
-          docker_context: .
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
-    outputs:
-      image: ${{ steps.docker-push.outputs.image }}
+
   deploy:
     name: Deploy til dev-gcp
     needs:
       - bygg
       - test
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v4
       - name: Deploy til dev-gcp team namespace
         uses: nais/deploy/actions/deploy@v2
         env:
-          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
           CLUSTER: dev-gcp
           RESOURCE: build_n_deploy/naiserator/naiserator_dev.yaml
           VAR: base_path=${{ env.BASE_PATH }}

.github/workflows/build_n_deploy_prod.yaml

@@ -19,34 +19,29 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           registry-url: "https://npm.pkg.github.com"
-      - name: Installer node-pakker
         env:
           NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+      - name: Installer node-pakker
         run: yarn --prefer-offline --frozen-lockfile
       - name: Kjør typecheck
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn typecheck
       - name: Kjør tester
-        env:
-          CI: true
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn test
 
   bygg:
     name: Bygg app/image og push til GitHub
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           registry-url: "https://npm.pkg.github.com"
       - name: Yarn install
         env:
@@ -62,13 +57,8 @@ jobs:
         id: docker-push
         with:
           team: teamfamilie
-          push_image: true
-          dockerfile: Dockerfile
-          docker_context: .
           project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
           identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
-    outputs:
-      image: ${{ steps.docker-push.outputs.image }}
 
   deploy-preprod:
     name: Deploy til dev-gcp
@@ -77,14 +67,13 @@ jobs:
       - test
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v4
       - name: Deploy til dev-gcp team namespace
         uses: nais/deploy/actions/deploy@v2
         env:
-          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
           CLUSTER: dev-gcp
           RESOURCE: build_n_deploy/naiserator/naiserator_dev.yaml
           VAR: base_path=${{ env.BASE_PATH }}
@@ -97,14 +86,13 @@ jobs:
       - test
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v4
       - name: Deploy til prod-gcp team namespace
         uses: nais/deploy/actions/deploy@v2
         env:
-          APIKEY: ${{ secrets.NAIS_DEPLOY_APIKEY }}
           CLUSTER: prod-gcp
           RESOURCE: build_n_deploy/naiserator/naiserator_prod.yaml
           VAR: base_path=${{ env.BASE_PATH }}

.github/workflows/build_pr.yaml

@@ -16,38 +16,31 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           registry-url: "https://npm.pkg.github.com"
-      - name: Installer node-pakker
         env:
           NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+      - name: Installer node-pakker
         run: yarn --prefer-offline --frozen-lockfile
       - name: Kjør typecheck
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn typecheck
       - name: Kjør prettier og eslint
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn lint-test
       - name: Kjør tester
-        env:
-          CI: true
-          NODE_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
         run: yarn test
 
   bygg:
     name: Bygg app
     runs-on: ubuntu-latest
     permissions:
-      contents: "read"
-      id-token: "write"
+      contents: read
+      id-token: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           registry-url: "https://npm.pkg.github.com"
       - name: Yarn install
         env:

Dockerfile

@@ -1,14 +1,7 @@
-FROM gcr.io/distroless/nodejs:18
-USER root
-USER apprunner
+FROM gcr.io/distroless/nodejs20-debian12:nonroot
 
-WORKDIR /var/server
+WORKDIR /app
 
-COPY build ./build
 COPY dist ./dist
 
-# Må kopiere package.json og node_modules for at backend skal fungere. Backend henter avhengigheter runtime fra node_modules, og package.json trengs for at 'import' statements skal fungere.
-COPY node_modules ./node_modules
-COPY package.json .
-
-CMD ["--es-module-specifier-resolution=node", "build/backend/server.js"]
+CMD ["dist/server.cjs"]

package.json

@@ -6,20 +6,17 @@
     "prettier": "prettier -l \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint": "eslint src/",
     "lint-test": "yarn prettier && yarn eslint",
-    "build_and_serve": "yarn build; yarn start",
-    "start:dev": "yarn clean && BASE_PATH=/barnetrygd/soknad/ concurrently \"npm:dev:*\"",
-    "start:dev:ts-server": "yarn clean && BASE_PATH=/barnetrygd/soknad/ concurrently --restart-tries \"-1\" \"npm:dev:webpack\" \"npm:ts:server\"",
-    "dev:server": "yarn build:backend && NODE_ENV=development node --es-module-specifier-resolution=node build/backend/server.js",
-    "ts:server": "NODE_ENV=development TS_NODE_PROJECT=tsconfig.backend.json nodemon --exec 'node' --watch src/backend --watch src/shared-utils -e ts --es-module-specifier-resolution=node --loader ts-node/esm src/backend/server.ts",
-    "dev:webpack": "TS_NODE_PROJECT=src/webpack/tsconfig.json NODE_ENV=development node --loader ts-node/esm --es-module-specifier-resolution=node node_modules/.bin/webpack-cli serve -c src/webpack/webpack.development.config.ts",
+    "start:dev": "yarn clean && BASE_PATH=/barnetrygd/soknad/ concurrently \"yarn:dev:*\"",
+    "dev:server": "yarn build:backend:dev && node dist/server.cjs",
+    "dev:webpack": "yarn set-node-options TS_NODE_PROJECT=src/webpack/tsconfig.json NODE_ENV=development webpack serve -c src/webpack/webpack.development.config.ts",
     "build": "concurrently npm:build:frontend npm:build:backend",
-    "build:frontend": "TS_NODE_PROJECT=src/webpack/tsconfig.json NODE_ENV=production node --loader ts-node/esm --es-module-specifier-resolution=node node_modules/.bin/webpack-cli --config src/webpack/webpack.production.config.ts",
-    "build:backend": "tsc -p tsconfig.backend.json",
-    "build:analysis": "TS_NODE_PROJECT=src/webpack/tsconfig.json NODE_ENV=production node --loader ts-node/esm --es-module-specifier-resolution=node node_modules/.bin/webpack-cli --config src/webpack/webpack.analysis.config.ts",
+    "build:frontend": "yarn set-node-options TS_NODE_PROJECT=src/webpack/tsconfig.json NODE_ENV=production webpack -c src/webpack/webpack.production.config.ts",
+    "build:backend": "yarn set-node-options TS_NODE_PROJECT=src/backend/tsconfig.json NODE_ENV=production webpack -c src/backend/webpack.config.ts",
+    "build:backend:dev": "yarn set-node-options TS_NODE_PROJECT=src/backend/tsconfig.json NODE_ENV=development webpack -c src/backend/webpack.config.ts",
+    "set-node-options": "NODE_OPTIONS='--import=./registerESMLoader.js --es-module-specifier-resolution=node'",
     "test-ci": "CI=true build",
     "test": "jest",
-    "start": "NODE_ENV=production node --es-module-specifier-resolution=node build/backend/server.js",
-    "clean": "rm -rf dist build",
+    "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit -p src/frontend/tsconfig.json",
     "texts:find-unused": "python3 src/scripts/finn-ubrukte-språktekster.py",
     "texts:find-missing": "node src/scripts/find-missing-text-ids.js",

registerESMLoader.js

@@ -0,0 +1,6 @@
+// Fjerner warningen: 'ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`'
+
+import { register } from 'node:module';
+import { pathToFileURL } from 'node:url';
+
+register('ts-node/esm', pathToFileURL('./'));

src/backend/tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "../../tsconfig.backend.json"
-}
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "target": "ES6",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+  },
+}

src/backend/webpack.config.ts

@@ -0,0 +1,32 @@
+import path from 'path';
+
+import { Configuration } from 'webpack';
+
+const serverConfig: Configuration = {
+    entry: './src/backend/server.ts',
+    target: 'node',
+    module: {
+        rules: [
+            {
+                test: /\.(jsx|tsx|ts|js)?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.m?js$/,
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        filename: 'server.cjs',
+        path: path.resolve(process.cwd(), 'dist'),
+    },
+};
+
+export default serverConfig;