refactor: Docker setup tweaks and build prod frontend in image

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.15
+FROM node:16.15 AS musare_backend
 
 RUN npm install -g nodemon
 
@@ -12,4 +12,7 @@ RUN npm install
 
 COPY . /opt/app
 
-CMD npm run docker:dev
+ENTRYPOINT npm run docker:dev
+
+EXPOSE 8080/tcp
+EXPOSE 8080/udp

docker-compose.dev.yml

@@ -1,7 +1,7 @@
 services:
   backend:
     ports:
-      - "${BACKEND_HOST}:${BACKEND_PORT}:8080"
+      - "${BACKEND_HOST:-0.0.0.0}:${BACKEND_PORT:-8080}:8080"
     volumes:
       - ./backend:/opt/app
 
@@ -11,10 +11,10 @@ services:
 
   mongo:
     ports:
-      - "${MONGO_HOST}:${MONGO_PORT}:${MONGO_PORT}"
+      - "${MONGO_HOST:-0.0.0.0}:${MONGO_PORT:-27017}:${MONGO_PORT:-27017}"
 
   redis:
     ports:
-      - "${REDIS_HOST}:${REDIS_PORT}:6379"
+      - "${REDIS_HOST:-0.0.0.0}:${REDIS_PORT:-6379}:6379"
     volumes:
-      - ${REDIS_DATA_LOCATION}:/data
+      - ${REDIS_DATA_LOCATION:-./redis}:/data

docker-compose.yml

@@ -2,8 +2,10 @@ version: "3.8"
 
 services:
   backend:
-    build: ./backend
-    restart: ${RESTART_POLICY}
+    build:
+      context: ./backend
+      target: musare_backend
+    restart: ${RESTART_POLICY:-unless-stopped}
     volumes:
       - ./.git:/opt/app/.parent_git:ro
       - /opt/app/node_modules
@@ -15,35 +17,41 @@ services:
     tty: true
 
   frontend:
-    build: ./frontend
-    restart: ${RESTART_POLICY}
+    build:
+      context: ./frontend
+      target: musare_frontend
+      args:
+        FRONTEND_MODE: "${FRONTEND_MODE:-prod}"
+    restart: ${RESTART_POLICY:-unless-stopped}
     ports:
-      - "${FRONTEND_HOST}:${FRONTEND_PORT}:80"
+      - "${FRONTEND_HOST:-0.0.0.0}:${FRONTEND_PORT:-80}:80"
     volumes:
       - ./.git:/opt/app/.parent_git:ro
       - /opt/app/node_modules
       - ./frontend/dist/config:/opt/app/dist/config
     environment:
-      - FRONTEND_MODE=${FRONTEND_MODE}
+      - FRONTEND_MODE=${FRONTEND_MODE:-prod}
     links:
       - backend
 
   mongo:
     image: docker.io/mongo:${MONGO_VERSION}
-    restart: ${RESTART_POLICY}
+    restart: ${RESTART_POLICY:-unless-stopped}
     environment:
       - MONGO_INITDB_ROOT_USERNAME=admin
       - MONGO_INITDB_ROOT_PASSWORD=${MONGO_ROOT_PASSWORD}
       - MONGO_INITDB_DATABASE=musare
-      - MONGO_PORT=${MONGO_PORT}
+      - MONGO_PORT=${MONGO_PORT:-27017}
       - MONGO_ROOT_PASSWORD=${MONGO_ROOT_PASSWORD}
       - MONGO_USER_USERNAME=${MONGO_USER_USERNAME}
       - MONGO_USER_PASSWORD=${MONGO_USER_PASSWORD}
     volumes:
       - ./tools/docker/setup-mongo.sh:/docker-entrypoint-initdb.d/setup-mongo.sh
-      - ${MONGO_DATA_LOCATION}:/data/db
+      - ${MONGO_DATA_LOCATION:-./db}:/data/db
 
   redis:
     image: docker.io/redis:6.2
-    restart: ${RESTART_POLICY}
+    restart: ${RESTART_POLICY:-unless-stopped}
     command: "--notify-keyspace-events Ex --requirepass ${REDIS_PASSWORD} --appendonly yes"
+    volumes:
+      - /data

frontend/Dockerfile

@@ -1,4 +1,7 @@
-FROM node:16.15
+FROM node:16.15 AS musare_frontend
+
+ARG FRONTEND_MODE=prod
+ENV FRONTEND_MODE=${FRONTEND_MODE}
 
 RUN apt-get update
 RUN apt-get install nginx -y
@@ -17,6 +20,11 @@ COPY . /opt/app
 
 RUN mkdir -p /run/nginx
 
-RUN chmod u+x bootstrap.sh
+RUN bash -c '[[ "${FRONTEND_MODE}" = "prod" ]] && npm run prod' || exit 0
+
+RUN chmod u+x entrypoint.sh
+
+ENTRYPOINT bash /opt/app/entrypoint.sh
 
-CMD bash /opt/app/bootstrap.sh
+EXPOSE 80/tcp
+EXPOSE 80/udp

frontend/bootstrap.sh

@@ -1,9 +0,0 @@
-#!/bin/bash
-
-if [ "$FRONTEND_MODE" == "prod" ] ; then
-	cd /opt/app ; npm run $FRONTEND_MODE
-	nginx -c /opt/app/$FRONTEND_MODE.nginx.conf -g "daemon off;"
-elif [ "$FRONTEND_MODE" == "dev" ] ; then
-	nginx -c /opt/app/$FRONTEND_MODE.nginx.conf
-	cd /opt/app; npm run $FRONTEND_MODE
-fi

frontend/entrypoint.sh

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

frontend/webpack.common.js

@@ -112,7 +112,9 @@ module.exports = {
 	plugins: [
 		new VueLoaderPlugin(),
 		new HtmlWebpackPlugin({
-			title: config.get("siteSettings.sitename"),
+			title: config.has("siteSettings.sitename")
+				? config.get("siteSettings.sitename")
+				: "Musare",
 			hash: true,
 			template: "dist/index.tpl.html",
 			inject: "body",
@@ -149,10 +151,7 @@ module.exports = {
 			},
 			{
 				test: /\.css$/,
-				use: [
-				  'style-loader',
-				  'css-loader'
-				]
+				use: ["style-loader", "css-loader"]
 			},
 			{
 				test: /\.less$/i,