summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-05 14:50:38 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2021-05-05 14:50:38 +0200
commite8bb95cb35ed1b02a85cf7cbea5bfc20fe0324c2 (patch)
tree1f3992d8045437774767556bf20d053b947ed164 /opendc-web/opendc-web-ui
parent3c805a50ca710e123aa18ad1bfa01ea4f1ee40d2 (diff)
build: Support runtime variables in frontend Docker image
This change adds support for dynamically specifying various variables for the frontend Docker image through environmental variables. Previously, these were embedded directly into the source code, which requires rebuilding the entire image to change these variables.
Diffstat (limited to 'opendc-web/opendc-web-ui')
-rw-r--r--opendc-web/opendc-web-ui/Dockerfile17
-rw-r--r--opendc-web/opendc-web-ui/public/index.html9
-rwxr-xr-xopendc-web/opendc-web-ui/scripts/envsubst-html.sh19
-rw-r--r--opendc-web/opendc-web-ui/src/api/routes/token-signin.js2
-rw-r--r--opendc-web/opendc-web-ui/src/api/socket.js2
-rw-r--r--opendc-web/opendc-web-ui/src/containers/auth/Login.js6
-rw-r--r--opendc-web/opendc-web-ui/src/index.js5
7 files changed, 41 insertions, 19 deletions
diff --git a/opendc-web/opendc-web-ui/Dockerfile b/opendc-web/opendc-web-ui/Dockerfile
index 20e16b08..7aa3a7bf 100644
--- a/opendc-web/opendc-web-ui/Dockerfile
+++ b/opendc-web/opendc-web-ui/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14 AS staging
+FROM node:15 AS staging
MAINTAINER OpenDC Maintainers <opendc@atlarge-research.com>
# Copy package details
@@ -6,21 +6,16 @@ COPY ./package.json ./yarn.lock /opendc/
RUN cd /opendc && yarn
# Build frontend
-FROM node:14 AS build
-
-ARG OPENDC_OAUTH_CLIENT_ID
-ARG OPENDC_API_BASE_URL
-ARG OPENDC_FRONTEND_SENTRY_DSN
+FROM node:15 AS build
COPY ./ /opendc
COPY --from=staging /opendc/node_modules /opendc/node_modules
RUN cd /opendc/ \
- && export REACT_APP_OAUTH_CLIENT_ID=$OPENDC_OAUTH_CLIENT_ID \
- && export REACT_APP_API_BASE_URL=$OPENDC_API_BASE_URL \
- && export REACT_APP_SENTRY_DSN=$OPENDC_FRONTEND_SENTRY_DSN \
- && yarn build
+ && yarn build \
+ && mv build/index.html build/index.html.template
# Setup nginx to serve the frontend
-FROM nginx:1.19
+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
diff --git a/opendc-web/opendc-web-ui/public/index.html b/opendc-web/opendc-web-ui/public/index.html
index 44a0d80f..da734797 100644
--- a/opendc-web/opendc-web-ui/public/index.html
+++ b/opendc-web/opendc-web-ui/public/index.html
@@ -33,7 +33,7 @@
<meta property="og:locale" content="en_US">
<!-- Google meta tags -->
- <meta name="google-signin-client_id" content="%REACT_APP_OAUTH_CLIENT_ID%">
+ <meta name="google-signin-client_id" content="$OAUTH_CLIENT_ID">
<meta name="google-site-verification" content="YIR4LkQTv6WmOdWv8MkeiUKni-0Yu3WHylLp4VvUMig"/>
<!-- CDN dependencies -->
@@ -52,6 +52,13 @@
gtag('js', new Date())
gtag('config', 'UA-84285092-3')
</script>
+ <script>
+ window.$$env = {
+ API_BASE_URL: "$API_BASE_URL",
+ OAUTH_CLIENT_ID: "$OAUTH_CLIENT_ID",
+ SENTRY_DSN: "$SENTRY_DSN",
+ };
+ </script>
</head>
<body>
<noscript>
diff --git a/opendc-web/opendc-web-ui/scripts/envsubst-html.sh b/opendc-web/opendc-web-ui/scripts/envsubst-html.sh
new file mode 100755
index 00000000..8ca12e8a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/scripts/envsubst-html.sh
@@ -0,0 +1,19 @@
+#!/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/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
index d6cff570..e40127f2 100644
--- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
+++ b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
@@ -1,5 +1,5 @@
export function performTokenSignIn(token) {
- const apiUrl = process.env.REACT_APP_API_BASE_URL || ''
+ const apiUrl = window.$$env['API_BASE_URL'] || ''
return fetch(`${apiUrl}/tokensignin`, {
method: 'POST',
diff --git a/opendc-web/opendc-web-ui/src/api/socket.js b/opendc-web/opendc-web-ui/src/api/socket.js
index 1c432167..884c4152 100644
--- a/opendc-web/opendc-web-ui/src/api/socket.js
+++ b/opendc-web/opendc-web-ui/src/api/socket.js
@@ -7,7 +7,7 @@ const callbacks = {}
export function setupSocketConnection(onConnect) {
const apiUrl =
- process.env.REACT_APP_API_BASE_URL ||
+ window.$$env['API_BASE_URL'] ||
`${window.location.protocol}//${window.location.hostname}:${window.location.port}`
socket = io.connect(apiUrl)
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 2f9726bf..9201c09a 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -32,15 +32,15 @@ class LoginContainer extends React.Component {
return (
<GoogleLogin
- clientId={process.env.REACT_APP_OAUTH_CLIENT_ID}
+ clientId={window.$$env['OAUTH_CLIENT_ID']}
onSuccess={this.onAuthResponse.bind(this)}
onFailure={this.onAuthFailure.bind(this)}
render={(renderProps) => (
<span onClick={renderProps.onClick} className="login btn btn-primary">
- <span className="fa fa-google" /> Login with Google
+ <span className="fa fa-google"/> Login with Google
</span>
)}
- ></GoogleLogin>
+ />
)
}
}
diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js
index 3517147e..bddf0b0e 100644
--- a/opendc-web/opendc-web-ui/src/index.js
+++ b/opendc-web/opendc-web-ui/src/index.js
@@ -12,10 +12,11 @@ setupSocketConnection(() => {
const store = configureStore()
// Initialize Sentry if the user has configured a DSN
- if (process.env.REACT_APP_SENTRY_DSN) {
+ const dsn = window.$$env['SENTRY_DSN']
+ if (dsn) {
Sentry.init({
environment: process.env.NODE_ENV,
- dsn: process.env.REACT_APP_SENTRY_DSN,
+ dsn: dsn,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 0.1,
})
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 17:49:37 +0000