Dynamically set production app container config in entrypoint (#605)

* Add entrypoint script that dynamically sets vue args post-build in docker prod containers

* Update CI config for new production vars

* Update e2e tests to catch case where API cannot be reached

* Install `serve` as a real JS dependency rather than ad hoc server build installation

* Add .dockerignore to avoid pulling tests and errant node modules into containers

* Update PATH in Docker file to accommodate for local install of serve

* Better warnings when production container is ill-configured

* Trigger `.env` reading by listing field names in `environment`

.docker/app_dockerfile

@@ -6,12 +6,11 @@ WORKDIR /app
 
 EXPOSE 8081
 
-RUN npm install -g serve
-
 COPY webapp/package.json webapp/yarn.lock ./
 
 # Using a custom node_modules location to avoid mounting it outside of docker
 RUN --mount=type=cache,target=/root/.cache/yarn yarn install --frozen-lockfile --modules-folder /node_modules
+ENV PATH $PATH:/node_modules/.bin
 
 FROM base as development
 
@@ -20,11 +19,19 @@ RUN apt-get update \
     && apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
     && rm -rf /var/lib/apt/lists/*
 
-ENV PATH $PATH:/node_modules/.bin
 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,39 @@
+#!/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
+
+if [ -z "$VUE_APP_API_URL" ]; then
+    echo "VUE_APP_API_URL is unset and we are in production mode. Exiting."
+    echo ""
+    echo "Found settings:"
+    echo ""
+    env
+    echo ""
+    exit 1
+fi
+
+echo "Replacing env vars in Javascript files"
+echo "Settings:"
+echo ""
+echo "  API_URL: ${VUE_APP_API_URL}"
+echo "  LOGO_URL: ${VUE_APP_LOGO_URL}"
+echo "  HOMEPAGE_URL: ${VUE_APP_HOMPAGE_URL}"
+echo ""
+echo "Patching..."
+
+for file in $ROOT_DIR/js/app.*.js*; do
+    echo "$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
+
+echo "Done!"
+
+serve -s ${ROOT_DIR} -p 8081

.dockerignore

@@ -0,0 +1,3 @@
+**/node_modules
+**/cypress
+**/.env*

.github/workflows/ci.yml

@@ -142,9 +142,10 @@ jobs:
         run: |
           # Create a named docker network that all containers attach to
           docker network create nginx
-          # Set API runtime config for testing mode to disable auth
-          echo "PYDATALAB_TESTING=true" >> pydatalab/.env
-          docker compose --env-file pydatalab/.env --profile prod up -d --wait
+          # Add default API URL argument to Vue prod build
+          echo "VUE_APP_API_URL=http://localhost:5001" >> .env
+          # Launch production container profiles and wait for them to come up
+          docker compose up database api_dev app -d --wait
 
       - name: Run end-to-end tests
         uses: cypress-io/github-action@v6

docker-compose.yml

@@ -9,6 +9,10 @@ services:
       target: production
     volumes:
       - ./logs:/logs
+    environment:
+      - VUE_APP_API_URL
+      - VUE_APP_LOGO_URL
+      - VUE_APP_HOMEPAGE_URL
     ports:
       - "8081:8081"
     networks:

webapp/cypress/e2e/editPage.cy.js

@@ -29,7 +29,7 @@ describe("Edit Page", () => {
     cy.findByText("Add an item").should("exist");
     cy.findByText("# of blocks").should("exist");
     cy.wait(1000).then((x) => {
-      cy.contains("Server Error. Sample list not retreived.").should("not.exist");
+      cy.contains("Server Error. Sample list could not be retreived.").should("not.exist");
       expect(consoleSpy).not.to.be.called;
     });
   });

webapp/cypress/e2e/sampleTablePage.cy.js

@@ -35,7 +35,7 @@ describe("Sample table page", () => {
     // Can we wait for the server response instead of hard-coding
     // a wait time in ms?
     cy.wait(100).then((x) => {
-      cy.contains("Server Error. Sample list not retreived.").should("not.exist");
+      cy.contains("Server Error. Sample list could not be retreived.").should("not.exist");
       expect(consoleSpy).not.to.be.called;
     });
   });

webapp/package.json

@@ -35,6 +35,7 @@
     "highlight.js": "^11.7.0",
     "markdown-it": "^13.0.1",
     "mermaid": "^10.1.0",
+    "serve": "^14.2.1",
     "stream-browserify": "^3.0.0",
     "tinymce": "^5.10.9",
     "vue": "^3.2.4",