Angular разработка с удаленной сборкой

В силу обстоятельств появилась необходимость работать на ноутбуке с 4гб памяти. Что такое 4гб в 2020 году, когда chrome сразу съедает 1,5 и окружение разработчика ещё 1,5. Сравнительно недавно я открыл для себя расширение VSCode для удалённой разработки, используя SSH. Оно отлично подходит для разработки серверной части: правка и отладка происходит прямо на сервере, никуда ничего не надо загружать. Но, что на счет клиентской части? Что если попробовать перенести ng serve на удалённый хост, а ноутбук использовать в качестве тонкого клиента?

Angular CLI под капотом использует webpack для отдачи файлов. Webpack обрабатывает файлы в памяти и передает в браузеру, используя webpack-dev-server. Первое, что необходимо, это сохранять вывод из памяти в файлы. Как раз этим занимается команда ng build, выводящая результат сборки приложения в каталог dist. Для отслеживания изменений следует добавить параметр ng build --watch. Далее достаточно запустить любой веб-сервер для отдачи файлов из dist каталога. Для целей разработки подойдёт любое решение, в официальной документации приводится следующий пример:

npx lite-server --baseDir="dist/my-project-name"

В простейшем примере на этом можно остановиться. Но в продукте, который разрабатывает моя команда, используется композиция сервисов на Docker и frontend - лишь один из сервисов, построенных на основе nginx

Dockerfile

FROM nginx:latest
COPY dist/apps/vepp /usr/share/nginx/html
RUN sed -i '/^}/i \ \ \ \ error_page  404 /index.html;' /etc/nginx/conf.d/default.conf

Соответственно в контейнере статика расположена в каталоге /usr/share/nginx/html. Достаточно прокинуть volume с артефактами сборки в нужный контейнер:

docker-compose.yaml

  ...
  vepp_front:
    image: docker-registry.com/team/vepp/front:5.14.0
    volumes:
      - /home/front/dist/apps/vepp/:/usr/share/nginx/html/
    labels:
      SERVICE_AUTHDOMAIN: my.${DOMAIN} localhost ${DOMAIN}
      SERVICE_CHECK_INTERVAL: 10s
  ...

Запустить ng build --watch, после этого docker-compose up и окружение заработает за исключением автообновления браузера, после пересборки приложения.