Express.js — это платформа веб-приложений для Node.js, предназначенная для создания веб-приложений. В этой серии статей я шаг за шагом объясню, как я реализовал экспресс-сервер с некоторыми расширенными функциями, которые я использую для мое одностраничное приложение, созданное с помощью Angular 7.

Я расскажу о 7 основных проблемах, которые я решил в разных статьях:

  1. "начиная"
  2. обслуживать файлы из корзины
  3. перенаправить некоторые вызовы на внешнюю службу
  4. перенаправлять запросы с http на https
  5. перенаправлять не-www на www-запросы
  6. ограничить соединения и предотвратить DDoS
  7. обработать кеш

Во второй статье я расскажу, как обслуживать файлы, размещенные во внешнем сегменте.

Справочный репозиторий

Рабочий пример этого проекта доступен по адресу:

https://github.com/mzuccaroli/express_server_for_angular_example основная ветка содержит окончательный полный проект, но для каждой отдельной статьи есть отдельная ветка, для этой ссылки: https://github.com/mzuccaroli/express_server_for_angular_example /tree/feature/angular_from_bucket

Почему вы должны использовать ведро

Когда вы работаете с одностраничным приложением JavaScript, например с Angular, рекомендуется размещать все статические файлы в специальном репозитории, таком как Amazon s3. ведро. С небольшой модификацией вашего базового экспресс-сервера вы сможете отделить работающий сервер от приложения angular. Таким образом, вы сможете воспользоваться преимуществами обоих решений: запустите небольшой и сверхоптимизированный экспресс-сервер в выделенной среде и размещайте статические файлы js и активы в более дешевой корзине.

Предположим, что копия сборки вашего приложения развернута на http://static.test.com.s3-website-eu-west-1.amazonaws.com. Вы можете начать с базового сервера, созданного в моей предыдущей статье, и внести некоторые изменения в код.

Прежде всего, вы можете сохранить адрес корзины в переменной:

const _bucketAddress = http://static.test.com.s3-website-eu-west-1.amazonaws.com;

Подавать статические файлы из корзины

В вашем коде найдите часть обработки статических файлов и измените ее с помощью:

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

Подавать пути приложений из корзины

Найдите код путей приложения и измените его с помощью:

основная модификация приложения довольно проста, обратите внимание, что вы можете добавить расширенную обработку URL, если вам это нужно: типичным примером может быть обслуживание различных языковых сборок на выделенных серверах, если вам нужна дополнительная информация о многоязычное приложение с Angular вы можете посмотреть в этой статье

Теперь вы можете поместить свое приложение Angular в корзину и запустить

$узел server.js

откройте браузер и перейдите по адресу http://localhost:4100, как видите, приложение будет работать нормально.

Обратите внимание, что эти небольшие изменения являются большими улучшениями для вашего приложения:

  • код сервера и код приложения полностью разделены и могут быть развернуты с использованием различных методов и конвейеров.
  • ваш экспресс-сервер представляет собой небольшое приложение JavaScript и может легко стать лямбда-функцией, если вы используете среду Amazon, это первый шаг для бессерверного подхода
  • разделение сервера и приложения позволяет вам добавлять некоторые расширенные функции, если вам нужно: ваш сервер может обрабатывать несколько приложений в разных корзинах или одно и то же приложение может обслуживаться разными серверами в разных контекстах

Следующим шагом вашего экспресс-путешествия является обработка некоторых специальных маршрутов и перенаправление их на внешний сервер: перенаправить некоторые вызовы на внешнюю службу.