chore: simplifying nginx frontend service + add caching (#18)

* simplifying nginx frontend service + add caching (#18)

docker-compose.yml

@@ -7,7 +7,6 @@ services:
   maelstro-front:
     build:
       context: ./frontend
-      target: server
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:8080/maelstro/"]
       interval: 10s

frontend/Dockerfile

@@ -12,21 +12,9 @@ COPY ./ .
 RUN npm run build
 
 
-FROM nginx:1.27-alpine AS server
+FROM nginxinc/nginx-unprivileged:1.27-alpine
 
-RUN mkdir /app
 ENV CUSTOM_SCRIPTS_DIRECTORY ""
-COPY --from=builder /app/dist /app
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder --chown=nginx /app/dist /app
+COPY nginx-default.conf /etc/nginx/conf.d/default.conf
 COPY ./docker-entrypoint.sh /
-
-## add permissions
-RUN chown -R nginx:nginx /app && chmod -R 755 /app && \
-        chown -R nginx:nginx /var/cache/nginx && \
-        chown -R nginx:nginx /var/log/nginx && \
-        chown -R nginx:nginx /etc/nginx/conf.d
-RUN touch /var/run/nginx.pid && \
-        chown -R nginx:nginx /var/run/nginx.pid
-
-## switch to non-root user
-USER nginx

frontend/nginx-default.conf

@@ -0,0 +1,34 @@
+server {
+    listen       8080 default_server;
+    server_name  _;
+
+    access_log  /var/log/nginx/access.log  main;
+
+    location /maelstro {
+      alias /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+      autoindex off;
+      expires off;
+      add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+    }
+
+    # all assets contain hash in filename, cache forever
+    location ^~ /assets/ {
+      alias /app;
+      add_header Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable";
+      try_files $uri =404;
+    }
+
+    # all workbox scripts are compiled with hash in filename, cache forever
+    location ^~ /workbox- {
+      alias /app;
+      add_header Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable";
+      try_files $uri =404;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}