From a196ba2c08bd16479134ab542f2560b75f19424f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 15 Jul 2020 15:45:02 +0200
Subject: Make frontend independent of API

This change makes the frontend independent of the API by removing the
static file serving logic from the API server. Instead, we can serve the
frontend as static HTML over CDNs.
---
 frontend/Dockerfile        | 19 +++++++++++++++++++
 frontend/nginx.conf        | 32 ++++++++++++++++++++++++++++++++
 frontend/src/api/socket.js |  8 +++-----
 frontend/yarn.lock         |  2 +-
 4 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/nginx.conf

(limited to 'frontend')

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 00000000..36e3c20b
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,19 @@
+FROM node:14
+MAINTAINER OpenDC Maintainers <opendc@atlarge-research.com>
+
+ARG REACT_APP_OAUTH_CLIENT_ID
+
+# Copy OpenDC directory
+COPY ./ /opendc
+
+# Build frontend
+RUN cd /opendc/ \
+    && rm -rf ./build \
+    && yarn \
+    && export REACT_APP_OAUTH_CLIENT_ID=$REACT_APP_OAUTH_CLIENT_ID \
+    && yarn build
+
+# Setup nginx to serve the frontend
+FROM nginx:1.19
+COPY --from=0 /opendc/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 00000000..ed7e5cfe
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,32 @@
+server {
+    listen       80;
+    server_name  opendc.org;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /socket.io {
+        proxy_http_version 1.1;
+
+        proxy_buffering off;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+        proxy_pass http://api:8081/socket.io;
+    }
+
+    location /tokensignin {
+        proxy_pass http://api:8081/tokensignin;
+    }
+
+    location /api {
+        proxy_pass http://api:8081/api;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
diff --git a/frontend/src/api/socket.js b/frontend/src/api/socket.js
index 93ce8fa8..759c119e 100644
--- a/frontend/src/api/socket.js
+++ b/frontend/src/api/socket.js
@@ -6,11 +6,9 @@ let requestIdCounter = 0
 const callbacks = {}
 
 export function setupSocketConnection(onConnect) {
-    let port = window.location.port
-    if (process.env.NODE_ENV !== 'production') {
-        port = 8081
-    }
-    socket = io.connect(window.location.protocol + '//' + window.location.hostname + ':' + port)
+    const apiUrl = process.env.REACT_APP_API_URL || window.location.hostname + ':' + window.location.port;
+
+    socket = io.connect(window.location.protocol + '//' + apiUrl);
     socket.on('connect', onConnect)
     socket.on('response', onSocketResponse)
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 00c6e441..2859e4e0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11527,7 +11527,7 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuidv4@^6.1.1:
+uuidv4@~6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/uuidv4/-/uuidv4-6.1.1.tgz#6565b4f2be7d6f841c14106f420fdb701eae5c81"
   integrity sha512-ZplGb1SHFMVH3l7PUQl2Uwo+FpJQV6IPOoU+MjjbqrNYQolqbGwv+/sn9F+AGMsMOgGz3r9JN3ztGUi0VzMxmw==
-- 
cgit v1.2.3