updates: to more dockerfiles and added an nginx proxy. Still not got the

frontend talking to backend yet tho

Author: Stephen Hinett

backend/docker-compose.yml

@@ -1,5 +1,5 @@
 services:
-  api:
+  backend:
     container_name: api
     build:
       context: ./

backend/main.go

@@ -1,14 +1,26 @@
 package main
 
 import (
+	"encoding/json"
 	"log"
 	"net/http"
 )
 
+type response struct {
+	Message string `json:"message"`
+}
+
 func main() {
 	mux := http.NewServeMux()
+
 	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		w.Write([]byte("Hello, to the backend!"))
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(response{Message: "Hello, to the backend!"})
+	})
+
+	mux.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
+		json.NewEncoder(w).Encode(response{Message: "Hello, to the backend!"})
 	})
 
 	log.Println("Starting server on :9000")

docker-compose.yml

@@ -0,0 +1,33 @@
+services:
+  nginx:
+    container_name: proxy
+    image: nginx:stable-alpine
+    depends_on:
+      - "client"
+      - "api"
+    volumes:
+      - ./docker/nginx/config:/etc/nginx/conf.d/
+      - ./docker/nginx/includes:/etc/nginx/includes/
+    networks:
+      - site-network
+
+  client:
+    depends_on:
+      - "api"
+    extends:
+      file: ./frontend/docker-compose.yml
+      service: frontend
+    networks:
+      - site-network
+
+  api:
+    extends:
+      file: ./backend/docker-compose.yml
+      service: backend
+    networks:
+      - site-network
+
+networks:
+  site-network:
+    name: site-network
+    driver: bridge

docker/nginx/config/default.conf

@@ -0,0 +1,33 @@
+server {
+    listen 8080;
+    listen [::]:8080;
+    server_name localhost;
+
+    # SSL configuration
+    #
+    # listen 443 ssl;
+    # listen [::]:443 ssl;
+    #
+    # Note: You should disable gzip for SSL traffic.
+    # See: https://bugs.debian.org/773332
+    #
+    # Read up on ssl_ciphers to ensure a secure configuration.
+    # See: https://bugs.debian.org/765782
+    #
+    # Self signed certs generated by the ssl-cert package
+    # Don't use them in a production server!
+    #
+    # include snippets/snakeoil.conf;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        include /etc/nginx/includes/proxy.conf;
+        proxy_pass        http://client:3000;
+    }
+
+    location /api {
+        include /etc/nginx/includes/proxy.conf;
+        proxy_pass        http://api:9000;
+    }    
+}

docker/nginx/includes/proxy.conf

@@ -0,0 +1,8 @@
+proxy_set_header Host $host;
+proxy_set_header X-Real-IP $remote_addr;
+proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+proxy_set_header X-Forwarded-Proto $scheme;
+proxy_buffering off;
+proxy_request_buffering off;
+proxy_http_version 1.1;
+proxy_intercept_errors on;

frontend/.gitkeep

@@ -5,10 +5,11 @@ services:
       context: ./
       dockerfile: docker/Dockerfile.dev
     ports:
-      - "8080:8080"
+      - "3000:3000"
       - "33333:33333"
     volumes:
       - ./:/client
       - /client/node_modules/
       - /client/.parcel-cache/
+    # command: [ "parcel", "ui/index.html -p 8080 --hmr-port 33333" ]
     command: [ "npm", "start" ]

frontend/docker-compose.yml

@@ -9,3 +9,6 @@ COPY ./package.json ./package-lock.json ./
 RUN npm install --slient
 
 COPY . .
+
+EXPOSE 33333
+# EXPOSE 8080

frontend/docker/Dockerfile.dev

@@ -5,7 +5,7 @@
   "browserlist": "> 0.5%, last 2 versions, not dead",
   "source": "ui/index.html",
   "scripts": {
-    "start": "parcel ui/index.html -p 8080 --hmr-port 33333",
+    "start": "parcel ui/index.html -p 3000 --hmr-port=33333",
     "build": "parcel build"
   },
   "dependencies": {

frontend/package.json

@@ -1,8 +1,46 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, { useEffect, useState } from 'react'
 
-const App: React.FunctionComponent<{}> = () => (
-    <h1>Hello, to the frontend</h1>
-)
+import { createRoot } from 'react-dom/client'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+const App: React.FunctionComponent<{}> = () => {
+    const [error, setError] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [items, setItems] = useState([]);
+
+    useEffect(() => {
+        fetch("http://localhost:9000/api", {
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            }
+        }).then(
+            res => res.json()
+        ).then(
+            (result) => {
+                console.log(result);
+            },
+            (err) => {
+                setIsLoaded(true)
+                setError(err)
+            }
+        )
+    }, [])
+
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    } else if (!isLoaded) {
+        return <div>Loading...</div>;
+    } else {
+        return (
+            <div className='some-element'>
+                <h1>Hello, to the frontend!</h1>
+                <p>{items.map(item => (item.name))}</p>
+            </div>
+        )
+    }
+}
+
+root.render(<App />)