docker configuration for frontend

docker-compose.override.yml

@@ -21,6 +21,26 @@ services:
       # bind the local folder to the docker to allow live reload
       - ./webapp:/app
 
+  ########################################################
+  # FRONTEND #############################################
+  ########################################################
+  frontend:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/frontend:local-development
+    build:
+      target: development
+    environment:
+      - NODE_ENV=development
+    ports:
+      # port required for npm run dev
+      - 24678:24678
+    volumes:
+      # This makes sure the docker container has its own node modules.
+      # Therefore it is possible to have a different node version on the host machine
+      - frontend_node_modules:/app/node_modules
+      # bind the local folder to the docker to allow live reload
+      - ./frontend:/app
+
   ########################################################
   # BACKEND ##############################################
   ########################################################
@@ -77,4 +97,5 @@ services:
 
 volumes:
   webapp_node_modules:
+  frontend_node_modules:
   backend_node_modules:

docker-compose.yml

@@ -39,6 +39,36 @@ services:
     env_file:
       - ./webapp/.env
 
+  ########################################################
+  # FRONTEND #############################################
+  ########################################################
+  frontend:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: ocelotsocialnetwork/frontend:local-production
+    container_name: frontend
+    build:
+      context: ./frontend
+      target: production
+    networks:
+      - external-net
+    depends_on:
+      - backend
+    ports:
+      - 3002:3002
+    environment:
+      # Envs used in Dockerfile
+      # - DOCKER_WORKDIR="/app"
+      # - PORT="3002"
+      - BUILD_DATE
+      - BUILD_VERSION
+      - BUILD_COMMIT
+      - NODE_ENV="production"
+      # Application only envs
+      #- HOST=0.0.0.0 # This is nuxt specific, alternative value is HOST=webapp
+      #- GRAPHQL_URI=http://backend:4000
+    env_file:
+      - ./frontend/.env
+
   ########################################################
   # BACKEND ##############################################
   ########################################################

frontend/Dockerfile

@@ -12,7 +12,7 @@ ENV BUILD_COMMIT="0000000"
 ## SET NODE_ENV
 ENV NODE_ENV="production"
 ## App relevant Envs
-ENV PORT="3000"
+ENV PORT="3002"
 
 # Labels
 LABEL org.label-schema.build-date="${BUILD_DATE}"
@@ -34,6 +34,7 @@ LABEL maintainer="info@it4c.dev"
 # Settings
 ## Expose Container Port
 EXPOSE ${PORT}
+EXPOSE 24678
 
 ## Workdir
 RUN mkdir -p ${DOCKER_WORKDIR}