Add entrypoint script that dynamically sets vue args post-build in do…

…cker prod containers

.docker/app_dockerfile

@@ -25,6 +25,15 @@ CMD [ "yarn", "serve", "--port", "8081"]
 
 FROM base as production
 ENV NODE_ENV production
+
+# These get replaced by the entrypoint script for production builds.
+# Set the real values in `.env` files or an external docker-compose.
+ARG VUE_APP_API_URL=magic-api-url
+ARG VUE_APP_LOGO_URL=magic-logo-url
+ARG VUE_APP_HOMEPAGE_URL=magic-homepage-url
+
 COPY webapp ./
 RUN /node_modules/.bin/vue-cli-service build
-CMD [ "serve", "-s", "dist", "-p", "8081" ]
+
+COPY ./.docker/app_entrypoint.sh /app/
+CMD [ "/bin/bash", "-c", "/app/app_entrypoint.sh" ]

.docker/app_entrypoint.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+# Patch the built app to use the specified environment variables
+# at runtime, then serve the app
+#
+# See https://stackoverflow.com/questions/53010064/pass-environment-variable-into-a-vue-app-at-runtime for inspiration.
+#
+set -e
+ROOT_DIR=/app/dist
+
+echo "Replacing env vars in Javascript files"
+for file in $ROOT_DIR/js/app.*.js*; do
+    echo "Patching $file"
+    sed -i "s|magic-api-url|${VUE_APP_API_URL}|g" $file
+    sed -i "s|magic-logo-url|${VUE_APP_LOGO_URL}|g" $file
+    sed -i "s|magic-homepage-url|${VUE_APP_HOMEPAGE_URL}|g" $file
+    done
+
+serve -s ${ROOT_DIR} -p 8081