Angular Trong 5 Phút: Angular HTTPS Development Environment

Angular HTTPS Development Environment

Trong khi lập trình ứng dụng với Angular, chúng ta có thể cần phải sử dụng HTTPS để có thể làm cho application work. Ví dụ như WebRTC chẳng hạn. Lúc này, setup HTTPS như thế nào để bạn có thể làm việc được. Trong bài này, chúng ta sẽ sử dụng Angular CLI và config HTTPS thông qua thư viện mkcert.

1. Chuẩn bị một Angular Application

Để bắt đầu chúng ta sẽ tạo một project mới bằng Angular CLI, hoặc sử dụng trên chính project của các bạn (được tạo từ Angular CLI). Các bạn có thể để chọn default bằng cách nhấn enter vài lần.

$ ng new secure-app

Sau đó mở project bằng editor tùy thích, rồi khởi chạy project bằng câu lệnh ng serve và mở app ở http://localhost:4200 để xem.

2. Install mkcert

Hướng dẫn cài đặt ở trang repo của mkcert

Hướng dẫn cài đặt mkcert

Trên Windows các bạn có thể tải về bộ cài mkcert hoặc sử dụng Chocolatey.

3. Install cert

Để bắt đầu install cert cho máy của bạn, chúng ta sẽ chạy lệnh sau đây.

Lưu ý: đối với Windows, bạn cần chạy PowerShell với quyền administrator.

mkcert -install

Kết quả có được như sau:

4. Generate cert và config Angular CLI

Chúng ta cần di chuyển vào project directory, sau đó chạy lệnh sau để generate cert. Bạn có thể điền cả test domain của bạn để generate.

mkcert dev-domain.test localhost 127.0.0.1 ::1

Kết quả sẽ có được như hình:

Tiếp theo bạn mở angular.json file, và update mục serve như hình dưới.

Sau cùng là chạy ng serve và vào link sau để thấy được kết quả https://localhost:4200.

Lưu ý: tên file sẽ là tên được generate ở bước trên.

5. Lời kết

Với vài bước đơn giản, bạn đã có thể có một ứng dụng Angular chạy trên HTTPS. Các bước thực hiện khá giống nhau khi ở các môi trường Windows, MacOS, Linux.

Tuy nhiên, hiện tại mkcert chưa hỗ trợ Firefox ở trên Windows. Nên có thể bạn phải sử dụng Chrome để thay thế hoặc sử dụng một giải pháp khác.