Express.js — это платформа веб-приложений для Node.js, предназначенная для создания веб-приложений. В этой серии статей я шаг за шагом объясню, как я реализовал экспресс-сервер с некоторыми расширенными функциями, которые я использую для мое одностраничное приложение, созданное с помощью Angular 7.
Я расскажу о 7 основных проблемах, которые я решил в разных статьях:
- "начиная"
- обслуживать файлы из корзины
- перенаправить некоторые вызовы на внешнюю службу
- перенаправлять запросы с http на https
- перенаправлять не-www на www-запросы
- ограничить соединения и предотвратить DDoS
- обработать кеш
Во второй статье я расскажу, как обслуживать файлы, размещенные во внешнем сегменте.
Справочный репозиторий
Рабочий пример этого проекта доступен по адресу:
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, это первый шаг для бессерверного подхода
- разделение сервера и приложения позволяет вам добавлять некоторые расширенные функции, если вам нужно: ваш сервер может обрабатывать несколько приложений в разных корзинах или одно и то же приложение может обслуживаться разными серверами в разных контекстах
Следующим шагом вашего экспресс-путешествия является обработка некоторых специальных маршрутов и перенаправление их на внешний сервер: перенаправить некоторые вызовы на внешнюю службу.