Лучшие способы подключения к серверу, используя угловые CLI

Moshe Vilner.

Все, кто использовал Угловые CLI Знает, что это мощный инструмент, который может взять на себя работу в интернет-разработке на совершенно другой уровень. У него есть все общие задачи, такие как Live Releason, Tymdercript Transpiling, Minification и многое другое. И это все предварительно настроено и готовы к использованию с одной простой командой:

ng build, ng serve, ng test.

Но есть одна (и очень важная) задача, которая должна быть настроена после того, как приложение будет готово начать отображать некоторые данные с сервера …

Да, независимо от того, насколько великолепна угловая структура, а как быстро и исполняет свои компоненты – в конце цель SPA (приложение для одной страницы) состоит в том, чтобы взаимодействовать с сервером через HTTP-запросы.

И вот первое препятствие, которое появляется перед каждым угловым CLI Newbie: угловой проект работает на своем собственном сервере (который работает по умолчанию на http://localhost: 4200 ). Поэтому запросы на сервер API являются Кросс-домен И, как вы можете знать, безопасность веб-браузера запрещает создание перекрестных доменных запросов.

Подход № 1: прокси

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

ng serve  —-proxy-config proxy.conf.json

Что такое прокси, вы можете спросить? Ну, браузеры не позволяют вам сделать перекрестные домена запросов, но серверы делают. Использование параметра прокси означает, что вы сообщаете серверу Angular CLI для обработки запроса, отправленного из угловых и отправляйтесь на него с сервера разработки. Таким образом, тот, кто «разговаривает» с сервером API, является угловым сервером CLI.

Конфигурация прокси требует Proxy.conf.json Файл, который будет добавлен в проект. Это файл JSON с некоторыми основными настройками. Вот пример содержания Proxy.conf :

{  "/api/*": {    "target": "http://localhost:3000",    "secure": false,    "pathRewrite": {"^/api" : ""}  }}

Этот код означает, что все запросы, которые начинаются с API/ будет обижаться на http://localhost: 3000 (который является адресом сервера API)

Подход № 2: CORS

Безопасность браузера не позволяет сделать перекрестные запросы домена, если Контроль-разрешение-происхождение Заголовок существует в ответ сервера. После того, как вы настроили свой сервер API на «Ответить» с помощью этого заголовка, вы можете получать и опубликовать данные из другого домена.

Этот метод называется совместным общим ресурсом поперечного происхождения или CORS. Большинство общих серверов и серверных структур, такие как Node.js ‘ Экспресс или Java Spring Boot можно легко настроить, чтобы сделать доступны CORS.

Вот какой-то пример код, который устанавливает Node.js Express Server для использования CORS:

const cors = require('cors'); //<-- required installing 'cors' (npm i cors --save)const express = require('express');const app = express();app.use(cors()); //<-- That`s it, no more code needed!

Обратите внимание, что при использовании CORS, перед отправкой каждого из HTTP-запросов отправляются после запроса параметров (в том же URL), которые проверяют, если CORS Протокол понимается. Этот «двойной запрос» может повлиять на вашу работу.

Производственный подход

Хорошо, ваш угловой проект «говорит» плавно с сервером, получением и отправкой данных в среде разработчиков. Но время развертывания наконец пришло, и вам нужно ваше красивое и преобразительное угловое приложение для размещения где-то (далеко от Papa Angular CLI). Поэтому снова вы сталкиваетесь с той же проблемой: как сделать его подключение к серверу.

Только сейчас есть большая разница: в производственной среде (после запуска NG Build Команда), угловое приложение не более чем куча файлов HTML и JavaScript.

На самом деле решение о том, как провести заявку на Production Server – это архитектурное решение, а архитектура далеко за рамки этой статьи. Но есть один вариант, который я рекомендую вам рассмотреть.

Служить статические файлы с сервера API

Да, вы можете провести свой угловой проект (после того, как он имеет только файлы HTML и JavaScript) на одном сервере, откуда обслуживается данные (API).

Одним из преимуществ этой стратегии является то, что теперь вы не сталкиваетесь с любыми проблемами «кросс-домена», поскольку клиент и API на самом деле находятся на одном сервере!

Конечно, этот подход требует, чтобы сервер API был настроен правильно.

Вот код, который предоставляет «публичный» каталог, где могут быть размещены угловые файлы при использовании сервера Express Node:

app.use(express.static('public'));  //<-- public directory that contains all angular files

Обратите внимание, что в этом случае, как ваше приложение доступ к API в среде разработки, будет отличаться от того, как API доступа к нему при производстве. Таким образом, вам может потребоваться использовать различные URL-адреса HTTP в разных средах (например, API/пользователи/1 на Dev и Пользователи/1 При производстве). Вы можете использовать вариант окружающей среды Angular CLI для достижения этого:

// users.service.ts

const URL = 'users';return this.http.get(`${environment.baseUrl}/${URL}`);...

// example of environment.ts file:export const environment = {  production: false,  baseUrl: 'api',//<-- 'API/' prefix needed for proxy configuration };

// example of environment.prod.ts file:export const environment = {  production: true,  baseUrl: '', //<-- no 'API/' prefix needed};

Заключение

Угловая CLI без сомнения, очень мощный и надежный инструмент. Это делает нашу жизнь как разработчики переднего конца проще во многих отношениях. Но также требует от вас архитектурное решение о подключении к серверу API. Поэтому вам нужно четкое понимание различных способов, которыми может быть установлена связь клиент-сервер.

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

Веселитесь и дайте мне знать, как это происходит!

Оригинал: “https://www.freecodecamp.org/news/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c/”