Triển khai một ứng dụng Angular cho các trang GitHub với Angular CLI
Triển khai các ứng dụng Angular cho các trang GitHub là một cách tuyệt vời để lưu trữ chúng miễn phí. Angular là một khung JavaScript phổ biến để xây dựng các ứng dụng một trang.
Angular có giao diện dòng lệnh toàn diện hỗ trợ xây dựng và thiết lập nhanh các ứng dụng JavaScript. Angular CLI có một số lệnh để tạo, xây dựng, phục vụ và tạo các thành phần ứng dụng.
Bạn cũng có thể sử dụng CLI để triển khai các ứng dụng Angular tới các mục tiêu khác nhau, bao gồm cả các trang GitHub.
Mục Lục
Những gì bạn cần
Để tận dụng tối đa hướng dẫn này, bạn cần có các kỹ năng và công cụ sau:
- Bạn nên làm quen với những điều cơ bản về Angular, chẳng hạn như khái niệm về ứng dụng, cài đặt, URL, v.v.
- Bạn đã quen với những kiến thức cơ bản về GitHub và Git, như tạo tài khoản GitHub, tạo kho lưu trữ git (repo) và các trang GitHub (GH-pages).
- Bạn có một ứng dụng Angular đã sẵn sàng để triển khai.
- URL cơ sở của bạn nằm trên đường dẫn chính xác. Triển khai trang GH không thành công do đặt sai base-href (base-url).
- Một tài khoản GitHub.
- Một kho lưu trữ (repo) GitHub với mã ứng dụng.
Bây giờ bạn đã có tất cả những thứ này, hãy bắt đầu quá trình triển khai.
Quy trình triển khai
Để bắt đầu, bạn nên tạo một kho lưu trữ GitHub cho dự án của mình và đẩy mã vào chính / chủ chi nhánh.
Tiếp theo, tạo một nhánh GH-pages.
1. Tạo một chi nhánh GH-pages
Đây là một bản hack sẽ giúp bạn có được liên kết GH-pages để giúp thiết lập base-href.
Đầu tiên, tạo các trang GH trong kho lưu trữ cục bộ của bạn bằng lệnh sau:
git branch gh-pagesTiếp theo, kiểm tra từ chi nhánh chính đến các trang GH để chuyển tất cả mã.
git checkout gh-pagesSau đó, đẩy GH-pages sang GitHub để tạo một nhánh GH-pages từ xa.
git push origin gh-pages2. Nhận liên kết Repo
Trên thanh công cụ dưới tên repo, hãy nhấp vào Cài đặt> Trang.
Dưới Xây dựng và triển khailựa chọn Triển khai từ một chi nhánh. Tiếp theo, chọn trang gh như tên của chi nhánh, sau đó nhấp vào Tiết kiệm. Thao tác này sẽ tạo liên kết GH-pages ở trên cùng bên phải dưới nhãn GH-pages.
Tiếp theo, sao chép liên kết này đến trang web đã xuất bản như minh họa bên dưới. Bạn sẽ sử dụng liên kết để thiết lập base-ref trong quá trình triển khai.
3. Cài đặt Angular-CLI-GHpages
Gói angle-cli-ghpages là một công cụ mà Angular CLI sử dụng cho mục đích triển khai.
Điều hướng trở lại kho lưu trữ dự án cục bộ của bạn. Sau đó, cài đặt và chạy các trang angle-cli-ghpages bằng lệnh này:
ng add angular-cli-ghpages4. Triển khai ứng dụng
Để tạo ứng dụng trong phiên bản sản xuất, bạn phải kết nối ứng dụng đó với máy chủ từ xa trên GitHub.
Định cấu hình ứng dụng của bạn với máy chủ từ xa bằng cách chạy lệnh sau:
ng deploy --base-href=https:Nhớ thay liên kết trên bằng liên kết trực tiếp từ các trang GH
Một bản dựng thành công sẽ giống như hình minh họa bên dưới:
Tiếp theo, điều hướng đến GitHub và nhấp vào liên kết GH-pages để xem dự án đã triển khai của bạn.
Xin chúc mừng, bạn đã triển khai Ứng dụng Angular của mình!
Nếu liên kết chỉ hiển thị tệp README, vui lòng quay lại cài đặt GH-pages của GitHub. Đảm bảo nhánh đã chọn là trang gh và không phải là nhánh chính hoặc chính. Sau đó, cho nó năm phút và tải lại. Đôi khi GitHub cần thời gian để phản ánh các thay đổi.
Để tìm hiểu thêm về cách bạn có thể sử dụng Angular CLI trong triển khai, hãy truy cập tài liệu Angular.
Cách triển khai một ứng dụng Angular cho các trang GitHub
Có một số cách để triển khai ứng dụng Angular cho các trang GH, nhưng phương pháp này là dễ nhất. Bạn thiết lập liên kết repo GH-pages của mình và sử dụng liên kết này với Angular-CLI để triển khai ứng dụng của bạn lên các trang GitHub.
Bạn có thể làm được nhiều việc hơn nữa với Angular và Angular CLI. Hãy tự do khám phá. Sử dụng CLI để triển khai ứng dụng lên các trang GH để có khả năng hiển thị và lưu trữ miễn phí cho các ứng dụng của bạn.