From 1a992a871e6b9632927521c88cfcbc302ebdd7ca Mon Sep 17 00:00:00 2001
From: Ninjaws <ninjaws@users.noreply.github.com>
Date: Mon, 28 Oct 2024 22:58:56 +0100
Subject: [PATCH] [Added] Setup for running production in docker-compose

---
 docker-compose.yml                       |  8 ++++++
 frontend/.devcontainer/Dockerfile        | 21 ----------------
 frontend/.devcontainer/devcontainer.json |  9 ++++---
 frontend/.devcontainer/oldDockerfile.txt | 21 ++++++++++++++++
 frontend/.dockerignore                   |  9 +++++++
 frontend/Dockerfile                      | 31 ++++++++++++++++++++++++
 6 files changed, 74 insertions(+), 25 deletions(-)
 create mode 100644 docker-compose.yml
 delete mode 100644 frontend/.devcontainer/Dockerfile
 create mode 100644 frontend/.devcontainer/oldDockerfile.txt
 create mode 100644 frontend/.dockerignore
 create mode 100644 frontend/Dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..5765b4f
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,8 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      target: production
+    ports:
+      - "4200:80"
\ No newline at end of file
diff --git a/frontend/.devcontainer/Dockerfile b/frontend/.devcontainer/Dockerfile
deleted file mode 100644
index 6b60469..0000000
--- a/frontend/.devcontainer/Dockerfile
+++ /dev/null
@@ -1,21 +0,0 @@
-FROM node:22-bookworm-slim
-
-ARG WORKDIR
-WORKDIR ${WORKDIR}
-
-RUN apt-get update && \
-    apt-get install -y git && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
-
-# Install Angular CLI globally
-RUN npm install -g @angular/cli
-
-# Switching user so it doesn't use root
-# If root adds files, it takes ownership, making them unremovable on the host except by using sudo
-# node tranfers ownership to the host user
-USER node
-
-EXPOSE 4200
-
-CMD ["tail","-f","/dev/null"]
\ No newline at end of file
diff --git a/frontend/.devcontainer/devcontainer.json b/frontend/.devcontainer/devcontainer.json
index 0ef6dbc..db9dbcb 100644
--- a/frontend/.devcontainer/devcontainer.json
+++ b/frontend/.devcontainer/devcontainer.json
@@ -2,11 +2,12 @@
   "name": "Quiz Frontend",
   
   "build": {
-    "context": ".",
-    "dockerfile": "Dockerfile",
+    "context": "..",
+    "dockerfile": "../Dockerfile",
     "args": {
-      "WORKDIR": "/app"
-    }
+      // "WORKDIR": "/app"
+    },
+    "target": "development"
   },
   "runArgs": [
     "--name=quiz-frontend-dev-cont",
diff --git a/frontend/.devcontainer/oldDockerfile.txt b/frontend/.devcontainer/oldDockerfile.txt
new file mode 100644
index 0000000..1ec5c0b
--- /dev/null
+++ b/frontend/.devcontainer/oldDockerfile.txt
@@ -0,0 +1,21 @@
+# FROM node:22-bookworm-slim
+
+# ARG WORKDIR
+# WORKDIR ${WORKDIR}
+
+# RUN apt-get update && \
+#     apt-get install -y git && \
+#     apt-get clean && \
+#     rm -rf /var/lib/apt/lists/*
+
+# # Install Angular CLI globally
+# RUN npm install -g @angular/cli
+
+# # Switching user so it doesn't use root
+# # If root adds files, it takes ownership, making them unremovable on the host except by using sudo
+# # node tranfers ownership to the host user
+# USER node
+
+# EXPOSE 4200
+
+# CMD ["tail","-f","/dev/null"]
\ No newline at end of file
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..e8a6b1c
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,9 @@
+node_modules/
+.git/
+.gitignore
+README.md
+LICENSE
+.vscode/
+Dockerfile*
+docker-compose*
+npm-debug.log
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..619be8d
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,31 @@
+FROM node:22-bookworm-slim AS base
+WORKDIR /app
+ENV NG_CLI_ANALYTICS=ci
+RUN npm install -g @angular/cli
+
+#--- Development
+FROM base AS development
+RUN apt-get update && \
+    apt-get install -y git && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+# Switching user so it doesn't use root
+# If root adds files, it takes ownership, making them unremovable on the host except by using sudo
+# node tranfers ownership to the host user
+USER node
+EXPOSE 4200
+CMD ["tail","-f","/dev/null"]
+
+#--- Building
+FROM base AS build
+COPY package*.json ./
+RUN npm install
+# Copied here, since the the Development setup uses a bind volume instead
+COPY . .
+RUN npm run build --prod
+
+#--- Production
+FROM nginx:alpine AS production
+COPY --from=build /app/dist/quiz/browser /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file