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 и окружение заработает за исключением автообновления браузера, после пересборки приложения.

Похожие записи

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

#local variable внутри *ngIf

Представлены 2 варианта решения, как сослаться на локальную переменную шаблона (#myVar) за пределами шаблона:

  • @ViewChild
  • @ViewChildren
13 февраля 2019 г. в Angular

Angular attribute setter

Пример задания значения булева Input свойства как директивы, на примере:

09 октября 2018 г. в Angular