♻️ Refactor frontend Docker build setup, use plain NodeJS, use custom Nginx config, fix build for old Vue (#555)

src/.env

@@ -6,7 +6,7 @@ DOMAIN=localhost
 STACK_NAME=full-stack-fastapi-postgresql
 
 TRAEFIK_PUBLIC_NETWORK=traefik-public
-TRAEFIK_TAG=
+TRAEFIK_TAG=traefik
 TRAEFIK_PUBLIC_TAG=traefik-public
 
 # Configure these with your own Docker registry images
@@ -16,7 +16,7 @@ DOCKER_IMAGE_FRONTEND=frontend
 
 # Backend
 BACKEND_CORS_ORIGINS="[\"http://localhost\", \"http://localhost:4200\", \"http://localhost:3000\", \"http://localhost:8080\", \"https://localhost\", \"https://localhost:4200\", \"https://localhost:3000\", \"https://localhost:8080\", \"http://local.dockertoolbox.tiangolo.com\", \"http://localhost.tiangolo.com\"]"
-PROJECT_NAME=
+PROJECT_NAME="Full Stack FastAPI PostgreSQL"
 SECRET_KEY=changethis
 FIRST_SUPERUSER=admin@example.com
 FIRST_SUPERUSER_PASSWORD=changethis

src/frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
-FROM tiangolo/node-frontend:10 as build-stage
+FROM node:18.12.1 as build-stage
 
 WORKDIR /app
 
@@ -13,6 +13,8 @@ ARG FRONTEND_ENV=production
 
 ENV VUE_APP_ENV=${FRONTEND_ENV}
 
+ENV NODE_OPTIONS="--openssl-legacy-provider"
+
 # Comment out the next line to disable tests
 RUN npm run test:unit
 
@@ -24,5 +26,5 @@ FROM nginx:1.15
 
 COPY --from=build-stage /app/dist/ /usr/share/nginx/html
 
-COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf

src/frontend/nginx.conf

@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  
+  include /etc/nginx/extra-conf.d/*.conf;
+}