fix: high memory/cpu usage in dev

In development, the tutor-mfe plugin runs a separate container for every
MFE. This runs `npm run start` for each of the 9 MFEs, which causes the
developer laptops to crash and ice caps to melt.

Here, we adopt a different solution. By default, all MFEs run in a
single container, which is the same as the production container (with
caddy). Only the Caddyfile is different. This effectively resolves the
performance issue.

But to allow developers to hack on invidual MFEs, we also need to run
some of them in development mode, with `npm run start`. To do that, we
run separately only those MFEs for which the developer has a
bind-mounted directory that corresponds to the MFE repository. This
allows developers to keep working on MFEs with the help of `tutor mounts
...` command.

changelog.d/20230802_121750_regis_single_dev_container.md

@@ -0,0 +1 @@
+- [Improvement] Fix very high CPU and memory usage in development. We resolve this issue by running just a single container for all MFES, just like in production. To al;low developers to test their changes in Tutor, we run `npm run start` only for those MFEs that have a manual bind-mount that was created with `tutor mounts add .../frontend-app-mymfe`. (by @regisb)

tutormfe/patches/caddyfile

@@ -3,10 +3,5 @@
     request_body {
         max_size 2MB
     }
-    reverse_proxy /api/mfe_config/v1* lms:8000 {
-        # We need to specify the host header, otherwise it will be rejected with 400
-        # from the lms.
-        header_up Host {{ LMS_HOST }}
-    }
     import proxy "mfe:8002"
 }

tutormfe/patches/local-docker-compose-dev-services

@@ -1,17 +1,27 @@
-# MFE apps
-{% for app_name, app in iter_mfes() %}
-{{ app_name }}:
+mfe:
+    ports:
+        {%- for app_name, app in iter_mfes() %}
+        {%- if not iter_mounts(MOUNTS, app_name)|list %}
+        - {{ app["port"] }}:8002 # {{ app_name }}
+        {%- endif %}
+        {%- endfor %}
+
+{%- for app_name, app in iter_mfes() %}
+{%- set mounts = iter_mounts(MOUNTS, app_name)|list %}
+{%- if mounts %}
+{{ app_name }}: # Work on this MFE for development
     image: "{{ DOCKER_REGISTRY }}overhangio/openedx-{{ app_name }}-dev:{{ MFE_VERSION }}"
     ports:
         - "{{ app["port"] }}:{{ app["port"] }}"
     stdin_open: true
     tty: true
     volumes:
         - ../plugins/mfe/apps/mfe/webpack.dev-tutor.config.js:/openedx/app/webpack.dev-tutor.config.js:ro
-        {%- for mount in iter_mounts(MOUNTS, app_name) %}
+        {%- for mount in mounts %}
         - {{ mount }}
         {%- endfor %}
     restart: unless-stopped
     depends_on:
         - lms
-{% endfor %}
+{%- endif %}
+{%- endfor %}

tutormfe/templates/mfe/apps/mfe/Caddyfile

@@ -12,6 +12,12 @@
         }
     }
 
+    reverse_proxy /api/mfe_config/v1* lms:8000 {
+        # We need to specify the host header, otherwise it will be rejected with 400
+        # from the lms.
+        header_up Host {{ LMS_HOST }}
+    }
+
     {% for app_name, app in iter_mfes() %}
     @mfe_{{ app_name }} {
         path /{{ app_name }} /{{ app_name }}/*