build: use a base image for Docker builds

[eatyourgreens]

Split the Docker build into three stages:

1. base image: Node 20 Alpine with the build environment, package files, Yarn and Lerna config.
2. builder image: bootstraps the project and root apps from the base image.
3. runner image: installs only production dependencies and runs the built apps from the builder image. This is the image that's deployed to Kubernetes.

Run the Next.js apps as the node user, to secure the apps in production.

Please request review from @zooniverse/frontend team or an individual member of that team.

Linked Issue and/or Talk Post

• includes the security fix from build: run the production apps as the node user #6514.
• Node.js 20, Yarn 4, and Next.js on Docker explains the concept of using a common base image for the builder and runner stages of a Next.js deploy.

How to Review

This shouldn't change the final, deployed Docker image. App containers should still run as usual (though with the apps running as node, not root. See #6514.) The base image should cache some common build layers so that they don't run twice during a build and deploy (eg. setting NODE_ENV or setting up the user and group.) It might be easiest to check this by running a branch deploy and checking that everything works as usual.

In the running production container, everything in /usr/src should be owned/run by node.

jimodonnell@Jims-MBP-2 front-end-monorepo % docker compose run --rm prod-shell
[+] Creating 1/0
 ✔ Network front-end-monorepo_default  Created                                                                                                                   0.0s 
/usr/src $ ls -al
total 900
drwxr-xr-x    1 node     node          4096 Dec  5 11:35 .
drwxr-xr-x    1 root     root          4096 Dec  5 11:29 ..
drwxr-xr-x    3 node     node          4096 Nov 26 13:25 .yarn
-rw-r--r--    1 node     node           176 Nov 26 13:25 .yarnrc
-rw-r--r--    1 node     node           145 Oct 12 07:57 lerna.json
drwxr-xr-x  663 node     node         32768 Dec  5 11:36 node_modules
-rw-r--r--    1 node     node          1602 Nov 26 13:25 package.json
drwxr-xr-x    1 node     node          4096 Oct 30 12:32 packages
-rw-r--r--    1 node     node        840981 Dec  5 08:26 yarn.lock
/usr/src $ whoami
node
/usr/src $ ps -a
PID   USER     TIME  COMMAND
    1 node      0:00 /bin/sh
   10 node      0:00 ps -a

With docker compose, you can use the prod-shell service to check that the production image is set up correctly. eg. check the production deploy environment:

jimodonnell@Jims-MBP-2 front-end-monorepo % docker compose run --rm prod-shell 
[+] Creating 1/0
 ✔ Network front-end-monorepo_default  Created                                                                                                      0.0s 
/usr/src $ printenv
NODE_VERSION=20.18.1
SENTRY_RELEASE=
PANOPTES_ENV=production
HOSTNAME=6840f5fa7a1a
YARN_VERSION=1.22.22
SHLVL=2
HOME=/home/node
COMMIT_ID=
TERM=xterm
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
NEXT_TELEMETRY_DISABLED=1
GITHUB_REF_NAME=
APP_ENV=development
PWD=/usr/src
NODE_ENV=production

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 77.572% (-0.005%) from 77.577%
when pulling 55e08c7 on eatyourgreens:docker-base-image
into d168739 on zooniverse:master.

[goplayoutside3]

@eatyourgreens could you use this PR opportunity to include code comments in the Dockerfile like # comment? As a team we've ended up in a spot where FEM's Docker config has changed a lot over the years without documented decisions other than sporadic PRs. FEM's Docker config is also very different from every other Zooniverse service. When any dev reads the Dockerfile, they should be able to read a basic understanding of its strategy.

[eatyourgreens]

could you use this PR opportunity to include code comments in the Dockerfile

Sure! I've added comments, and questions where I don't understand what the Dockerfile is doing.

[eatyourgreens]

Looking back through the Dockerfile history for this PR, I discovered that the monorepo originally built and ran on Node 8!
#595

That explains why it still has packages that were written as CommonJS modules, using require and module.exports. Not an issue here but that is relevant for:

• Pure ES Modules break the Mocha tests #3779.
• Panoptes.js: add lib-panoptes-js dev server, add experimental auth #6375.

[eatyourgreens]

https://docs.docker.com/go/dockerfile/rule/secrets-used-in-arg-or-env/