Cách host một trang web Angular bằng Netlify và GitHub

Nếu bạn lưu trữ bản sao mã nguồn trang web của mình trong kho lưu trữ GitHub, bạn có thể sử dụng Netlify để host trang web đó.

Netlify cũng tự động triển khai lại (redeploy) trang web của bạn khi bạn đưa bất kỳ thay đổi mới nào vào nhánh kho lưu trữ mà bạn đang host.

Cách tạo một ứng dụng Angular cơ bản

Bạn có thể tạo một ứng dụng Angular đơn giản bằng trình chỉnh sửa như Visual Studio Code. Sau đó, bạn có thể lưu trữ trang web này bằng Netlify.

1. Tạo một ứng dụng Angular mới.
2. Tạo một trang chủ đơn giản. Thay thế mã trong tệp app.comComponent.html bằng nội dung trang đích sau:

   <div class="container-dark header">
     <h2>Our Business Website</h2>
   </div>
   <div class="container-white">
     <div class="content">
       <h2>Our Business Website</h2>
       <p>Learn how to design, develop, and maintain your professional website in no time.</p>
     </div>
   </div>
   <div class="container-orange">
     <div class="content">
       <h2>What We Do</h2>
       <p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
         maintenance and other website related topics.</p>
     </div>
   </div>
   <div class="container-white">
     <div class="content">
       <h2>About Us</h2>
       <p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
         visit us in person.</p>
     </div>
   </div>
   <div class="container-dark footer">
     <p>Copyright 2022</p>
   </div>

3. Thêm một số style cho ứng dụng Angular bằng cách thêm một số CSS vào tệp app.comComponent.css:

   * {
     font-family: "Arial", sans-serif;
   }
   .header {
     padding: 30px 50px;
   }
   .footer {
     padding: 5px 50px;
     text-align: center;
   }
   .container-dark {
     background-color: #202C39;
     color: white;
     display: flex;
     align-items: center;
   }
   .container-orange {
     background-color: #FFD091;
     color: #202C39;
   }
   .container-white {
     background-color: whitesmoke;
     color: #202C39;
   }
   .content {
     padding: 100px 25%;
     display: flex;
     flex-direction: column;
     line-height: 2rem;
     font-size: 1.2em;
     align-items: center;
     text-align: center;
   }

4. Thêm một số style cho ứng dụng Angular tổng thể trong styles.css:

   body {
     margin: 0;
     padding: 0;
   }

5. Để thử ứng dụng, hãy điều hướng đến thư mục gốc của ứng dụng bằng terminal hoặc dòng lệnh. Gõ lệnh ng serve:

   ng serve

6. Đợi code của bạn biên dịch và truy cập http://localhost:4200/ trong trình duyệt web để xem ứng dụng của bạn.

7. Trong tệp .browserslistrc, xóa iOS safari phiên bản 15.2-15.3. Điều này sẽ ngăn lỗi tương thích hiển thị trong bảng điều khiển khi bạn xây dựng dự án.

   last 1 Chrome version
   last 1 Firefox version
   last 2 Edge major versions
   last 2 Safari major versions
   last 2 iOS major versions
   Firefox ESR
   not ios_saf 15.2-15.3
   not safari 15.2-15.3

8. Xây dựng mã của bạn bằng lệnh ng build trong terminal:

   ng build

9. Trong tệp .gitignore, hãy xóa hoặc nhận xét dòng /dist. Việc xóa nó sẽ đảm bảo thư mục dist nằm trong tập hợp các tệp mà bạn đẩy vào kho GitHub của mình.

   # /dist

Cách đẩy code Angular của bạn lên GitHub

Bạn sẽ cần lưu trữ code của mình trong kho lưu trữ từ xa để Netlify truy cập mã nguồn.

Bạn có thể tạo kho lưu trữ mới trên GitHub và đẩy code trang web của bạn vào kho lưu trữ đó. Nếu bạn không quen với GitHub, trước tiên bạn nên hiểu một số tính năng cơ bản của GitHub.

1. Tạo kho lưu trữ mới trên GitHub. Bạn có thể thực hiện việc này bằng cách đăng nhập vào GitHub và nhấp vào New.

2. Nhập chi tiết cho kho lưu trữ mới của bạn. Đặt tên cho nó, ví dụ như “netlify-app” và mô tả. Không khởi tạo kho lưu trữ bằng tệp README, tệp .gitignore hoặc giấy phép.

3. Trong một terminal trên máy tính của bạn, hãy điều hướng đến thư mục nơi bạn đã lưu trữ ứng dụng Angular của mình. Chạy các lệnh sau để khởi tạo thư mục của bạn dưới dạng kho lưu trữ git:

   git init
   git add .
   git commit -m "first commit"

4. Đẩy code bên trong thư mục này vào kho lưu trữ từ xa mới mà bạn đã tạo trên GitHub. Thực hiện theo các lệnh git remote add original, git Branch và git Push do GitHub cung cấp trên trang kho lưu trữ từ xa của bạn:

   git remote add original <Your GitHub repo link>
   git branch -M main
   git push -u origin main

5. Bạn có thể xác nhận rằng code ứng dụng Angular hiện có trong kho lưu trữ GitHub từ xa bằng cách làm mới trang kho lưu trữ GitHub.

Cách sử dụng Netlify để host code của bạn

Để host code của bạn bằng Netlify, bạn sẽ cần cấp cho nó quyền truy cập vào mã nguồn GitHub của bạn. Netlify sau đó sẽ sử dụng thư mục dist của dự án Angular để xuất bản phiên bản code đã xây dựng của bạn.

Bạn có thể định cấu hình tất cả các cài đặt này bằng cách làm theo các bước cấu hình khi tạo trang web mới:

1. Đăng nhập hoặc đăng ký Netlify. Bạn có thể làm như vậy bằng thông tin đăng nhập GitHub của mình.

2. Từ trang tổng quan chính và trang danh sách trang web, hãy mở rộng Thêm trang web mới (Add new site) và chọn Nhập dự án hiện có (mport an existing project).

3. Chọn GitHub.

4. Nhấp vào Định cấu hình Netlify trên GitHub (Configure Netlify on GitHub).

5. Bấm vào Cài đặt (Install).

6. Netlify sẽ hiển thị danh sách kho lưu trữ GitHub của bạn. Chọn cái mà bạn muốn host. Ví dụ: nếu bạn đã đặt tên kho lưu trữ của mình là “netlify-app”, thì hãy chọn “netlify-app” từ danh sách.

7. Trong màn hình cấu hình, hãy để các trường Chủ sở hữu, Chi nhánh triển khai và thư mục Cơ sở (Owner, Branch to deploy, Base directory) ở giá trị mặc định của chúng. Nếu bạn đang xuất bản một nhánh cụ thể, chẳng hạn như nhánh “Production” riêng biệt, bạn có thể thêm nhánh đó vào trường Nhánh để triển khai (Branch to deploy. Thay đổi trường lệnh Build thành “ng build”.

   Đối với trường Thư mục xuất bản (Publish directory), nhập dist/<tên dự án của bạn>. Nếu bạn không biết tên dự án là gì, bạn có thể điều hướng đến thư mục dist của dự án để tìm nó ở đó. Ví dụ: “dist/netlify-app”.

8. Bấm vào Triển khai trang web (Deploy site).
9. Đợi quá trình triển khai hoàn tất. Quá trình này có thể mất vài phút và bạn có thể cần phải tải lại trang. Nếu mọi việc suôn sẻ, bạn sẽ có thể thấy quá trình triển khai thành công trong danh sách triển khai. Nhấp vào triển khai đã xuất bản của bạn, ví dụ: Production: main@HEAD.

10. Nhấp vào nút Open production deploy.

11. Giờ đây, bạn có thể xem trang web của mình trong một tab khác bằng cách sử dụng URL ở định dạng <generated-subdomain>.netlify.app. 

Host trang web của bạn bằng GitHub và Netlify

Hy vọng rằng bây giờ bạn có thể host thành công một trang web bằng GitHub và Netlify. Bạn có thể thiết lập triển khai tự động cho các nhánh nhất định của kho lưu trữ GitHub. Bằng cách này, bạn có thể tự động hóa việc triển khai trang web của mình.

Tìm hiểu ngay chương trình học công nghệ thông tin trực tuyến tại FUNiX ở đây:

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/angular-website-host-netlify-github/