Как упаковать приложения Angular (front-end) и Node.js (server) вместе

Question

Я создаю интерфейсное приложение Angular 8 и веб-приложение Node.js, использующее среду Express, которая служит в качестве внутреннего приложения. Серверное веб-приложение на основе Express предоставит REST API, который будет использоваться приложением Angular, которое, в свою очередь, может выполнять HTTP-вызовы внешним службам.

По конкретным причинам мне нужно распространятьдва приложения вместе. Я также хочу управлять разработкой обоих приложений как одного проекта. Я искал передовой опыт в Интернете, и я видел несколько подходов, таких как:

• Обслуживание приложения Angular почти как статический набор файлов в каталоге в веб-приложении Node.js
• Используйте пакет типа concurrently для одновременного запуска приложений Angular и Node.js, определив скрипт в файле package.json папки верхнего уровня.

Я думаю, что естьЕсть несколько способов достижения этого, и я надеюсь, что кто-то может поделиться подходом по проторенному пути, используя тот же или подобный стек.

Обновление 21 октября 2019 Я хочу предоставить некоторый контекст длямое конкретное требование. Я не планирую размещать это на внешнем сервере. В конечном счете, моя цель - создать приложение Electron, которое будет инкапсулировать интерфейс и веб-приложение. В настоящее время я создаю прототип для локальной разработки и выполнения и раздаю нескольким пользователям для ознакомления.

Answer 1

При развертывании приложения Angular оно должно быть доставлено в виде статических файлов активов (html, js, css или комплектов) и затем обслуживаться обычным веб-сервером. Итак, ваш первый подход выглядит правильно. При доступе к своему собственному бэкэнду вам не нужно заботиться о проблемах с CORS, поскольку запросы будут одного источника.

Вторая идея выглядит так, как будто вы хотите использовать сервер разработки Angular CLI, что не очень хорошая идея. для производства. Поэтому я бы не пошел по этому пути.

В качестве альтернативы вы могли бы использовать контейнеры и предоставить Angular-контейнер для внешнего интерфейса (например, используя nginx для обслуживания ресурсов) и второй контейнер для приложения узла. Они могут быть интегрированы с использованием правильно настроенного обратного прокси-сервера или развернуты в kubernetes в качестве модуля со входом впереди (который в конце концов является обратным прокси-сервером).

Answer 2

Набор инструментов Nrwl Nx идеально подходит для этого. Он используется на предприятиях для установок моно-репо, особенно Angular и Express / NestJ. Вот статья, которая служит руководством для начала работы с ней

https://blog.nrwl.io/building-full-stack-applications-using-angular-cli-and-nx-5eff205248f1

Answer 3

Если Google Cloud Platform является опцией, создайте проект и разместите внешние и внутренние приложения.

1. Хостинг Firebase
   • использование хостинга Firebase для приложения Angular
   • Настройка перезаписи хостинга для перенаправления маршрутов "API" в Cloud Run
2. Google Cloud Run
   • Использование Cloud Run для обслуживания приложения NodeJs