ui: Fix frontend deployment scripts

This change fixes the deployment scripts necessary for the frontend and
ensures that runtime variables work again.

4 files changed, 32 insertions, 30 deletions

diff --git a/opendc-web/opendc-web-ui/Dockerfile b/opendc-web/opendc-web-ui/Dockerfile
index 86a18a03..15a92068 100644
--- a/opendc-web/opendc-web-ui/Dockerfile
+++ b/opendc-web/opendc-web-ui/Dockerfile
@@ -1,22 +1,28 @@
-FROM node:15 AS staging
+FROM node:16 AS staging
 MAINTAINER OpenDC Maintainers <opendc@atlarge-research.com>
 
 # Copy package details
 COPY ./package.json ./yarn.lock /opendc/
-RUN cd /opendc && yarn
+RUN cd /opendc && yarn install --frozen-lockfile
 
 # Build frontend
-FROM node:15 AS build
+FROM node:16 AS build
 
 COPY ./ /opendc
 COPY --from=staging /opendc/node_modules /opendc/node_modules
 RUN cd /opendc/ \
-    && export REACT_APP_OAUTH_CLIENT_ID="\\\$REACT_APP_OAUTH_CLIENT_ID" \
+    # Environmental variables that will be substituted during image runtime
+    && export NEXT_PUBLIC_API_BASE_URL="%%NEXT_PUBLIC_API_BASE_URL%%" \
+              NEXT_PUBLIC_SENTRY_DSN="%%NEXT_PUBLIC_SENTRY_DSN%%" \
+              NEXT_PUBLIC_AUTH0_DOMAIN="%%NEXT_PUBLIC_AUTH0_DOMAIN%%" \
+              NEXT_PUBLIC_AUTH0_CLIENT_ID="%%NEXT_PUBLIC_AUTH0_CLIENT_ID%%" \
+              NEXT_PUBLIC_AUTH0_AUDIENCE="%%NEXT_PUBLIC_AUTH0_AUDIENCE%%" \
     && yarn build \
-    && mv build/index.html build/index.html.template
+    && yarn cache clean --all \
+    && mv .next .next.template
 
-# Setup nginx to serve the frontend
-FROM nginx:1.20
-COPY --from=build /opendc/scripts/envsubst-html.sh /docker-entrypoint.d/00-envsubst-html.sh
-COPY --from=build /opendc/build /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+FROM node:16-slim
+COPY --from=build /opendc /opendc
+WORKDIR /opendc
+CMD ./scripts/envsubst.sh; yarn start
diff --git a/opendc-web/opendc-web-ui/package.json b/opendc-web/opendc-web-ui/package.json
index ccf87193..52dcf8bf 100644
--- a/opendc-web/opendc-web-ui/package.json
+++ b/opendc-web/opendc-web-ui/package.json
@@ -60,7 +60,8 @@
         "precommit": "lint-staged",
         "dev": "next dev",
         "build": "next build",
-        "start": "next start"
+        "start": "next start",
+        "export": "next export -o build"
     },
     "browserslist": {
         "production": [
diff --git a/opendc-web/opendc-web-ui/scripts/envsubst-html.sh b/opendc-web/opendc-web-ui/scripts/envsubst-html.sh
deleted file mode 100755
index 8ca12e8a..00000000
--- a/opendc-web/opendc-web-ui/scripts/envsubst-html.sh
+++ /dev/null
@@ -1,19 +0,0 @@
-#!/bin/sh
-
-set -e
-
-# We can use simple version of envsubst execution as
-# envsubst < /usr/share/nginx/html/index.html.template > /usr/share/nginx/html/index.html
-# but it replaces everything that looks like environment variable substitution
-# so it affects `default values` approach.
-# we need to replace only provided environment variables.
-
-auto_envsubst() {
-  template_path="/usr/share/nginx/html/index.html.template"
-  output_path="/usr/share/nginx/html/index.html"
-  defined_envs=$(printf '${%s} ' $(env | cut -d= -f1))
-  envsubst "$defined_envs" < "$template_path" > "$output_path"
-}
-
-auto_envsubst
-exit 0
diff --git a/opendc-web/opendc-web-ui/scripts/envsubst.sh b/opendc-web/opendc-web-ui/scripts/envsubst.sh
new file mode 100755
index 00000000..d7ae9ecb
--- /dev/null
+++ b/opendc-web/opendc-web-ui/scripts/envsubst.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+set -e
+
+auto_envsubst() {
+    input_path="/opendc/.next.template"
+    output_path="/opendc/.next"
+
+    cp -r "$input_path" "$output_path"
+    find "$output_path" -type f -name '*.js' -exec perl -pi -e 's/%%(NEXT_PUBLIC_[_A-Z0-9]+)%%/$ENV{$1}/g' {} \;
+}
+
+auto_envsubst
+exit 0