fix: use nodejs-lts image for building frontend code (#2653)

* fix: use nodejs-lts image for building frontend code

Node v14 is end-of-life and should no longer be used. Commit changes Makefile to pull in latest node-lts instead.

Also, use local temporary folder for storing npm generated files to workaround permission issue with old npm version, e.g. emitting these errors:

```
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /.npm
npm ERR! errno -13
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
```

Both changes should also fix issue https://github.com/zalando/postgres-operator/issues/2651

* fix: add frontend build step

Commit https://github.com/zalando/postgres-operator/commit/d60b424d7957d715003d9e5597bd5b5d63b6e250 accidentally removed build steps that are important for building frontend.

This commit restores previous behavior, but switches to nodejs-lts image for building frontend code.

Should restore `app.js` presence in ghcr image, see https://github.com/zalando/postgres-operator/issues/2651.

.gitignore

@@ -102,3 +102,5 @@ e2e/tls
 *.pot
 
 mocks
+
+ui/.npm/

ui/.dockerignore

@@ -5,6 +5,8 @@
 .git
 __pycache__
 
+.npm/
+
 app/node_modules
 operator_ui/static/build/*.hot-update.js
 operator_ui/static/build/*.hot-update.json

ui/Dockerfile

@@ -1,4 +1,15 @@
-FROM registry.opensource.zalan.do/library/python-3.11-slim:latest
+ARG BASE_IMAGE=registry.opensource.zalan.do/library/python-3.11-slim:latest
+ARG NODE_IMAGE=node:lts-alpine
+
+FROM $NODE_IMAGE AS build
+
+COPY . /workdir
+WORKDIR /workdir/app
+
+RUN npm install \
+    && npm run build
+
+FROM $BASE_IMAGE
 LABEL maintainer="Team ACID @ Zalando <team-acid@zalando.de>"
 
 EXPOSE 8081
@@ -15,6 +26,7 @@ COPY start_server.sh .
 RUN pip install -r requirements.txt
 
 COPY operator_ui operator_ui/
+COPY --from=build /workdir/operator_ui/static/build/ operator_ui/static/build/
 
 ARG VERSION=dev
 RUN sed -i "s/__version__ = .*/__version__ = '${VERSION}'/" operator_ui/__init__.py

ui/Makefile

@@ -21,8 +21,8 @@ test:
 	tox
 
 appjs:
-	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:14.21.2-alpine npm install
-	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:14.21.2-alpine npm run build
+	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm install --cache /workdir/.npm
+	docker run $(TTYFLAGS) -u $$(id -u) -v $$(pwd):/workdir -w /workdir/app node:lts-alpine npm run build --cache /workdir/.npm
 
 docker: appjs
 	echo `(env)`