chore: use multi-stage builds for server images in both development a…

…nd production environments (#2117)

.github/workflows/docker-test.yaml

@@ -69,13 +69,15 @@ jobs:
       - name: Build Containers
         run: |
           poetry run python tools/image_builder \
+            --dockerfiles-only \
+            --disable-cache-mounts \
             --service celery \
             --service redis \
             --service test
 
       - name: Start the test container
         run: |
-          docker compose -f docker-compose.test.yml up -d
+          docker compose -f docker-compose.test.yml up -d --build
 
       - name: Run the unit tests inside the container
         run: |

.gitignore

@@ -56,3 +56,8 @@ db.sqlite3
 
 # Django
 staticfiles/
+
+# Static files
+static/js/anthias.js*
+static/js/settings.js*
+static/css/anthias.css*

bin/prepare_test_environment.sh

@@ -48,6 +48,10 @@ EOF
 if [ "$START_SERVER" = true ]; then
     cd /usr/src/app
 
+    npm install && \
+        npm run coffee-build && \
+        npm run sass-build
+
     ./manage.py makemigrations
     ./manage.py migrate --fake-initial
     ./manage.py runserver 127.0.0.1:8080 &

bin/start_server.sh

@@ -27,6 +27,9 @@ fi
 
 if [[ "$ENVIRONMENT" == "development" ]]; then
     echo "Starting Django development server..."
+    npm install && \
+        npm run coffee-build && \
+        npm run sass-build
     ./manage.py runserver 0.0.0.0:8080
 else
     echo "Generating Django static files..."

docker/Dockerfile.server.j2

@@ -1,3 +1,28 @@
+{% if environment == 'production' %}
+FROM debian:bookworm as node-builder
+
+{% if disable_cache_mounts %}
+RUN \
+{% else %}
+RUN --mount=type=cache,target=/var/cache/apt \
+{% endif %}
+    apt-get update && \
+    apt-get -y install --no-install-recommends \
+        nodejs \
+        npm
+
+RUN mkdir -p /app
+WORKDIR /app
+
+COPY package.json package-lock.json /app
+RUN npm install
+
+COPY ./static/js/*.coffee /app/static/js/
+COPY ./static/sass/*.scss /app/static/sass/
+RUN npm run coffee-build && \
+    npm run sass-build
+
+{% endif %}
 {% include 'Dockerfile.base.j2' %}
 
 COPY requirements/requirements.txt /tmp/requirements.txt
@@ -12,6 +37,15 @@ RUN mkdir -p /usr/src/app
 COPY . /usr/src/app/
 WORKDIR /usr/src/app
 
+{% if environment == 'production' %}
+COPY --from=node-builder \
+    /app/static/css/ \
+    /usr/src/app/static/css/
+COPY --from=node-builder \
+    /app/static/js/*.js* \
+    /usr/src/app/static/js/
+{% endif %}
+
 ENV GIT_HASH={{ git_hash }}
 ENV GIT_SHORT_HASH={{ git_short_hash }}
 ENV GIT_BRANCH={{ git_branch }}

docs/developer-documentation.md

@@ -159,30 +159,34 @@ We've also provided a [checklist](/docs/qa-checklist.md) that can serve as a gui
 
 ## Generating CSS and JS files
 
-Anthias only supports compiling from the host container at the moment. You need to install the latest version
-of Node.js. We recommend to intall Node.js on Linux. You can use this [guide](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)
-to get started.
+To get started, you need to start the development server first. See this [section](#dockerized-development-environment)
+for details.
 
 ### Installing Node.js dependencies
 
 Run the following command from the project root directory.
 
 ```bash
-$ npm install
+$ docker compose -f docker-compose.dev.yml exec anthias-server \
+    npm install
 ```
 
 ### Transpiling CSS from SASS
 
+Open a new terminal session and run the following command:
+
 ```bash
-$ npm run sass-dev
+$ docker compose -f docker-compose.dev.yml exec anthias-server \
+    npm run sass-dev
 ```
 
 ### Transpiling JS from CoffeeScript
 
+Open a new terminal session and run the following command:
+
 ```bash
-# You need to run this on a separate terminal session if you already ran the
-# script for transpiling SASS files.
-$ npm run coffee-dev
+$ docker compose -f docker-compose.dev.yml exec anthias-server \
+    npm run coffee-dev
 ```
 
 ### Closing the transpiler

package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "scripts": {
     "coffee-dev": "coffee --compile --map --watch static/js/*.coffee",
-    "sass-dev": "sass --watch static/sass/:static/css/"
+    "sass-dev": "sass --watch static/sass/:static/css/",
+    "coffee-build": "coffee --compile --map static/js/*.coffee",
+    "sass-build": "sass static/sass/:static/css/"
   },
   "dependencies": {
     "bootstrap": "^4.3.1",