feat: serve interface using a nodejs server (#48)

fix: allow program to compile by fixing syntaxe error

feat: build the interface on docker start

feat: start nodejs server

feat: serve node server through ngnix

Dockerfile/Dockerfile.Nginx

@@ -1,14 +1,6 @@
-# node 20, build the application
-FROM node:20.12.2-alpine3.19
-COPY ../nextjs-interface .
-RUN npm install
-RUN npm run build
-
-
 # nginx 1.26 on port 80, keep the build output, nginx config
 FROM nginx:1.26-alpine-otel
 EXPOSE 80
-COPY --from=0 ../out /var/www/memoires-info/html
 COPY ../.env /var/www/memoires-info/html/.env
 
 # copy the nginx config

Dockerfile/Dockerfile.Node

@@ -0,0 +1,18 @@
+FROM node:20.12.2-alpine3.19 as base
+
+# node 20, build the application
+FROM base
+WORKDIR /app
+COPY ../nextjs-interface .
+COPY ../.env .
+RUN npm install
+RUN node_modules/.bin/next build
+
+# serve the application
+FROM base
+WORKDIR /var/www/memoires-info/html
+COPY --from=1 /app/out ./out
+COPY --from=1 /app/node_modules/ ./node_modules/
+COPY --from=1 /app/next.config.mjs .
+CMD ["node_modules/.bin/next", "start"]
+

docker-compose.prod.yml

@@ -57,6 +57,12 @@ services:
     depends_on:
       - postg-rest
 
+  interface:
+    build:
+      context: .
+      dockerfile: Dockerfile/Dockerfile.Node
+    image: interface-memoires-info
+
   web:
     build:
       context: .
@@ -68,3 +74,4 @@ services:
       - php
       - postg-rest
       - esphome
+      - interface

nextjs-interface/src/app/dashboard/esp/[espName]/page.tsx

@@ -8,6 +8,7 @@ import { DateRangeElement } from "@/app/ui/dashboard/DateRangeElement";
 
 import { endOfMonth, format, startOfMonth } from "date-fns";
 import { DateRange } from "react-day-picker";
+import findIpByName, {useFetchData, useLastData} from "@/lib/data";
 
 import React from "react";
 import {useParams} from "react-router";
@@ -31,9 +32,6 @@ const allData = useFetchData(precision, ip, from, to);
     const temperature = useLastData("temperature", ip);
     const humidity = useLastData("humidity", ip);
 
-  const temperature = useLastData("temperature", ip);
-  const humidity = useLastData("humidity", ip);
-
   return (
     <div className="flex w-full min-w-[500px] flex-col gap-y-5 pt-2">
       <p className="text-2xl font-bold uppercase text-black">

nginx.conf

@@ -16,7 +16,6 @@ server {
 
         location /esp/ {
                 rewrite ^/esp(.*)$ $1 break;
-                add_header X-debug-message "uri: $uri" always;
                 proxy_set_header Host $host;
                 proxy_set_header X-Real-IP $remote_addr;
                 proxy_pass http://esphome:6052/;
@@ -28,23 +27,24 @@ server {
 
         location /adminer/ {
                 rewrite ^/adminer(.*)$ $1 break;
-                add_header X-debug-message "uri: $uri" always;
                 proxy_set_header Host $host;
                 proxy_set_header X-Real-IP $remote_addr;
                 proxy_pass http://adminer:8080/;
         }
 
         location /postgrest/ {
                 rewrite ^/postgrest(.*)$ $1 break;
-                add_header X-debug-message "uri: $uri" always;
                 proxy_set_header Host $host;
                 proxy_set_header X-Real-IP $remote_addr;
                 proxy_pass http://postg-rest:3000/;
         }
 
         location / {
                 root /var/www/memoires-info/html;
-                add_header X-debug-message "uri: $uri" always;
-                try_files $uri $uri.html =404;
+                proxy_pass http://interface:3000;
+                proxy_set_header Upgrade $http_upgrade;
+                proxy_set_header Connection "upgrade";
+                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+                proxy_set_header Host $host;
         }
 }