refactor(webapp,www): compile webapp statically into www image

.github/workflows/main.yml

@@ -81,7 +81,3 @@ jobs:
         grep 'desec/' /var/log/syslog
         docker-compose -f docker-compose.yml -f docker-compose.test-api.yml down -v
         docker-compose down -v
-
-    - name: Webapp dependency installation check
-      run: |
-        docker-compose run webapp npm install

docker-compose.dev.yml

@@ -1,4 +1,4 @@
-version: '2.2'
+version: '2.3'
 
 # mostly extending from main .yml
 services:
@@ -68,12 +68,21 @@ services:
       driver: "json-file"
 
   webapp:
+    build:
+      context: www
+      target: webapp
     volumes:
-    - ./webapp/:/usr/src/app/
+    - ./www/webapp/:/usr/src/app/
     working_dir: /usr/src/app/
-    command: "npm run serve --fix"
+    command: bash -c "npm install && npm run serve --fix"
     environment:
     - CODESANDBOX_SSE=1  # so that ws: protocol ends up as auto: in node_modules/@vue/cli-service/lib/commands/serve.js
+    - CYPRESS_CACHE_FOLDER=/tmp/.cache  # https://github.com/cypress-io/cypress/issues/1281#issuecomment-404823001
+    - VUE_APP_DESECSTACK_NS=${DESECSTACK_NS}
+    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
+    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
+    - VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN}
+    - VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
     networks:
     - rearwebapp
     logging:

docker-compose.yml

@@ -1,8 +1,14 @@
-version: '2.2'
+version: '2.3'
 
 services:
   www:
-    build: www
+    build:
+      context: www
+      args:
+      - DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
+      - DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
+      - DESECSTACK_DOMAIN=${DESECSTACK_DOMAIN}
+      - DESECSTACK_NS=${DESECSTACK_NS}
     image: desec/dedyn-www:latest
     init: true
     cap_add:
@@ -12,7 +18,6 @@ services:
     - "443:443"
     volumes:
     - ${DESECSTACK_WWW_CERTS}:/etc/ssl/private:ro
-    - webapp_dist:/usr/share/nginx/html:ro
     - ./www/html:/var/www/html:ro
     environment:
     - DESECSTACK_DOMAIN
@@ -215,25 +220,6 @@ services:
         tag: "desec/nsmaster"
     restart: unless-stopped
 
-  webapp:
-    build: webapp
-    environment:
-    - CYPRESS_INSTALL_BINARY=0  # workaround as Cypress otherwise needs write access to /root/.cache/
-    - VUE_APP_DESECSTACK_NS=${DESECSTACK_NS}
-    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID}
-    - VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME}
-    - VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN}
-    - VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
-    volumes:
-    - ./webapp/:/usr/src/app/
-    - webapp_dist:/usr/src/app/dist
-    working_dir: /usr/src/app/
-    command: bash -c "npm install && npm run build -- --no-clean"
-    logging:
-      driver: "syslog"
-      options:
-        tag: "desec/webapp"
-
   rabbitmq:
     image: rabbitmq:3.8-alpine
     init: true
@@ -435,7 +421,6 @@ volumes:
   openvpn-server_logs:
   prometheus:
   rabbitmq_data:
-  webapp_dist:
   zones:
   celerybeat:
   gitzones_keys:

webapp/Dockerfile

@@ -1,6 +0,0 @@
-FROM node:lts
-RUN \
-  apt-get update \
-  && apt-get -y install gettext-base \
-  && apt-get clean \
-  && rm -rf /var/lib/apt/lists/*

www/Dockerfile

@@ -1,3 +1,29 @@
+FROM node:lts AS webapp
+RUN \
+  apt-get update \
+  && apt-get -y install gettext-base \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /usr/src/app
+
+COPY webapp/package.json /usr/src/app/
+RUN npm install
+
+ARG DESECSTACK_API_SEPA_CREDITOR_ID
+ARG DESECSTACK_API_SEPA_CREDITOR_NAME
+ARG DESECSTACK_DOMAIN
+ARG DESECSTACK_NS
+ENV VUE_APP_DESECSTACK_NS=${DESECSTACK_NS} \
+    VUE_APP_DESECSTACK_API_SEPA_CREDITOR_ID=${DESECSTACK_API_SEPA_CREDITOR_ID} \
+    VUE_APP_DESECSTACK_API_SEPA_CREDITOR_NAME=${DESECSTACK_API_SEPA_CREDITOR_NAME} \
+    VUE_APP_LOCAL_PUBLIC_SUFFIXES=dedyn.${DESECSTACK_DOMAIN} \
+    VUE_APP_EMAIL=support@desec.${DESECSTACK_DOMAIN}
+
+COPY webapp/ /usr/src/app/
+RUN npm run build -- --no-clean
+
+
 FROM nginx:mainline-alpine
 
 # Add dependencies for our scripts
@@ -17,6 +43,6 @@ VOLUME /var/www/html
 # mountable content for web app (remove default stuff in there)
 RUN rm /usr/share/nginx/html/*
 COPY html/503.html /usr/share/nginx/html
-VOLUME /usr/share/nginx/html
+COPY --from=webapp /usr/src/app/dist /usr/share/nginx/html
 
 CMD ["./entrypoint.sh"]

webapp/.gitignore → www/webapp/.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-/dist
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/