refactor: Separates docker environment builds and combines modes into APP_ENV

.env.example

@@ -1,11 +1,11 @@
 COMPOSE_PROJECT_NAME=musare
 RESTART_POLICY=unless-stopped
-CONTAINER_MODE=production
 DOCKER_COMMAND=docker
 
+APP_ENV=production
+
 BACKEND_HOST=127.0.0.1
 BACKEND_PORT=8080
-BACKEND_MODE=production
 BACKEND_DEBUG=false
 BACKEND_DEBUG_PORT=9229
 
@@ -13,7 +13,6 @@ FRONTEND_HOST=127.0.0.1
 FRONTEND_PORT=80
 FRONTEND_CLIENT_PORT=80
 FRONTEND_DEV_PORT=81
-FRONTEND_MODE=production
 FRONTEND_PROD_DEVTOOLS=false
 
 MONGO_HOST=127.0.0.1

.github/workflows/automated-tests.yml

@@ -5,12 +5,11 @@ on: [ push, pull_request, workflow_dispatch ]
 env:
     COMPOSE_PROJECT_NAME: musare
     RESTART_POLICY: unless-stopped
-    CONTAINER_MODE: production
+    APP_ENV: production
     BACKEND_HOST: 127.0.0.1
     BACKEND_PORT: 8080
     FRONTEND_HOST: 127.0.0.1
     FRONTEND_PORT: 80
-    FRONTEND_MODE: production
     MONGO_HOST: 127.0.0.1
     MONGO_PORT: 27017
     MONGO_ROOT_PASSWORD: PASSWORD_HERE

.github/workflows/build-lint.yml

@@ -5,12 +5,11 @@ on: [ push, pull_request, workflow_dispatch ]
 env:
     COMPOSE_PROJECT_NAME: musare
     RESTART_POLICY: unless-stopped
-    CONTAINER_MODE: production
+    APP_ENV: production
     BACKEND_HOST: 127.0.0.1
     BACKEND_PORT: 8080
     FRONTEND_HOST: 127.0.0.1
     FRONTEND_PORT: 80
-    FRONTEND_MODE: production
     MONGO_HOST: 127.0.0.1
     MONGO_PORT: 27017
     MONGO_ROOT_PASSWORD: PASSWORD_HERE

.wiki/Configuration.md

@@ -26,18 +26,16 @@ machine, even though the application within the container is listening on `21017
 | --- | --- |
 | `COMPOSE_PROJECT_NAME` | Should be a unique name for this installation, especially if you have multiple instances of Musare on the same machine. |
 | `RESTART_POLICY` | Restart policy for Docker containers, values can be found [here](https://docs.docker.com/config/containers/start-containers-automatically/). |
-| `CONTAINER_MODE` | Should be either `production` or `development`.  |
 | `DOCKER_COMMAND` | Should be either `docker` or `podman`.  |
+| `APP_ENV` | Should be either `production` or `development`.  |
 | `BACKEND_HOST` | Backend container host. Only used for development mode. |
 | `BACKEND_PORT` | Backend container port. Only used for development mode. |
-| `BACKEND_MODE` | Should be either `production` or `development`. |
 | `BACKEND_DEBUG` | Should be either `true` or `false`. If enabled backend will await debugger connection and trigger to start. |
 | `BACKEND_DEBUG_PORT` | Backend container debug port, if enabled. |
 | `FRONTEND_HOST` | Frontend container host. |
 | `FRONTEND_PORT` | Frontend container port. |
 | `FRONTEND_CLIENT_PORT` | Should be the port on which the frontend will be accessible from, usually port `80`, or `443` if using SSL. Only used when running in development mode. |
 | `FRONTEND_DEV_PORT` | Should be the port where Vite's dev server will be accessible from, should always be port `81` for Docker since nginx listens on port 80, and is recommended to be port `80` for non-Docker. Only used when running in development mode. |
-| `FRONTEND_MODE` | Should be either `production` or `development`. |
 | `FRONTEND_PROD_DEVTOOLS` | Whether to enable Vue dev tools in production builds. [^1] |
 | `MONGO_HOST` | Mongo container host. |
 | `MONGO_PORT` | Mongo container port. |

Dockerfile

@@ -0,0 +1,91 @@
+# Common base image
+FROM node:20-alpine AS common_base
+
+ARG UID=1000
+ARG GID=1000
+
+RUN deluser --remove-home node \
+    && addgroup -S -g ${GID} musare \
+    && adduser -SD -u ${UID} musare \
+    && adduser musare musare
+
+RUN mkdir -p /opt/app \
+    && chown -R musare:musare /opt/app
+
+WORKDIR /opt/app
+
+USER musare
+
+# Backend node modules
+FROM common_base AS backend_node_modules
+
+COPY --chown=musare:musare --link backend/package.json backend/package-lock.json /opt/app/
+
+RUN npm install
+
+# Backend build
+FROM common_base AS backend_build
+
+ENV APP_ENV=production
+
+COPY --chown=musare:musare --link .git /opt/.git
+COPY --chown=musare:musare --link common /opt/common
+COPY --chown=musare:musare --link types /opt/types
+COPY --chown=musare:musare --link backend /opt/app
+COPY --chown=musare:musare --link --from=backend_node_modules /opt/app/node_modules node_modules
+
+RUN npm run build
+
+# Backend production image
+FROM common_base AS backend
+
+COPY --from=backend_build --link /opt/app/build build
+COPY --from=backend_node_modules --link /opt/app/node_modules node_modules
+COPY --from=backend_node_modules --link /opt/app/package.json /opt/app/package-lock.json /opt/app/
+
+ENTRYPOINT npm run prod
+
+# Frontend node modules
+FROM common_base AS frontend_node_modules
+
+COPY --chown=musare:musare --link frontend/package.json frontend/package-lock.json /opt/app/
+
+RUN npm install
+
+# Frontend build
+FROM common_base AS frontend_build
+
+ARG FRONTEND_PROD_DEVTOOLS=false
+ARG MUSARE_SITENAME=Musare
+ARG MUSARE_PRIMARY_COLOR="#03a9f4"
+ARG MUSARE_DEBUG_VERSION=true
+ARG MUSARE_DEBUG_GIT_REMOTE=false
+ARG MUSARE_DEBUG_GIT_REMOTE_URL=false
+ARG MUSARE_DEBUG_GIT_BRANCH=true
+ARG MUSARE_DEBUG_GIT_LATEST_COMMIT=true
+ARG MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=true
+
+ENV APP_ENV=production \
+    FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS} \
+    MUSARE_SITENAME=${MUSARE_SITENAME} \
+    MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR} \
+    MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION} \
+    MUSARE_DEBUG_GIT_REMOTE=${MUSARE_DEBUG_GIT_REMOTE} \
+    MUSARE_DEBUG_GIT_REMOTE_URL=${MUSARE_DEBUG_GIT_REMOTE_URL} \
+    MUSARE_DEBUG_GIT_BRANCH=${MUSARE_DEBUG_GIT_BRANCH} \
+    MUSARE_DEBUG_GIT_LATEST_COMMIT=${MUSARE_DEBUG_GIT_LATEST_COMMIT} \
+    MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=${MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT}
+
+COPY --chown=musare:musare --link .git /opt/.git
+COPY --chown=musare:musare --link common /opt/common
+COPY --chown=musare:musare --link types /opt/types
+COPY --chown=musare:musare --link frontend /opt/app
+COPY --chown=musare:musare --from=frontend_node_modules --link /opt/app/node_modules node_modules
+
+RUN npm run prod
+
+# Frontend production image
+FROM nginx AS frontend
+
+COPY --chown=root:root --link frontend/nginx.prod.conf /etc/nginx/conf.d/default.conf
+COPY --from=frontend_build --chown=nginx:nginx --link /opt/app/build /usr/share/nginx/html

frontend/Dockerfile → Dockerfile.dev

@@ -1,4 +1,5 @@
-FROM node:20-alpine AS frontend_base
+# Common base image
+FROM node:20-alpine AS common_base
 
 ARG UID=1000
 ARG GID=1000
@@ -8,23 +9,43 @@ RUN deluser --remove-home node \
     && adduser -SD -u ${UID} musare \
     && adduser musare musare
 
-RUN mkdir -p /opt/.git /opt/common /opt/types /opt/app /run/nginx \
+RUN mkdir -p /opt/.git /opt/common /opt/types /opt/app \
     && chown -R musare:musare /opt/app
 
 WORKDIR /opt/app
 
 USER musare
 
-FROM frontend_base AS frontend_node_modules
+# Backend node modules
+FROM common_base AS backend_node_modules
+
+COPY --chown=musare:musare --link backend/package.json backend/package-lock.json /opt/app/
+
+RUN npm install
+
+# Backend development image
+FROM common_base AS backend
+
+ENV APP_ENV=development
+
+COPY --chown=musare:musare --link .git /opt/.git
+COPY --chown=musare:musare --link common /opt/common
+COPY --chown=musare:musare --link types /opt/types
+COPY --chown=musare:musare --link backend /opt/app
+COPY --chown=musare:musare --link --from=backend_node_modules /opt/app/node_modules node_modules
+
+ENTRYPOINT sh /opt/app/entrypoint.dev.sh
+
+# Frontend node modules
+FROM common_base AS frontend_node_modules
 
 COPY --chown=musare:musare --link frontend/package.json frontend/package-lock.json /opt/app/
 
 RUN npm install
 
-FROM frontend_base AS musare_frontend
+# Frontend development image
+FROM common_base AS frontend
 
-ARG FRONTEND_MODE=production
-ARG FRONTEND_PROD_DEVTOOLS=false
 ARG MUSARE_SITENAME=Musare
 ARG MUSARE_PRIMARY_COLOR="#03a9f4"
 ARG MUSARE_DEBUG_VERSION=true
@@ -34,8 +55,7 @@ ARG MUSARE_DEBUG_GIT_BRANCH=true
 ARG MUSARE_DEBUG_GIT_LATEST_COMMIT=true
 ARG MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=true
 
-ENV FRONTEND_MODE=${FRONTEND_MODE} \
-    FRONTEND_PROD_DEVTOOLS=${FRONTEND_PROD_DEVTOOLS} \
+ENV APP_ENV=development \
     MUSARE_SITENAME=${MUSARE_SITENAME} \
     MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR} \
     MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION} \
@@ -46,7 +66,10 @@ ENV FRONTEND_MODE=${FRONTEND_MODE} \
     MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT=${MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT}
 
 USER root
-RUN apk add nginx
+RUN apk update \
+    && apk add nginx \
+    && sed -i 's/user nginx;/user musare;/' /etc/nginx/nginx.conf \
+    && chown -R musare:musare /etc/nginx/http.d /run/nginx /var/lib/nginx /var/log/nginx
 USER musare
 
 COPY --chown=musare:musare --link .git /opt/.git
@@ -55,10 +78,4 @@ COPY --chown=musare:musare --link types /opt/types
 COPY --chown=musare:musare --link frontend /opt/app
 COPY --chown=musare:musare --from=frontend_node_modules --link /opt/app/node_modules node_modules
 
-RUN sh -c '([[ "${FRONTEND_MODE}" == "development" ]] && exit 0) || npm run prod'
-
-RUN chmod u+x entrypoint.sh
-
-ENTRYPOINT sh /opt/app/entrypoint.sh
-
-EXPOSE 80/tcp
+ENTRYPOINT sh /opt/app/entrypoint.dev.sh

backend/Dockerfile

@@ -1,45 +0,0 @@
-FROM node:20-alpine AS backend_base
-
-ARG UID=1000
-ARG GID=1000
-
-RUN deluser --remove-home node \
-    && addgroup -S -g ${GID} musare \
-    && adduser -SD -u ${UID} musare \
-    && adduser musare musare
-
-RUN mkdir -p /opt/.git /opt/common /opt/types /opt/app \
-    && chown -R musare:musare /opt/app
-
-WORKDIR /opt/app
-
-USER musare
-
-FROM backend_base AS backend_node_modules
-
-RUN mkdir -p /opt/app
-WORKDIR /opt/app
-
-COPY --chown=musare:musare --link backend/package.json backend/package-lock.json /opt/app/
-
-RUN npm install
-
-FROM backend_base AS musare_backend
-
-ARG CONTAINER_MODE=production
-ARG BACKEND_MODE=production
-ENV CONTAINER_MODE=${CONTAINER_MODE}
-ENV BACKEND_MODE=${BACKEND_MODE}
-
-COPY --chown=musare:musare --link .git /opt/.git
-COPY --chown=musare:musare --link common /opt/common
-COPY --chown=musare:musare --link types /opt/types
-COPY --chown=musare:musare --link backend /opt/app
-COPY --chown=musare:musare --link --from=backend_node_modules /opt/app/node_modules node_modules
-
-RUN sh -c '([[ "${BACKEND_MODE}" == "development" ]] && exit 0) || npm run build'
-
-ENTRYPOINT sh /opt/app/entrypoint.sh
-
-EXPOSE 8080/tcp
-EXPOSE 8080/udp

backend/entrypoint.dev.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+set -e
+
+if [[ "${BACKEND_DEBUG}" == "true" ]]; then
+    export INSPECT_BRK="--inspect-brk=0.0.0.0:${BACKEND_DEBUG_PORT:-9229}"
+else
+    export INSPECT_BRK=""
+fi
+
+if [[ "${APP_ENV}" == "development" ]]; then
+    npm run dev
+else
+    npm run prod
+fi

backend/entrypoint.sh

@@ -1,20 +0,0 @@
-#!/bin/sh
-
-if [[ "${CONTAINER_MODE}" == "development" ]]; then
-    npm install --silent
-    if [[ "${BACKEND_MODE}" == "production" ]]; then
-        npm run build
-    fi
-fi
-
-if [[ "${BACKEND_DEBUG}" == "true" ]]; then
-    export INSPECT_BRK="--inspect-brk=0.0.0.0:${BACKEND_DEBUG_PORT:-9229}"
-else
-    export INSPECT_BRK=""
-fi
-
-if [[ "${BACKEND_MODE}" == "production" ]]; then
-    npm run prod
-else
-    npm run dev
-fi

docker-compose.dev.yml

@@ -1,5 +1,7 @@
 services:
   backend:
+    build:
+      dockerfile: ./Dockerfile.dev
     ports:
       - "${BACKEND_HOST:-0.0.0.0}:${BACKEND_PORT:-8080}:8080"
       - "${BACKEND_HOST:-0.0.0.0}:${BACKEND_DEBUG_PORT:-9229}:9229"
@@ -9,14 +11,19 @@ services:
       - ./types:/opt/types
       - ./backend:/opt/app
     environment:
+      - APP_ENV=${APP_ENV:-development}
       - BACKEND_DEBUG=${BACKEND_DEBUG:-false}
 
   frontend:
+    build:
+      dockerfile: ./Dockerfile.dev
     volumes:
       - ./.git:/opt/.git:ro
       - ./common:/opt/common
       - ./types:/opt/types
       - ./frontend:/opt/app
+    environment:
+      - APP_ENV=${APP_ENV:-development}
 
   mongo:
     ports:

docker-compose.yml

@@ -4,16 +4,12 @@ services:
   backend:
     build:
       context: .
-      dockerfile: ./backend/Dockerfile
-      target: musare_backend
-      args:
-        BACKEND_MODE: "${BACKEND_MODE:-production}"
+      dockerfile: ./Dockerfile
+      target: backend
     restart: ${RESTART_POLICY:-unless-stopped}
     volumes:
       - ./backend/config:/opt/app/config
     environment:
-      - BACKEND_MODE=${BACKEND_MODE:-production}
-      - CONTAINER_MODE=${CONTAINER_MODE:-production}
       - MUSARE_SITENAME=${MUSARE_SITENAME:-Musare}
       - MUSARE_PRIMARY_COLOR=${MUSARE_PRIMARY_COLOR:-#03a9f4}
       - MUSARE_DEBUG_VERSION=${MUSARE_DEBUG_VERSION:-true}
@@ -39,10 +35,9 @@ services:
   frontend:
     build:
       context: .
-      dockerfile: ./frontend/Dockerfile
-      target: musare_frontend
+      dockerfile: ./Dockerfile
+      target: frontend
       args:
-        FRONTEND_MODE: "${FRONTEND_MODE:-production}"
         FRONTEND_PROD_DEVTOOLS: "${FRONTEND_PROD_DEVTOOLS:-false}"
         MUSARE_SITENAME: "${MUSARE_SITENAME:-Musare}"
         MUSARE_PRIMARY_COLOR: "${MUSARE_PRIMARY_COLOR:-#03a9f4}"
@@ -53,12 +48,9 @@ services:
         MUSARE_DEBUG_GIT_LATEST_COMMIT: "${MUSARE_DEBUG_GIT_LATEST_COMMIT:-true}"
         MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT: "${MUSARE_DEBUG_GIT_LATEST_COMMIT_SHORT:-true}"
     restart: ${RESTART_POLICY:-unless-stopped}
-    user: root
     ports:
       - "${FRONTEND_HOST:-0.0.0.0}:${FRONTEND_PORT:-80}:80"
     environment:
-      - CONTAINER_MODE=${CONTAINER_MODE:-production}
-      - FRONTEND_MODE=${FRONTEND_MODE:-production}
       - FRONTEND_PORT=${FRONTEND_PORT:-80}
       - FRONTEND_CLIENT_PORT=${FRONTEND_CLIENT_PORT:-80}
       - FRONTEND_DEV_PORT=${FRONTEND_DEV_PORT:-81}

frontend/dev.nginx.conf

@@ -1,46 +0,0 @@
-worker_processes  1;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-
-    sendfile off;
-
-    keepalive_timeout  65;
-
-    server {
-        listen 80;
-        server_name localhost;
-
-        location / {
-            proxy_set_header X-Real-IP $remote_addr;
-			proxy_set_header X-Forwarded-For $remote_addr;
-			proxy_set_header Host $host;
-
-            proxy_http_version 1.1;
-			proxy_set_header Upgrade $http_upgrade;
-			proxy_set_header Connection "upgrade";
-            proxy_redirect off;
-
-			proxy_pass http://localhost:81; 
-        }
-
-        location /backend {
-            proxy_set_header X-Real-IP  $remote_addr;
-			proxy_set_header X-Forwarded-For $remote_addr;
-			proxy_set_header Host $host;
-
-            proxy_http_version 1.1;
-			proxy_set_header Upgrade $http_upgrade;
-			proxy_set_header Connection "upgrade";
-            proxy_redirect off;
-
-            rewrite ^/backend/?(.*) /$1 break;
-			proxy_pass http://backend:8080; 
-        }
-    }
-}

frontend/entrypoint.dev.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+set -e
+
+if [ "${APP_ENV}" == "development" ]; then
+    ln -sf /opt/app/nginx.dev.conf /etc/nginx/http.d/default.conf
+    nginx
+
+    npm run dev
+else
+    ln -sf /opt/app/nginx.prod.conf /etc/nginx/http.d/default.conf
+    nginx -g "daemon off;"
+fi

frontend/entrypoint.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-if [[ "${CONTAINER_MODE}" == "development" ]]; then
-    npm install --silent
-fi
-
-if [[ "${FRONTEND_MODE}" == "production" ]]; then
-    if [[ "${CONTAINER_MODE}" == "development" ]]; then
-        npm run prod
-    fi
-    nginx -c /opt/app/prod.nginx.conf -g "daemon off;"
-elif [ "${FRONTEND_MODE}" == "development" ]; then
-    nginx -c /opt/app/dev.nginx.conf
-    npm run dev
-fi

frontend/nginx.dev.conf

@@ -0,0 +1,31 @@
+server {
+    listen 80;
+    server_name _;
+
+    location / {
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $host;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_redirect off;
+
+        proxy_pass http://localhost:81; 
+    }
+
+    location /backend {
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $host;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_redirect off;
+
+        rewrite ^/backend/?(.*) /$1 break;
+        proxy_pass http://backend:8080; 
+    }
+}

frontend/nginx.prod.conf

@@ -0,0 +1,24 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+
+    location / {
+        try_files $uri /$uri /index.html =404;
+    }
+
+    location /backend {
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $remote_addr;
+        proxy_set_header Host $host;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_redirect off;
+
+        rewrite ^/backend/?(.*) /$1 break;
+        proxy_pass http://backend:8080; 
+    }
+}

frontend/prod.nginx.conf

@@ -1,39 +0,0 @@
-worker_processes  1;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-
-    sendfile off;
-
-    keepalive_timeout 65;
-
-    server {
-        listen 80;
-        server_name _;
-
-        root /opt/app/build;
-
-        location / {
-            try_files $uri /$uri /index.html =404;
-        }
-
-        location /backend {
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $remote_addr;
-            proxy_set_header Host $host;
-
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-            proxy_redirect off;
-
-            rewrite ^/backend/?(.*) /$1 break;
-            proxy_pass http://backend:8080; 
-        }
-    }
-}

frontend/vite.config.js

@@ -122,7 +122,7 @@ const htmlPlugin = () => ({
 
 let server = null;
 
-if (process.env.FRONTEND_MODE === "development")
+if (process.env.APP_ENV === "development")
 	server = {
 		host: "0.0.0.0",
 		port: process.env.FRONTEND_DEV_PORT ?? 81,
@@ -133,7 +133,7 @@ if (process.env.FRONTEND_MODE === "development")
 	};
 
 export default {
-	mode: process.env.FRONTEND_MODE,
+	mode: process.env.APP_ENV,
 	root: "src",
 	publicDir: "../dist",
 	base: "/",

musare.sh

@@ -51,7 +51,7 @@ if [[ ${dockerInstalled} -gt 0 || ${composeInstalled} -gt 0 ]]; then
 fi
 
 composeFiles="-f docker-compose.yml"
-if [[ ${CONTAINER_MODE} == "development" ]]; then
+if [[ ${APP_ENV} == "development" ]]; then
     composeFiles="${composeFiles} -f docker-compose.dev.yml"
 fi
 if [[ -f docker-compose.override.yml ]]; then