Made docker containers that deploys the stack correctly and narrowly"

- The nginx image is just an example.
- The Dockerfile really tries to narrow down the dependencies included in the backend image
- it is an example meant for multiple packages to be built and deployed together, although currently we just build the backend one.

Author: alexrecuenco

.dockerignore

@@ -0,0 +1,37 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.classpath
+**/.dockerignore
+**/.env
+**/.envrc
+**/.git
+**/.gitignore
+**/.gitattributes
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.next
+**/.cache
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose*
+**/Dockerfile*
+**/node_modules
+**/*.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+**/build
+**/build-*
+**/dist
+LICENSE
+README.md

Dockerfile

@@ -0,0 +1,71 @@
+# syntax=docker/dockerfile:1
+
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Dockerfile reference guide at
+# https://docs.docker.com/go/dockerfile-reference/
+
+ARG NODE_VERSION=22.9.0
+
+FROM node:${NODE_VERSION}-alpine AS build
+
+WORKDIR /usr/src/app
+
+# Download dependencies as a separate step to take advantage of Docker's caching.
+# Leverage a cache mount to /root/.npm to speed up subsequent builds.
+# Leverage a bind mounts to package.json and package-lock.json to avoid having to copy them into
+# into this layer.
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=.npmrc,target=.npmrc \
+    --mount=type=bind,source=packages/interface/package.json,target=packages/interface/package.json \
+    --mount=type=bind,source=packages/backend/package.json,target=packages/backend/package.json \
+    --mount=type=bind,source=packages/frontend/package.json,target=packages/frontend/package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci -ws --include-workspace-root
+
+
+# Copy the rest of the source files into the image.
+COPY --link . .
+
+RUN npm run build --ws
+
+FROM node:${NODE_VERSION}-alpine AS production-base
+
+WORKDIR /usr/src/app
+
+# Use production node environment by default.
+ENV NODE_ENV=production
+
+COPY --link package.json package.json
+
+# Copy shared interface package on all production images.
+COPY --link ./packages/interface ./packages/interface
+COPY --link --from=build /usr/src/app/packages/interface/dist ./packages/interface/dist
+
+FROM production-base AS backend
+
+RUN --mount=type=bind,source=packages/backend/package.json,target=packages/backend/package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci -w=backend --omit=dev
+
+# Run the application as a non-root user.
+USER node
+
+COPY --link ./packages/backend ./packages/backend
+COPY --link --from=build /usr/src/app/packages/backend/dist ./packages/backend/dist
+
+
+ENV PORT=3000
+EXPOSE 3000
+
+# Run the application.
+CMD ["node", "./packages/backend", "serve"]
+
+FROM nginx:stable-alpine AS frontend
+# This is temporary, you would just export the distribution and send it to a CDN as static assets
+COPY --link --from=build /usr/src/app/packages/frontend/dist /usr/share/nginx/html
+COPY --link ./packages/frontend/nginx/default.conf /etc/nginx/templates/default.conf.template
+
+ENV PORT=8080
+EXPOSE 8080

README.Docker.md

@@ -0,0 +1,22 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:3000.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)

compose.yaml

@@ -0,0 +1,61 @@
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Docker compose reference guide at
+# https://docs.docker.com/go/compose-spec-reference/
+
+# Here the instructions define your application as a service called "server".
+# This service is built from the Dockerfile in the current directory.
+# You can add other services your application may depend on here, such as a
+# database or a cache. For examples, see the Awesome Compose repository:
+# https://github.com/docker/awesome-compose
+services:
+  backend:
+    build:
+      context: .
+      target: backend
+    environment:
+      NODE_ENV: production
+      PORT: 3000
+    ports:
+      - 3000:3000
+  frontend:
+    build:
+      context: .
+      target: frontend
+    environment:
+      BACKEND_URL: http://backend:3000
+      PORT: 8080
+    ports:
+      - 8080:8080
+
+# The commented out section below is an example of how to define a PostgreSQL
+# database that your application can use. `depends_on` tells Docker Compose to
+# start the database before your application. The `db-data` volume persists the
+# database data between container restarts. The `db-password` secret is used
+# to set the database password. You must create `db/password.txt` and add
+# a password of your choosing to it before running `docker-compose up`.
+#     depends_on:
+#       db:
+#         condition: service_healthy
+#   db:
+#     image: postgres
+#     restart: always
+#     user: postgres
+#     secrets:
+#       - db-password
+#     volumes:
+#       - db-data:/var/lib/postgresql/data
+#     environment:
+#       - POSTGRES_DB=example
+#       - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
+#     expose:
+#       - 5432
+#     healthcheck:
+#       test: [ "CMD", "pg_isready" ]
+#       interval: 10s
+#       timeout: 5s
+#       retries: 5
+# volumes:
+#   db-data:
+# secrets:
+#   db-password:
+#     file: db/password.txt

packages/backend/package.json

@@ -7,7 +7,7 @@
     "scripts": {
         "test": "jest",
         "dev": "tsc-watch --onSuccess 'node .'",
-        "start": "npm run build && node . serve",
+        "start": "npm run build && npm run ",
         "build": "npm run build:prod",
         "build:debug": "npm run build:debug:node && npm run build:debug:test",
         "build:debug:node": "tsc --build ./tsconfig.node.json && tsc-alias -p tsconfig.node.json",

packages/frontend/nginx/default.conf

@@ -0,0 +1,12 @@
+server {
+    listen $PORT;
+    server_name localhost;
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+    location /api/ {
+        proxy_pass $BACKEND_URL;
+    }
+}

packages/frontend/vite.config.ts

@@ -4,4 +4,9 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': { target: 'http://localhost:3000', changeOrigin: true },
+    },
+  },
 });