Найкращі способи підключення до сервера за допомогою Angular CLI

Усі, хто використовував Angular CLI, знають, що це потужний інструмент, який може підняти роботу з розробки на передньому рівні на абсолютно інший рівень. У ній є всі загальні завдання, такі як перезавантаження в реальному часі, трансляція машинопису, мінімізація тощо. І все це заздалегідь налаштовано та готове до використання за допомогою однієї простої команди:

будувати, служити, тестувати.

Але є одне (і дуже важливе) завдання, яке потрібно налаштувати, як тільки програма буде готова почати показ деяких даних із сервера ...

Так, незалежно від того, наскільки велика є кутова рамка та наскільки швидко та швидкодіючі її компоненти - врешті-решт мета SPA (застосування однієї сторінки) полягає у взаємодії із сервером за допомогою HTTP-запитів.

І ось перша перешкода, яка виникає перед кожним новачком Angular CLI: проект Angular запускається на власному сервері (який за замовчуванням працює за адресою http: // localhost: 4200). Тому запити до сервера API є міждоменними, і, як ви можете знати, безпека веб-браузера вимикає запит крос-доменних запитів.

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

Звичайно, люди з Angular CLI передбачили цю проблему і навіть створили спеціальний варіант для запуску проекту Angular за допомогою конфігурації проксі:

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

Ви можете запитати проксі-сервер? Ну, браузери не дозволяють вам робити запити між доменами, але сервери це роблять. Використання параметра проксі означає, що ви повідомляєте сервер Angular CLI обробляти запит, надісланий від Angular, і повторно відправляти його з сервера розробки. Таким чином, той, хто "спілкується" з сервером API, - це сервер Angular CLI.

Конфігурація проксі вимагає до проекту додати файл proxy.conf.json. Це файл JSON з деякими основними налаштуваннями. Ось приклад вмісту proxy.conf:

{
  "/ api / *": {
    "target": "http: // localhost: 3000",
    "безпечний": хибний,
    "pathRewrite": {"^ / ​​api": ""}
  }
}

Цей код означає, що всі запити, які починаються з api /, будуть відтворені на http: // localhost: 3000 (що є адресою сервера API)

Підхід №2: CORS

Захист веб-переглядача не дозволяє вам робити запити між доменами, якщо у відповіді сервера не існує заголовка Control-Allow-Origin. Після налаштування сервера API на "відповідь" із цим заголовком ви можете отримувати та розміщувати дані з іншого домену.

Ця методика називається Cross Origin Sharing Resource Sharing, або CORS. Більшість поширених серверів та серверних рамок, таких як Node.js Express або Java Spring Boot, можна легко налаштувати для надання доступу до CORS.

Ось приклад коду, який встановлює сервер Node.js Express для використання CORS:

const cors = вимагати ('cors'); // <- необхідна установка 'cors' (npm i cors --save)
const express = вимагати ('express');
const app = express ();
app.use (cors ()); // <- Це все, більше коду не потрібно!

Зауважте, що при використанні CORS, перш ніж кожен HTTP-запит буде надісланий, він буде виконуватись після запиту OPTIONS (за тією ж URL-адресою), який перевіряє, чи розуміється протокол CORS. Цей "подвійний запит" може вплинути на вашу ефективність.

Виробничий підхід

Гаразд, ваш Angular проект плавно спілкується з сервером, отримує та надсилає дані в середовищі розробника. Але час розгортання нарешті настав, і вам потрібен ваш прекрасний і вишуканий кутовий додаток, щоб розмістити його десь (далеко від папи Angular CLI). Отже, ви знову стикаєтеся з тією ж проблемою: як змусити його підключитися до сервера.

Тільки зараз є велика різниця: у виробничому середовищі (після запуску команди ng build) додаток Angular - це не більше, ніж група файлів HTML та JavaScript.

Власне рішення про розміщення програми на виробничому сервері - це архітектурне рішення, і архітектура далеко виходить за межі цієї статті. Але є один варіант, який я рекомендую вам розглянути.

Подавати статичні файли з сервера API

Так, ви можете розмістити свій кутовий проект (раз у ньому є лише HTML та JavaScript файли) на тому самому сервері, з якого подаються дані (API).

Однією з переваг цієї стратегії є те, що зараз ви не стикаєтесь з жодними проблемами з "міждоменними", оскільки клієнт та API фактично на одному сервері!

Звичайно, такий підхід вимагає, щоб сервер API був правильно налаштований.

Ось код, який відкриває "загальнодоступний" каталог, де можна розміщувати кутові файли при використанні сервера Node Express:

app.use (express.static ('public')); // <- загальнодоступний каталог, який містить усі кутові файли

Зауважте, що в цьому випадку спосіб вашої програми отримує доступ до API в середовищі розробки буде відрізнятися від способу доступу до нього API при виробництві. Таким чином, вам може знадобитися використовувати різні URL-адреси HTTP у різних середовищах (як api / users / 1 у розробці та користувачі / 1 у виробництві). Для цього можна скористатися параметром середовища Angular CLI:

// users.service.ts
const URL = 'користувачі';
повернути this.http.get (`$ {environment.baseUrl} / $ {URL}`);
...
// приклад файлу environment.ts:
експортне середовище const = {
  виробництво: помилкове,
  baseUrl: 'api', // <- 'API /' префікс, необхідний для конфігурації проксі
};
// приклад файлу environment.prod.ts:
експортне середовище const = {
  виробництво: правда,
  baseUrl: '', // <- не потрібен префікс API / /
};

Висновок

Кутовий CLI - це, без сумніву, дуже потужний і надійний інструмент. Це полегшує нам життя як розробників на передньому кінці багатьма способами. Але це також вимагає прийняти архітектурне рішення щодо підключення до сервера API. Тому вам потрібно чітко розуміти різні способи встановлення зв'язку клієнт-сервер.

У цій статті перераховано два підходи до вирішення цього питання в середовищі розробника, а також одна рекомендація щодо архітектури виробництва.
Спробуйте пограти з різними збірками і подивіться, який з них вам зручніше і для вашої команди.

Повеселіться і дайте мені знати, як це йде!