build: docker instructions and fixes (#6465)

* build: docker instructions and fixes

- replace the outdated `docker-compose` command with `docker compose` in the READMEs.
- fix `AS` in Dockerfile.
- update the Docker instructions in the READMEs.
- make sure that environment variables are set for local development in the `docker-compose.yml` files.

* update the project README

* Reove obsolete version field

* update app-root's readme and docker-compose.yml

---------

Co-authored-by: Delilah <23665803+goplayoutside3@users.noreply.github.com>

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as builder
+FROM node:20-alpine AS builder
 
 ARG COMMIT_ID
 ENV COMMIT_ID=$COMMIT_ID
@@ -55,7 +55,7 @@ RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.
 RUN echo $COMMIT_ID > /usr/src/packages/app-root/public/commit_id.txt
 RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/fe-root build
 
-FROM node:20-alpine as runner
+FROM node:20-alpine AS runner
 
 ARG NODE_ENV=production
 ENV NODE_ENV=$NODE_ENV

README.md

@@ -70,17 +70,25 @@ You can run the code locally in Docker, which avoids needing to install Node or
 ```sh
 git clone git@github.com:zooniverse/front-end-monorepo.git
 cd front-end-monorepo
-docker-compose build
+# build first
+docker compose build
+# run all services in the background (no authentication available)
+# app-project at http://localhost:3002/projects/[owner]/[project-name]
+# app-root at http://localhost:3003
+docker compose up -d
+# shut down the running containers when you're finished
+docker compose down
+# run this if you need a shell inside the running container
+docker compose run --rm shell
 ```
 
-`docker-compose up` runs local production builds as follows:
-
-- project app at http://localhost:3002
-- root app at http://localhost:3003
-
-`docker-compose down` stops the running container.
-
-`docker-compose run --rm shell` runs an interactive shell on the Docker image.
+You can supply a service name (from `docker-compose.yml`) to `docker compose` if you only want to run a single service eg.
+```sh
+# only build the project app
+docker compose build fe-project
+# only run the project app
+docker compose up -d fe-project
+```
 
 Development environments for individual packages can be run from the package directories. For example:
 
@@ -89,7 +97,7 @@ cd packages/app-project
 docker-compose up
 ```
 
-to run a development server for the project app.
+to run a development server for the project app. See the READMEs for individual packages for detailed instructions.
 
 ### With Node and yarn
 

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.7'
-
 services:
   shell:
     image: front-end-monorepo_dev:latest
@@ -8,6 +6,8 @@ services:
     build:
       context: ./
       target: builder
+      args:
+        - APP_ENV=development
     command:
       - "/bin/sh"
   fe-project:

packages/app-project/README.md

@@ -19,9 +19,18 @@ Once you have the hosts file configured, you'll be able to use one of those subd
 
 ### Docker
 
-- `docker-compose up -d` to run a dev server, in the background, on http://localhost:3000 and the storybook on http://localhost:9001 using `yarn dev` and `yarn storybook` respectively. The `--build` flag can be used to build the container. This builds and runs a local image which matches the Jenkins build except for running behind a proxy. Note: `devcert` is not yet setup for our docker build for local development.
-- `docker-compose down` to stop the dev containers.
-- `docker-compose run --rm project test` to run the tests.
+```sh
+# run a development build using the top-level Dockerfile
+docker compose build
+# run a dev server on port 3000 (with HTTPS, but no authentication) and a storybook on port 9001.
+# eg. https://localhost:3000/projects/nora-dot-eisner/planet-hunters-tess
+# http://localhost:9001
+docker compose up -d
+# stop the local services when you're finished
+docker compose down
+# run the tests
+docker compose run --rm project test
+```
 
 ### Node
 ```sh

packages/app-project/docker-compose.yml

@@ -1,10 +1,15 @@
-version: '3.7'
-
 services:
   project:
     image: front-end-monorepo_dev:latest
+    environment:
+      PANOPTES_ENV: staging
+      APP_ENV: development
     build:
       context: ../../
+      target: builder
+      args:
+        - NEXT_TELEMETRY_DISABLED=1
+        - APP_ENV=development
     entrypoint:
       - "yarn"
       - "workspace"

packages/app-root/README.md

@@ -18,9 +18,17 @@ To view data from Contentful, you'll need to create a `.env` file containing the
 
 ### Docker
 
-- `docker-compose up -d` to run a dev server, in the background, on http://localhost:3000 using `yarn dev`. The `--build` flag can be used to build the container. This builds and runs a local image which matches the GitHub Action build except for running behind a proxy. Note: `devcert` is not yet setup for our docker build for local development.
-- `docker-compose down` to stop the dev containers.
-<!-- - `docker-compose run --rm root test` to run the tests. -->
+```sh
+# run a development build using the top-level Dockerfile
+docker compose build
+# run a dev server on port 3000 (with HTTPS, but no authentication).
+# eg. https://localhost:3000/about
+docker compose up -d
+# stop the local services when you're finished
+docker compose down
+# run the tests
+docker compose run --rm project test
+```
 
 ### Node
 

packages/app-root/docker-compose.yml

@@ -1,10 +1,15 @@
-version: '3.7'
-
 services:
   root:
     image: front-end-monorepo_dev:latest
+    environment:
+      PANOPTES_ENV: staging
+      APP_ENV: development
     build:
       context: ../../
+      target: builder
+      args:
+        - NEXT_TELEMETRY_DISABLED=1
+        - APP_ENV=development
     entrypoint:
       - "yarn"
       - "workspace"