Các cách tốt nhất để kết nối với máy chủ bằng Angular CLI

Mọi người đã sử dụng Angular CLI đều biết rằng nó là một công cụ mạnh mẽ có thể đưa công việc phát triển front-end lên một cấp độ hoàn toàn khác. Nó có tất cả các tác vụ phổ biến như tải lại trực tiếp, dịch mã bản in, thu nhỏ và hơn thế nữa. Và tất cả đều được cấu hình sẵn và sẵn sàng sử dụng với một lệnh đơn giản:

ng xây dựng, ng phục vụ, ng thử nghiệm.

Nhưng có một nhiệm vụ (và một nhiệm vụ rất quan trọng) cần được cấu hình một khi ứng dụng đã sẵn sàng để bắt đầu hiển thị một số dữ liệu từ máy chủ.

Có, cho dù khung Angular tuyệt vời như thế nào, và các thành phần của nó hoạt động nhanh và hiệu quả như thế nào - cuối cùng, mục đích của SPA (ứng dụng một trang) là tương tác với máy chủ thông qua các yêu cầu HTTP.

Và đây là trở ngại đầu tiên xuất hiện trước mỗi người mới chơi Angular CLI: dự án Angular chạy trên máy chủ của chính nó (chạy theo mặc định tại http: // localhost: 4200). Do đó, các yêu cầu đến máy chủ API là tên miền chéo và, như bạn có thể biết, tính bảo mật của trình duyệt web không cho phép thực hiện các yêu cầu tên miền chéo.

Cách tiếp cận số 1: proxy

Tất nhiên, những người tại Angular CLI đã thấy trước vấn đề này và thậm chí đã xây dựng một tùy chọn đặc biệt để chạy một dự án Angular bằng cấu hình proxy:

ng phục vụ proxy-proxy-config proxy.conf.json

Proxy là gì, bạn có thể hỏi? Chà, trình duyệt don lồng cho phép bạn thực hiện các yêu cầu tên miền chéo, nhưng máy chủ thì có. Sử dụng tùy chọn proxy có nghĩa là bạn đã nói với máy chủ Angular CLI bằng cách xử lý yêu cầu được gửi từ Angular và gửi lại từ máy chủ phát triển. Theo cách này, người đã nói chuyện với máy chủ API với máy chủ API Angular là máy chủ Angular CLI.

Cấu hình proxy yêu cầu tệp proxy.conf.json được thêm vào dự án. Đây là một tệp JSON với một số cài đặt cơ bản. Dưới đây là một ví dụ về nội dung của proxy.conf:

{
  "/ api / *": {
    "mục tiêu": "http: // localhost: 3000",
    "an toàn": sai,
    "pathRewrite": {"^ / ​​api": ""}
  }
}

Mã này có nghĩa là tất cả các yêu cầu bắt đầu bằng api / sẽ được gửi lại thành http: // localhost: 3000 (là địa chỉ API máy chủ API)

Cách tiếp cận # 2: CORS

Bảo mật trình duyệt không cho phép bạn thực hiện các yêu cầu tên miền chéo trừ khi tiêu đề Control-Allow-Origin tồn tại ở phản hồi của máy chủ. Khi bạn đã định cấu hình máy chủ API của mình để ‘’ trả lời Hồi với tiêu đề này, bạn có thể tìm nạp và đăng dữ liệu từ một tên miền khác.

Kỹ thuật này được gọi là Chia sẻ tài nguyên nguồn gốc chéo, hoặc CORS. Hầu hết các máy chủ và khung máy chủ phổ biến như Node.js, Express hoặc Java Spring Boot có thể dễ dàng được cấu hình để cung cấp CORS.

Dưới đây là một số mã ví dụ đặt máy chủ Node.js Express sử dụng CORS:

const cors = Yêu cầu ('cors'); // <- yêu cầu cài đặt 'cors' (npm i cors --save)
const express = Yêu cầu ('express');
const app = express ();
app.use (cors ()); // <- Thế thôi, không cần thêm mã!

Lưu ý rằng khi sử dụng CORS, trước khi mỗi yêu cầu HTTP được gửi, nó sẽ theo sau yêu cầu TÙY CHỌN (tại cùng một URL) để kiểm tra xem giao thức CORS có được hiểu không. Yêu cầu gấp đôi này có thể ảnh hưởng đến hiệu suất của bạn.

Phương pháp sản xuất

Ok, dự án Angular của bạn đang nói chuyện trơn tru với máy chủ, nhận và gửi dữ liệu trong môi trường nhà phát triển. Nhưng thời điểm triển khai cuối cùng cũng đã đến, và bạn cần ứng dụng Angular đẹp và phù hợp của mình sẽ được lưu trữ ở đâu đó (cách xa Papa Angular CLI). Vì vậy, một lần nữa bạn phải đối mặt với cùng một vấn đề: làm thế nào để kết nối với máy chủ.

Chỉ bây giờ có một sự khác biệt lớn: trong môi trường sản xuất (sau khi chạy lệnh ng build), ứng dụng Angular không khác gì một loạt các tệp HTML và JavaScript.

Trên thực tế, quyết định về cách lưu trữ ứng dụng trên máy chủ sản xuất là một quyết định kiến ​​trúc và kiến ​​trúc vượt xa phạm vi của bài viết này. Nhưng có một lựa chọn tôi khuyên bạn nên cân nhắc.

Phục vụ các tệp tĩnh từ máy chủ API API

Có, bạn có thể lưu trữ dự án Angular của mình (một khi nó chỉ có các tệp HTML và JavaScript) trên cùng một máy chủ nơi dữ liệu (API) được phục vụ từ đó.

Một trong những lợi thế của chiến lược này là bây giờ bạn không phải đối mặt với bất kỳ vấn đề nào về tên miền chéo của Wikipedia, vì máy khách và API thực sự nằm trên cùng một máy chủ!

Tất nhiên, cách tiếp cận này yêu cầu máy chủ API API phải được cấu hình đúng.

Đây là đoạn mã hiển thị thư mục của cộng đồng trên mạng, nơi các tệp Angular có thể được lưu trữ khi sử dụng máy chủ Node Express:

app.use (express.static ('công khai)); // <- thư mục công cộng chứa tất cả các tệp góc

Lưu ý rằng trong trường hợp này, cách ứng dụng của bạn truy cập API trong môi trường phát triển sẽ khác với cách API truy cập vào sản xuất. Do đó, bạn có thể cần sử dụng các URL HTTP khác nhau trong các môi trường khác nhau (Giống như api / users / 1 tại dev và users / 1 khi sản xuất). Bạn có thể sử dụng tùy chọn môi trường Angular CLI sườn để đạt được điều này:

// users.service.ts
const URL = 'người dùng';
trả lại cái này.http.get (`$ {môi trường.baseUrl} / $ {URL}`);
...
// ví dụ về tệp môi trường.ts:
môi trường const const = {
  sản xuất: sai,
  baseUrl: 'api', // <- 'API /' cần thiết cho cấu hình proxy
};
// ví dụ về tệp môi trường.prod.ts:
môi trường const const = {
  sản xuất: đúng,
  baseUrl: '', // <- không cần tiền tố API / '
};

Phần kết luận

Angular CLI chắc chắn là một công cụ rất mạnh mẽ và mạnh mẽ. Nó làm cho cuộc sống của chúng tôi là nhà phát triển front end dễ dàng hơn theo nhiều cách. Nhưng nó cũng yêu cầu bạn đưa ra quyết định kiến ​​trúc về kết nối với máy chủ API API. Do đó, bạn cần có một sự hiểu biết rõ ràng về các cách thức khác nhau để giao tiếp giữa máy khách và máy chủ.

Bài viết này liệt kê hai cách tiếp cận xử lý vấn đề này trong môi trường nhà phát triển và cũng là một khuyến nghị về kiến ​​trúc sản xuất.
Hãy thử chơi với nhiều phần tổng hợp khác nhau và xem cái nào cảm thấy thuận tiện hơn cho bạn và nhóm của bạn.

Hãy vui vẻ và cho tôi biết làm thế nào nó đi!