fix: Make kandimat useable

* Added nginx to reroute requests to different containers
* Made dev-containers more dev by utilizing volumes
  With that, changes on the hard-drive are immediately available in the container
Make kandimat useable

.env

@@ -1,7 +1,10 @@
 COMPOSE_FILE=docker-compose.dev.yml
 COMPOSE_PROJECT_NAME=kandimat
+PORT=3000
 
 # Backend vars
 POSTGRES_PASSWORD=postgres!dev
 DATABASE_URL=postgres://kandimat_postgraphile:postgres!dev@postgres:5432/kandimat_db
 JWT_SECRET=asdfasdfasdf
+
+BACKEND_PATH=/graphql

.gitignore

@@ -27,3 +27,6 @@ yarn-error.log*
 
 # GraphQl plugin related
 postgraphile-schema.graphql
+
+# nginx logs
+nginx/logs

README.md

@@ -55,10 +55,10 @@ For dev setup:
 docker-compose up
 ```
 
-* GraphQL IDE/GUI: http://localhost:5433/graphiql
-* GraphQL Endpoint: http://localhost:5433/graphql
-* UserApp: http://localhost:8080
-* RedaktionsApp: http://localhost:8081
+* GraphQL IDE/GUI: http://localhost/graphiql
+* GraphQL Endpoint: http://localhost/graphql
+* UserApp: http://localhost/user
+* RedaktionsApp: http://localhost/editor
 * Postgres database: http://localhost:5432
 
 **Note:** The database will use a volume to persist changes in-between runs.

docker-compose.dev.yml

@@ -1,57 +1,69 @@
 version: '3.1'
 
 services:
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./nginx/logs:/etc/nginx/logs
+    ports:
+      - "$PORT:80"
+    depends_on:
+      - redaktion
+      - user-app
+      - graphql
+
   redaktion:
-    build:
-      context: ./redaktions-app/
-      dockerfile: ./dev.Dockerfile
-    stdin_open: true
+    container_name: editor-app
+    image: node:16
+    working_dir: /app
+    volumes:
+      - ./redaktions-app:/app
+    entrypoint: ./run-dev.sh
+    environment:
+      - PUBLIC_URL=/editor/
+      - BACKEND_URL=$BACKEND_PATH
     depends_on:
       - graphql
-    ports:
-      - '8081:3000'
-    networks:
-      - frontend
 
   user-app:
-    build:
-      context: kandimat-user-app/
-      dockerfile: ./dev.Dockerfile
+    container_name: user-app
+    image: node:13
+    working_dir: /var/www/docker-vue
+    volumes:
+      - ./kandimat-user-app:/var/www/docker-vue
+    environment:
+      - VUE_APP_PUBLIC_URL=/user
+      - VUE_APP_BACKEND_URL=$BACKEND_PATH
+      - PORT=80
+    entrypoint: ./run-dev.sh
     depends_on:
       - graphql
-    ports:
-      - "8080:8080"
-    networks:
-      - frontend
-
   postgres:
     image: kandimat-postgres:11.5
+    container_name: postgres
     build:
       dockerfile: ./Dockerfile
       context: ./backend/
     environment:
       - "POSTGRES_PASSWORD=${POSTGRES_PASSWORD}"
     env_file: ./backend/backend.env
+    restart: always
     ports:
       - "5432:5432"
-    restart: always
     volumes:
       - "db-data:/var/lib/postgresql/data"
-    networks:
-      - backend
 
   graphql:
     restart: always
     image: graphile/postgraphile
+    container_name: graphql
     depends_on:
       - postgres
     env_file: ./backend/backend.env
-    ports:
-      - "5433:5000"
     command: [
       "--connection", $DATABASE_URL,
-      "--host", "0.0.0.0",
-      "--port", "5000",
       "--cors",
       "--schema", "kandimat_data",
       "--default-role", "kandimat_anonymous",
@@ -62,13 +74,6 @@ services:
       "--enhance-graphiql",
       "--classic-ids",
     ]
-    networks:
-      - frontend
-      - backend
-
-networks:
-  backend:
-  frontend:
 
 volumes:
   db-data:

kandimat-user-app

@@ -1 +1 @@
-Subproject commit dc1602b6e87c80d3c37f92bc87f02c98865895d3
+Subproject commit 77f54653f8951cfd43864d5f45cb78b7f0b20e13

nginx/nginx.conf

@@ -0,0 +1,25 @@
+events {
+
+}
+
+http {
+  error_log /etc/nginx/logs/error.log warn;
+  client_max_body_size 20m;
+
+  server {
+	  server_name kandimat.netzbegruenung.verdigado.net;
+
+    location /user {
+      proxy_pass http://user-app:80;
+    }
+    location /editor {
+      proxy_pass http://editor-app:3000;
+    }
+    location /graphql {
+      proxy_pass http://graphql:5000;
+    }
+    location /graphiql {
+      proxy_pass http://graphql:5000;
+    }
+  }
+}

redaktions-app/.graphqlconfig

@@ -4,7 +4,7 @@
   "extensions": {
     "endpoints": {
       "Remote SWAPI GraphQL Endpoint": {
-        "url": "http://localhost:5433/graphql",
+        "url": "http://localhost/graphql",
         "headers": {
           "user-agent": "JS GraphQL"
         },

redaktions-app/dev.Dockerfile

@@ -1,13 +0,0 @@
-FROM node:12.2.0-alpine
-
-WORKDIR /app
-
-COPY package*.json ./
-
-RUN npm ci
-
-COPY public ./public
-COPY tsconfig.json logo.svg ./
-COPY src ./src
-
-CMD ["npm", "start"]

redaktions-app/public/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+  <base href="%PUBLIC_URL%">
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

redaktions-app/run-dev.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+npm ci
+npm start

redaktions-app/src/backend/helper.ts

@@ -6,7 +6,7 @@ import { ServerError } from "@apollo/client/link/utils";
 import { ServerParseError } from "@apollo/client/link/http";
 
 const httpLink = createHttpLink({
-  uri: "http://localhost:5433/graphql",
+  uri: process.env.BACKEND_URL,
 });
 
 const errorLink = onError(({ networkError }) => {

redaktions-app/src/index.tsx

@@ -22,7 +22,7 @@ const theme = createMuiTheme({
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <Router>
+    <Router basename={process.env.PUBLIC_URL}>
       <ThemeProvider theme={theme}>
         <SnackbarProvider maxSnack={3}>
           <App />