fixed frontend production docker build & refactored frontend file structure

- frontend server runs on port 3000 by default
- frontend production docker build successfully runs & builds
- frontend production docker build is no longer reachable from the outside
- moved server.js in subfolder run/

docker-compose.override.yml

@@ -8,6 +8,8 @@ services:
     image: gradido/frontend:development
     build:
       target: development
+    networks:
+      - external-net
     environment:
       - NODE_ENV="development"
       # - DEBUG=true

docker-compose.yml

@@ -15,13 +15,13 @@ services:
       context: ./frontend
       target: production
     networks:
-      - external-net
+      - internal-net
     ports:
-      - 8080:8080
+      - 3000:3000
     environment:
       # Envs used in Dockerfile
       # - DOCKER_WORKDIR="/app"
-      # - PORT="8080"
+      # - PORT=3000
       - BUILD_DATE
       - BUILD_VERSION
       - BUILD_COMMIT

frontend/.env.dist

@@ -1,3 +1,2 @@
 LOGIN_API_URL=http://localhost/login_api/
-COMMUNITY_API_URL=http://localhost/api/
-VUE_PATH=/vue
+COMMUNITY_API_URL=http://localhost/api/

frontend/Dockerfile

@@ -15,7 +15,7 @@ ENV BUILD_COMMIT="0000000"
 ## SET NODE_ENV
 ENV NODE_ENV="production"
 ## App relevant Envs
-ENV PORT="8080"
+ENV PORT="3000"
 
 # Labels
 LABEL org.label-schema.build-date="${BUILD_DATE}"
@@ -82,15 +82,14 @@ FROM base as production
 
 # Copy "binary"-files from build image
 COPY --from=build ${DOCKER_WORKDIR}/dist ./dist
-#COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
-#COPY --from=build ${DOCKER_WORKDIR}/nuxt.config.js ./nuxt.config.js
+# We also copy the node_modules express and serve-static for the run script
+COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
 # Copy static files
-# TODO - this should be one Folder containign all stuff needed to be copied
-#COPY --from=build ${DOCKER_WORKDIR}/constants ./constants
-#COPY --from=build ${DOCKER_WORKDIR}/static ./static
-#COPY --from=build ${DOCKER_WORKDIR}/locales ./locales
+COPY --from=build ${DOCKER_WORKDIR}/public ./public
 # Copy package.json for script definitions (lock file should not be needed)
 COPY --from=build ${DOCKER_WORKDIR}/package.json ./package.json
+# Copy run scripts run/
+COPY --from=build ${DOCKER_WORKDIR}/run ./run
 
 # Run command
 CMD /bin/sh -c "yarn run start"

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.9.4",
   "private": true,
   "scripts": {
-    "start": "node server.js",
+    "start": "node run/server.js",
     "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
     "lint": "eslint --ext .js,.vue .",

frontend/run/server.js

@@ -0,0 +1,14 @@
+// Imports
+const express = require('express')
+const serveStatic = require('serve-static')
+
+// Port
+const port = process.env.PORT || 3000
+
+// Express Server
+const app = express()
+app.use(serveStatic(__dirname + '/../dist'))
+app.listen(port)
+
+// eslint-disable-next-line no-console
+console.log(`http://frontend:${port} server started.`)

frontend/server.js

@@ -1,7 +0,0 @@
-var express = require('express')
-var serveStatic = require('serve-static')
-var app = express()
-app.use(serveStatic(__dirname + '/dist'))
-var port = process.env.PORT || 5000
-app.listen(port)
-// console.log('http://localhost:5000 server started.');

frontend/vue.config.js

@@ -1,17 +1,11 @@
 const path = require('path')
 const dotenv = require('dotenv-webpack')
 
-function resolveSrc(_path) {
-  return path.join(__dirname, _path)
-}
-
-let vue_path = process.env.VUE_PATH
-if (vue_path == undefined) {
-  vue_path = '/vue'
-}
-
 // vue.config.js
 module.exports = {
+  devServer: {
+    port: process.env.PORT || 3000,
+  },
   pluginOptions: {
     i18n: {
       locale: 'de',
@@ -21,12 +15,12 @@ module.exports = {
     },
   },
   lintOnSave: true,
-  publicPath: vue_path + '/',
+  // publicPath: '/',
   configureWebpack: {
     // Set up all the aliases we use in our app.
     resolve: {
       alias: {
-        assets: resolveSrc('src/assets'),
+        assets: path.join(__dirname, 'src/assets'),
       },
     },
     plugins: [new dotenv()],
@@ -35,5 +29,5 @@ module.exports = {
     // Enable CSS source maps.
     sourceMap: process.env.NODE_ENV !== 'production',
   },
-  outputDir: path.resolve(__dirname, './dist' + vue_path),
+  outputDir: path.resolve(__dirname, './dist'),
 }