Build docker image for frontend

.github/workflows/ci.yml

@@ -54,3 +54,10 @@ jobs:
       - name: Build
         working-directory: ./frontend
         run: npm run build
+
+  build:
+    runs-on: ubuntu-22.04
+    name: Build Docker images
+    steps:
+      - name: Build
+        run: docker compose build

docker-compose.yml

@@ -4,14 +4,25 @@ include:
   - georchestra/geor-compose.override.yml
 
 services:
+  maelstro-front:
+    build:
+      context: ./frontend
+      target: server
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080"]
+      interval: 10s
+      retries: 5
+      start_period: 10s
+      timeout: 10s
+
   maelstro-back:
     build:
       context: ./backend
       target: server
     volumes:
       - ./backend:/app
     healthcheck:
-      test: "poetry run health_check"
+      test: "health_check"
       interval: 10s
       retries: 5
       start_period: 10s

frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules

frontend/Dockerfile

@@ -0,0 +1,20 @@
+# Inspired from https://cli.vuejs.org/guide/deployment.html#docker-nginx
+
+FROM node:22 AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN --mount=type=cache,target=/root/.npm \
+    npm install
+
+COPY ./ .
+RUN npm run build
+
+
+FROM nginx AS server
+
+RUN mkdir /app
+
+COPY --from=builder /app/dist /app
+COPY nginx.conf /etc/nginx/nginx.conf

frontend/nginx.conf

@@ -0,0 +1,30 @@
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+events {
+  worker_connections  1024;
+}
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+  keepalive_timeout  65;
+  server {
+    listen       8080;
+    server_name  localhost;
+    location / {
+      root   /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }
+}