Docker - Optimize for development through Docker environment

.github/workflows/docker.yml

@@ -32,3 +32,4 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          target: runtime-production

Dockerfile

@@ -1,35 +1,53 @@
-FROM node:16-alpine AS builder
+ARG NODE_VERSION=16
+ARG ALPINE_VERSION=
 
-RUN apk --no-cache add make python3 g++
 
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS production-dependencies
 USER node
 WORKDIR /home/node
 
-COPY --chown=node:node ["package.json", "package-lock.json", "./"]
-RUN npm install
-COPY --chown=node:node . .
-RUN npm run build
-
+COPY --chown=node:node [".", "./"]
+RUN npm clean-install --omit=dev
 
 
-FROM node:16-alpine AS deps
 
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS builder
 USER node
 WORKDIR /home/node
 
-COPY --chown=node:node ["package.json", "package-lock.json", "./"]
-RUN npm install --omit=dev
+COPY --chown=node:node [".", "./"]
+COPY --chown=node:node --from=production-dependencies ["/home/node/node_modules", "node_modules/"]
+
+RUN npm install --include=dev
+RUN npm run build
 
 
 
-FROM node:16-alpine AS runner
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS runtime-production
 
 USER node
 WORKDIR /home/node
 
-COPY --chown=node:node --from=deps ["/home/node/node_modules", "node_modules/"]
+COPY --chown=node:node --from=production-dependencies ["/home/node/node_modules", "node_modules/"]
 COPY --chown=node:node --from=builder ["/home/node/dist", "dist/"]
 COPY --chown=node:node ["server/", "./server"]
 COPY --chown=node:node ["public/", "./public"]
 
 CMD [ "node", "server/start.js" ]
+
+
+
+
+
+
+
+# placed last since if the person targeting runtime-production doesn't have BuildKit installed, it'll build everything until the targeted stage
+# see: https://docs.docker.com/build/building/multi-stage/#differences-between-legacy-builder-and-buildkit
+FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS runtime-development
+
+USER node
+WORKDIR /home/node
+
+COPY --chown=node:node --from=builder ["/home/node", "./"]
+
+CMD [ "npm", "run", "serve", "--", "--port", "8082" ]

Makefile

@@ -0,0 +1,15 @@
+
+
+
+build-prod:
+	docker build --target runtime-production -t quant-ux .
+
+build-dev:
+	docker build --target runtime-development -t quant-ux .
+
+
+up:
+	 docker compose --file docker/docker-compose.yml up
+
+down:
+	 docker compose --file docker/docker-compose.yml down

README.md

@@ -8,30 +8,55 @@ This repo contains the front end. You can find a working demo at https://quant-u
 ![Alt text](docs/preview.jpg?raw=true "Quant-UX preview")
 
 ## Develpment setup
+### Prerequisite
 ```
 npm install
 ```
 
-### Compiles and hot-reloads for development
+
+### Running Locally on the Host Machine
+
+#### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 
-### Compiles and minifies for production
+#### Compiles and minifies for production
 ```
 npm run build
 ```
 
-### Run your unit tests
+#### Run your unit tests
 ```
 npm run test:unit
 ```
 
-### Lints and fixes files
+#### Lints and fixes files
 ```
 npm run lint
 ```
 
+### Developing inside a Docker Container
+If you wish to develop by running the service exclusively through Docker, you can build a development image using:
+```bash
+make build-dev
+```
+This will create a Docker Image tagged under `quant-ux`. You can then replace the `klausenschaefersinho/quant-ux` inside your docker-compose file with the newly build `quant-ux` image. Don't forget to mount the source code after replacing the image.
+
+If you're using the provided `docker/docker-compose.yml`, you can simply add the following volume mount to the qux-fe service:
+```yml
+    volumes:
+      - ../src:/home/node/src
+```
+
+You can then make use of the following Makefile rules for quick docker environment setup and teardown:
+```bash
+# docker compose up - targets docker/docker-compose.yml
+make up
+
+# docker compose down - targets docker/docker-compose.yml
+make down
+```
 
 # Installation