Hướng dẫn cách deploy ứng dụng lên Netlify A-Z

Với khả năng tích hợp CI/CD mạnh mẽ, giao diện thân thiện và đặc biệt là gói Free Tier cực kỳ hào phóng, Netlify là lựa chọn hàng đầu cho các Frontend Developer muốn đưa ứng dụng web của mình “go live” ngay lập tức mà không tốn chi phí server. Trong bài viết này, Tino sẽ hướng dẫn bạn cách deploy ứng dụng lên Netlify chi tiết, từ đơn giản đến phức tạp.

Tổng quan về Netlify

Netlify là gì?

Netlify là một nền tảng điện toán đám mây cung cấp dịch vụ hosting “all-in-one” dành cho các ứng dụng web hiện đại và trang web tĩnh (Static Sites). Hiểu một cách đơn giản, nền tảng này đóng vai trò là “cầu nối” tự động giúp bạn đưa source code từ các kho lưu trữ như GitHub, GitLab hay Bitbucket trực tiếp ra Internet chỉ trong vài giây mà không cần phải thuê server hay cấu hình FTP phức tạp.

Điểm đặc biệt khiến Netlify trở thành tiêu chuẩn của các Web Developer hiện nay là khả năng tích hợp sẵn quy trình CI/CD. Nghĩa là mỗi khi bạn đẩy (push) một đoạn code mới lên Git, Netlify sẽ tự động phát hiện, build lại dự án và cập nhật nội dung mới nhất lên website ngay lập tức.

Một số ưu điểm nổi bật của Netlify

Không phải ngẫu nhiên mà Netlify được xem là “đối trọng” lớn nhất của Vercel. Dưới đây là những lý do khiến nền tảng này được hàng triệu lập trình viên tin dùng:

• Quy trình Deploy tự động và đơn giản: Bạn có thể quên đi việc upload file thủ công qua FileZilla. Với Netlify, bạn chỉ cần kết nối tài khoản Git, mọi việc từ build source code đến publish website đều được thực hiện tự động. Thậm chí, bạn có thể deploy thủ công bằng cách… kéo thả thư mục vào trình duyệt.
• Mạng lưới CDN toàn cầu: Netlify không đặt website của bạn trên một máy chủ đơn lẻ. Thay vào đó, nội dung được phân phối trên hệ thống CDN đặt tại nhiều quốc gia. Điều này giúp website tải cực nhanh dù người truy cập ở Việt Nam hay Hoa Kỳ.
• HTTPS/SSL miễn phí: Bảo mật là yếu tố xếp hạng quan trọng của Google. Netlify tự động cung cấp và gia hạn chứng chỉ SSL miễn phí từ Let’s Encrypt cho mọi domain trỏ về nó, giúp website của bạn luôn có ổ khóa xanh an toàn.
• Tính năng Deploy Previews (Xem trước bản build): Đây là tính năng “ăn tiền” của Netlify. Mỗi khi bạn tạo một Pull Request trên Git, Netlify sẽ tạo ra một đường link riêng biệt (tách biệt với trang chính thức) để bạn xem trước các thay đổi. Điều này cực kỳ hữu ích khi làm việc nhóm hoặc gửi demo cho khách hàng duyệt trước khi public.
• Serverless Functions: Dù là hosting cho web tĩnh, nhưng Netlify cho phép bạn chạy các đoạn mã backend (API) thông qua Netlify Functions (xây dựng trên nền tảng AWS Lambda) mà không cần quản lý server.
• Khả năng Rollback tức thì: Nếu bản cập nhật mới bị lỗi, bạn có thể quay lại phiên bản cũ chỉ bằng một cú click chuột trên giao diện quản trị, đảm bảo trải nghiệm người dùng không bị gián đoạn.
• Gói Free Tier hào phóng: Đối với các dự án cá nhân, blog hoặc website doanh nghiệp nhỏ, gói miễn phí của Netlify cung cấp băng thông và tài nguyên dư dả để sử dụng mà không tốn một đồng chi phí nào.

Chuẩn bị trước khi deploy

1. Source Code đã hoạt động ổn định ở Local

Đây là nguyên tắc bất di bất dịch. Trước khi nghĩ đến việc deploy, hãy chắc chắn rằng ứng dụng của bạn đã chạy hoàn hảo trên máy tính cá nhân (Localhost).

• Hãy chạy thử lệnh npm run build (hoặc yarn build) trên máy của bạn trước để xem có lỗi biên dịch nào không.
• Nếu code chạy ở máy bạn còn lỗi, chắc chắn nó sẽ không thể chạy trên Netlify.

2. Đẩy Source Code lên Git (GitHub, GitLab hoặc Bitbucket)

Mặc dù Netlify có hỗ trợ kéo thả file thủ công, nhưng cách làm chuyên nghiệp và được khuyên dùng nhất hiện nay là deploy thông qua Git.

• Bạn cần có tài khoản tại một trong ba nền tảng: GitHub, GitLab hoặc Bitbucket.
• Đảm bảo source code mới nhất đã được push lên repository (kho chứa code) của bạn.

Lưu ý quan trọng: Trong file .gitignore, hãy chắc chắn bạn đã loại bỏ thư mục node_modules. Netlify sẽ tự động cài đặt các thư viện dựa trên file package.json của bạn. Đẩy node_modules lên chỉ làm nặng kho chứa và gây lỗi không đáng có.

3. Nắm rõ thông số Build

Khi kết nối với Netlify, hệ thống sẽ hỏi bạn 2 thông số quan trọng. Nếu điền sai, web sẽ chỉ hiện trang trắng. Bạn cần kiểm tra trong file package.json để biết chính xác, hoặc tham khảo bảng thông dụng dưới đây:

• ReactJS (Create React App):
  • Build command: npm run build
  • Publish directory: build
• Vite (Vue, React mới):
  • Build command: npm run build
  • Publish directory: dist
• Next.js:
  • Build command: npm run build (Hoặc next build)
  • Publish directory: .next (Netlify thường tự động nhận diện Next.js nên bạn ít khi phải chỉnh thủ công).
• Angular:
  • Build command: ng build
  • Publish directory: dist/tên-project-của-bạn

4. Tài khoản Netlify

Tất nhiên, bạn cần truy cập trang chủ Netlify.com để đăng ký một tài khoản.

Lời khuyên: Hãy chọn “Sign up with GitHub” (hoặc GitLab/Bitbucket). Việc này giúp liên kết tài khoản ngay lập tức, bỏ qua các bước xác thực rườm rà và giúp Netlify dễ dàng truy cập vào kho code của bạn để deploy.

Hướng dẫn cách deploy ứng dụng lên Netlify A-Z

Trong hướng dẫn này, Tino sẽ sử dụng một mẫu website Portfolio (CV cá nhân) tuyệt đẹp được viết bằng HTML/CSS/JS thuần. Mẫu này có ưu điểm là rất nhẹ, cấu trúc đơn giản và tỉ lệ deploy thành công là 100%.

Link dự án mẫu: https://github.com/codewithsadee/vcard-personal-portfolio

Tino sẽ hướng dẫn bạn từ phần chuẩn bị mã nguồn đến phần deploy.

Chuẩn bị Source Code mẫu (Demo)

Nếu đã có sẵn mã nguồn, bạn có thể bỏ qua bước này.

Fork dự án về GitHub

Trước tiên, bạn hãy sao chép dự án này sang tài khoản GitHub của mình để tiện cho việc deploy tự động (Cách 2).

Bước 1: Đăng nhập vào tài khoản GitHub của bạn.

Bước 2: Truy cập vào đường link dự án mẫu: https://github.com/codewithsadee/vcard-personal-portfolio

Bước 3: Nhìn lên góc trên bên phải màn hình, nhấn vào nút Fork.

Bước 4: Nhấn Create Fork. Lúc này, toàn bộ source code đã nằm trong kho chứa (Repository) của bạn.

Tải Source Code về máy

Để thực hành cách deploy thủ công (Dành cho Cách 1), bạn cần có file ở dưới máy tính.

Bước 1: Tại trang GitHub vừa Fork xong, bạn nhấn nút màu xanh Code.

Bước 2: Chọn Download ZIP.

Quan trọng: Sau khi tải về, hãy giải nén file ZIP đó ra. Bạn sẽ thu được một thư mục (Folder) chứa file index.html và các thư mục con assets.

Cách 1: Deploy thủ công bằng kéo thả (Netlify Drop)

Đây là cách “mì ăn liền”, phù hợp khi bạn muốn test nhanh một giao diện hoặc làm landing page đơn giản mà không muốn cài đặt Git.

Bước 1: Truy cập vào Netlify.com và đăng nhập.

Lời khuyên: Nên đăng nhập bằng tài khoản Github và tiến hành liên kết 2 ứng dụng để tiện cho cách 2.

Sau khi đăng nhập, bạn có thể được yêu cầu chọn các tùy chọn gợi ý để Netlify cá nhân hóa trải nhiệm. Có thể nhấn Skip để vào Dashboard.

Bước 2: Tại màn hình quản trị, bạn tìm dòng chữ: …or deploy manually.

Bước 3: Ngay bên dưới có ghi: “Drag and drop your project folder here” (Kéo và thả thư mục dự án vào đây).

Bạn hãy mở thư mục trên máy tính và kéo trọn vẹn thư mục dự án vừa giải nén ở trên và thả vào khu vực đó.

Lưu ý: Hãy kéo Folder đã giải nén, đừng kéo file ZIP.

Bước 5: Chờ khoảng 5-10 giây để Netlify tải dữ liệu lên. Khi hoàn tất, bạn sẽ thấy trạng thái Published (Màu xanh) và một đường link ngẫu nhiên (ví dụ: tên-gì-đó.netlify.app).

Bấm vào link để xem thành quả.

Nhược điểm: Với cách này, mỗi lần bạn sửa nội dung (ví dụ sửa số điện thoại trong file HTML), bạn phải lưu file lại và kéo thả lên Netlify một lần nữa để cập nhật. Rất mất công! Đó là lý do chúng ta nên dùng Cách 2.

Cách 2: Deploy tự động từ Git (Khuyên dùng)

Đây là cách làm chuyên nghiệp chuẩn CI/CD. Netlify sẽ kết nối trực tiếp với GitHub của bạn. Mỗi khi bạn sửa code trên GitHub, Netlify tự động cập nhật website ngay lập tức.

Bước 1: Tại trang chủ Netlify, nhấn nút Add new project -> Chọn Import an existing project.

Bước 2: Chọn nút GitHub (hoặc GitLab/Bitbucket tùy nơi bạn lưu code).

Một cửa sổ hiện ra yêu cầu cấp quyền, hãy nhấn Authorize Netlify để đồng ý.

Netlify có thể sẽ yêu cầu bạn nhập mã xác thực được gửi qua email bạn dùng để tạo tài khoản Github.

Bước 3: Danh sách các dự án trên GitHub của bạn sẽ hiện ra. Hãy chọn đúng dự án vcard-personal-portfolio mà bạn đã Fork ở phần chuẩn bị.

Bước 3: Vì mẫu Portfolio này chỉ là HTML/CSS thuần (Web tĩnh), nên cấu hình cực kỳ đơn giản:

• Branch to deploy: Chọn main (hoặc master).
• Base directory: Để trống.
• Build command: Để trống (Vì không cần biên dịch như React hay Vue).
• Publish directory: Để trống (Netlify sẽ tự hiểu file index.html nằm ở thư mục gốc).

Lưu ý: Nếu bạn dùng React/Vue, bạn mới cần điền lệnh npm run build vào ô Build command.

Bước 4: Nhấn nút Deploy vcard-personal-portfolio.

Netlify sẽ chuyển bạn sang màn hình Site Overview. Bạn sẽ thấy dòng trạng thái:

1. Site deploy in progress (Màu vàng – Đang chạy).
2. Sau khoảng 15-30 giây: Published (Màu xanh – Hoàn tất).

Bây giờ, bạn hãy nhấp vào đường link (tên-gì-đó.netlify.app) để chiêm ngưỡng website của mình đã xuất hiện trên Internet.

Để kiểm chứng, bạn có thể thử sửa một dòng text trên GitHub xem, bạn sẽ thấy web tự động cập nhật chỉ sau vài giây!

Hướng dẫn trỏ tên miền riêng về Netlify

Như bạn thấy ở trên, sau khi deploy xong, Netlify cấp cho chúng ta một đường dẫn ngẫu nhiên. Rõ ràng, không ai có thể nhớ nổi địa chỉ này và nó cũng không tốt cho SEO hay xây dựng thương hiệu.

Bước tiếp theo, chúng ta sẽ đổi nó thành tên miền riêng (ví dụ: tino-demo.com hay nguyenvan-a.vn).

Bước 1: Tại giao diện quản lý trang web (Site Overview) của Netlify, bạn nhấn vào tab “Domain management”.

Bước 2: Tại mục Production domains, nhấn vào nút “Add a domain” -> chọn Add a domain you already own.

Bước 3: Nhập tên miền bạn đã mua (Ví dụ: my-portfolio.com) vào ô trống và nhấn Verify.

Sau đó, nhấn Add domain.

Bước 5: Lúc này, Netlify sẽ hiện cảnh báo màu vàng “Pending DNS verification” vì tên miền chưa được trỏ về IP của Netlify.

Hãy đăng nhập vào trang quản trị tên miền và tạo 2 bản ghi (Record) sau:

Bản ghi A:

• Tên: @ (tên miền của bạn)
• Giá trị: 75.2.60.5

Bản ghi CNAME:

• Tên: www
• Giá trị: [tên-site-của-bạn].netlify.app (ví dụ: tranquil-froyo-180bb5.netlify.app)

Sau khi lưu cấu hình DNS, bạn cần chờ từ 15 phút đến 24 giờ để hệ thống cập nhật toàn cầu.

Kích hoạt bảo mật SSL miễn phí (HTTPS)

Bước 1: Sau khi bạn trỏ DNS thành công ở bước trên, hãy quay lại mục Domain management trong Netlify.

Bước 2: Kéo xuống phần HTTPS.

Bước 3: Nếu bạn thấy dòng chữ “Waiting on DNS propagation”, hãy kiên nhẫn chờ một chút. Bạn có thể nhấn nút “Verify DNS configuration” để thúc đẩy quá trình kiểm tra nhanh hơn.

Khi hoàn tất, Netlify sẽ hiện thông báo “DNS verification was successful”.

Lúc này, bạn hãy thử truy cập vào https://tên-miền-của-bạn.com, website đã hoạt động mượt mà với ổ khóa bảo mật an toàn.

Kết quả:

Xử lý lỗi thường gặp khi cài SSL: Nếu sau 24h mà SSL vẫn chưa được kích hoạt (vẫn báo lỗi Not Secure), nguyên nhân thường gặp nhất là do:

• Cấu hình DNS sai (Thừa record A cũ trỏ về hosting khác).
• Chưa xóa record IPv6 (AAAA) cũ.

Hãy kiểm tra kỹ lại phần quản trị tên miền nhé!

Kết luận

Như vậy, Tino đã hướng dẫn bạn hoàn tất quy trình deploy ứng dụng lên Netlify. Có thể thấy, Netlify là một giải pháp “cứu cánh” tuyệt vời cho các Frontend Developer, giúp tiết kiệm đáng kể thời gian cấu hình server và chi phí vận hành cho các dự án web tĩnh, landing page hay portfolio cá nhân.

Tuy nhiên, bạn cần nhớ rằng Netlify sinh ra chủ yếu để phục vụ Static Web. Nếu dự án của bạn là một website bán hàng lớn, một hệ thống cần xử lý Database phức tạp hoặc chạy mã nguồn PHP (như WordPress truyền thống), thì giải pháp Hosting/VPS tốc độ cao tại Tino sẽ mang lại sự ổn định và tốc độ tối ưu hơn gấp nhiều lần.

Những câu hỏi thường gặp