Host Ứng Dụng Web Tĩnh Trên Cloudflare Pages: Hướng Dẫn 2026

Hosting trên Cloudflare Pages cho phép các nhóm frontend phát hành mã nhanh, an toàn và không phải quản trị máy chủ. Bằng cách sử dụng Cloudflare Pages , các nhà phát triển có được một nền tảng edge-native hiệu năng cao để triển khai ứng dụng web tĩnh, ứng dụng một trang (SPA) và các framework kết xuất phía máy chủ (SSR). Bằng cách kết nối trực tiếp với kho Git của bạn, Cloudflare tự động hóa các pipeline build, tạo các bản triển khai xem trước và host các tài nguyên trên toàn cầu. Hướng dẫn này giải thích cách kết nối Git, cấu hình các thiết lập build, thiết lập miền tùy chỉnh và cấu hình chuyển hướng.

Tóm tắt (TL;DR)

• Triển khai ứng dụng frontend edge-native; Cloudflare Pages phục vụ tài nguyên trên toàn cầu từ mạng lưới của Cloudflare, đảm bảo thời gian tải dưới một giây.
• Tự động hóa tích hợp Git; liên kết kho của bạn để kích hoạt build tự động và tạo URL xem trước cho mỗi commit.
• Cấu hình các thiết lập build của framework; đặt thư mục đầu ra và lệnh cho React, Vue, Next.js, Hugo hoặc Astro.
• Áp dụng quy tắc chuyển hướng và header bằng cách sử dụng các tệp văn bản thuần _redirects và _headers trong thư mục public của bạn.
• Ánh xạ miền tùy chỉnh với chứng chỉ SSL miễn phí, tự động gia hạn, được Cloudflare quản lý.

Cloudflare Pages là gì?

Cloudflare Pages là một nền tảng hosting serverless dành cho các nhà phát triển frontend, tương tự như Netlify hoặc Vercel, được xây dựng trực tiếp trên hạ tầng toàn cầu của Cloudflare.

Thay vì host các tệp trên một máy chủ đám mây duy nhất, Cloudflare Pages phân phối HTML, CSS, JavaScript và hình ảnh của bạn trên các vị trí edge khắp thế giới. Khi người dùng yêu cầu site của bạn, tài nguyên được phục vụ từ vị trí gần nhất, giảm độ trễ mạng. Đối với các dự án cần logic phía máy chủ, Pages tích hợp với Cloudflare Workers để chạy các hàm backend. Để so sánh Pages với các dịch vụ điện toán edge khác, hãy đọc hướng dẫn của chúng tôi về Cloudflare Pages vs Workers .

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo bạn đã có sẵn những thứ sau:

• Một kho Git trên GitHub hoặc GitLab chứa dự án của bạn (hoặc các tệp đã build, sẵn sàng để tải lên trực tiếp).
• Một framework xuất ra tài nguyên tĩnh — React (Vite), Vue, Astro, SvelteKit, Hugo hoặc HTML thuần. Các framework kết xuất phía máy chủ cũng hoạt động, thông qua Pages Functions.
• Một bản build cục bộ hoạt động. Chạy lệnh build của bạn (ví dụ npm run build) và xác nhận thư mục đầu ra được tạo ra không có lỗi trước khi bạn kết nối bất cứ thứ gì.
• Một tài khoản Cloudflare miễn phí. Không cần thẻ tín dụng cho gói miễn phí.
• Node.js được cài đặt cục bộ (khuyến nghị) để bạn có thể tái tạo các bản build và sử dụng công cụ dòng lệnh Wrangler.

Một lần kiểm tra nhanh giúp tiết kiệm hàng giờ gỡ lỗi về sau: nếu site của bạn không build sạch trên máy của chính bạn, thì nó cũng sẽ không build trên các runner của Cloudflare. Hãy giải quyết các lỗi cục bộ trước.

Bước 1: Kết nối kho Git của bạn

Để bắt đầu, hãy đăng nhập vào Cloudflare Dashboard, điều hướng đến Compute > Pages và nhấp vào Create a project.

Chọn Connect to Git để liên kết tài khoản GitHub hoặc GitLab của bạn. Chọn kho chứa ứng dụng web tĩnh của bạn. Sự tích hợp này có giá trị vì nó thiết lập một pipeline tích hợp liên tục (CI): mỗi khi bạn đẩy mã lên nhánh production của mình, Cloudflare tự động build và triển khai các bản cập nhật. Đối với các commit khác, Cloudflare tạo ra các “URL xem trước” duy nhất để bạn có thể kiểm tra thay đổi trước khi hợp nhất.

Bước 2: Cấu hình các thiết lập build

Cloudflare Pages hỗ trợ các trình tạo site tĩnh và framework frontend phổ biến. Trong quá trình chạy trình hướng dẫn thiết lập, hãy cấu hình các thiết lập sau dựa trên stack của bạn:

• Lệnh build: Script build được định nghĩa trong package.json của bạn (chẳng hạn như npm run build hoặc hugo --minify).
• Thư mục đầu ra build: Thư mục chứa các tệp tĩnh đã biên dịch (chẳng hạn như dist, build hoặc public).
• Biến môi trường: Nếu script build của bạn cần các khóa API hoặc biến cấu hình, hãy định nghĩa chúng tại đây.

Cloudflare tự động phát hiện nhiều framework, nhưng việc xác nhận thiết lập sẵn giúp tránh một lần build đầu tiên thất bại. Các kết hợp phổ biến là:

Cố định phiên bản Node của bạn. Một nguyên nhân thường gặp của tình trạng “chạy được cục bộ, thất bại trên Cloudflare” là sự không khớp giữa phiên bản Node mà runner build sử dụng mặc định và phiên bản mà dự án của bạn mong đợi. Hãy khai báo nó một cách rõ ràng, hoặc dưới dạng biến môi trường trong dashboard:

1NODE_VERSION = 20

Hoặc bằng cách commit một tệp .node-version vào thư mục gốc của kho:

120

Bước 3: Thiết lập chuyển hướng và header

Đối với ứng dụng một trang (như React Router) hoặc di chuyển URL cũ, bạn phải cấu hình các quy tắc định tuyến và chuyển hướng. Pages xử lý việc này thông qua các tệp văn bản đơn giản được đặt trong thư mục đầu ra của bạn.

Chuyển hướng (_redirects)

Tạo một tệp có tên _redirects trong thư mục public của bạn. Để một SPA React xử lý định tuyến phía client một cách gọn gàng, hãy thêm quy tắc dự phòng:

1/*  /index.html  200

Điều này buộc tất cả các yêu cầu phải phân giải về index.html, cho phép router JavaScript quản lý đường dẫn.

Thứ tự rất quan trọng. Cloudflare đánh giá các quy tắc từ trên xuống dưới và dừng lại ở lần khớp đầu tiên, vì vậy các chuyển hướng cụ thể phải nằm phía trên quy tắc dự phòng tổng quát:

1# Permanent redirect for a moved page
2/old-pricing   /pricing            301
3
4# Redirect an entire section, preserving the sub-path
5/blog/*        /articles/:splat    301
6
7# SPA fallback (must come last)
8/*             /index.html         200

Trình giữ chỗ :splat mang phần đường dẫn đã khớp chuyển tiếp đến đích. Gói miễn phí cho phép tối đa 2.000 quy tắc chuyển hướng tĩnh cho mỗi dự án; vượt quá con số đó, hãy chuyển logic vào một Pages Function hoặc Bulk Redirects.

Header tùy chỉnh (_headers)

Tạo một tệp có tên _headers để áp dụng các quy tắc bảo mật, Referrer-Policy hoặc các điều khiển cache tùy chỉnh:

1/*
2  X-Frame-Options: DENY
3  X-Content-Type-Options: nosniff
4  Referrer-Policy: strict-origin-when-cross-origin

Cùng tệp đó là nơi thích hợp để tinh chỉnh việc lưu cache. Các tài nguyên bất biến, có dấu vân tay (fingerprint), có thể được lưu cache trong một năm, trong khi HTML vẫn được giữ mới để người dùng luôn nhận được bản build mới nhất:

1/assets/*
2  Cache-Control: public, max-age=31536000, immutable

Để xem các quy tắc này so sánh với định tuyến backend truyền thống như thế nào, hãy đọc xây dựng API serverless với Cloudflare Workers .

Bước 4: Ánh xạ miền tùy chỉnh

Sau khi triển khai, Cloudflare cung cấp một tên miền phụ mặc định (ví dụ your-project.pages.dev).

Để ánh xạ miền tùy chỉnh của bạn, hãy điều hướng đến tab Custom Domains trong dự án Pages của bạn và nhập miền của bạn (ví dụ yourcompany.com). Nếu DNS của bạn được Cloudflare quản lý, nền tảng sẽ cấu hình các bản ghi CNAME và cấp phát ngay lập tức một chứng chỉ SSL miễn phí, tự động gia hạn. Nếu bạn cần trợ giúp quản lý ánh xạ miền, DNS hoặc bảo mật máy chủ, hãy xem trang kiểm tra bảo mật website .

Bước 5: Triển khai bằng Wrangler CLI (Tải lên trực tiếp)

Tích hợp Git phù hợp với hầu hết các nhóm, nhưng bạn cũng có thể triển khai thẳng từ máy của mình hoặc từ một pipeline hiện có bằng Wrangler, công cụ dòng lệnh của Cloudflare. Điều này hữu ích khi bản build của bạn đã chạy trong GitHub Actions hoặc GitLab CI và bạn chỉ muốn tải lên kết quả đã hoàn tất.

Cài đặt Wrangler và xác thực:

1npm install -g wrangler
2wrangler login

Build cục bộ, sau đó đẩy thư mục đầu ra lên một dự án được đặt tên:

1npm run build
2wrangler pages deploy ./dist --project-name=my-web-app

Lần chạy đầu tiên sẽ tạo dự án nếu nó chưa tồn tại. Trong CI, hãy thay wrangler login tương tác bằng một token API có phạm vi giới hạn được cung cấp thông qua một biến môi trường, để không cần bước trình duyệt:

1# .github/workflows/deploy.yml (excerpt)
2- name: Deploy to Cloudflare Pages
3  run: npx wrangler pages deploy ./dist --project-name=my-web-app
4  env:
5    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
6    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

Tải lên trực tiếp bỏ qua bước build của chính Cloudflare, giúp tránh các vấn đề về môi trường build và trao cho bạn toàn quyền kiểm soát toolchain.

Những cạm bẫy thường gặp và khắc phục sự cố

Một số ít vấn đề chiếm phần lớn các thất bại triển khai lần đầu:

• Lỗi 404 khi làm mới một route SPA. Một route phía client như /dashboard trả về “Nothing is here yet” vì không có tệp khớp nào tồn tại trên đĩa. Cách khắc phục là quy tắc dự phòng /* /index.html 200 trong _redirects, và xác nhận rằng tệp đó nằm trong kết quả build chứ không phải thư mục nguồn của bạn.
• _redirects hoặc _headers dường như bị bỏ qua. Các tệp này phải nằm trong thư mục đầu ra đã publish, không chỉ trong kho. Với Vite, Astro hoặc SvelteKit, hãy đặt chúng trong thư mục public/ (hoặc static/) để quá trình build sao chép chúng nguyên vẹn.
• Build thành công cục bộ nhưng thất bại trên Cloudflare. Điều này gần như luôn là sự không khớp phiên bản Node hoặc một biến thời điểm build bị thiếu. Hãy cố định phiên bản Node và khai báo lại bất kỳ biến nào mà bản build đọc — chúng tách biệt với các binding lúc chạy.
• “Too many files” hoặc một bản triển khai quá lớn. Một bản triển khai đơn lẻ bị giới hạn ở 20.000 tệp, với giới hạn 25 MiB mỗi tệp. Media dung lượng lớn thuộc về R2 hoặc một dịch vụ hình ảnh, chứ không phải gói tĩnh.
• Tài nguyên cũ sau một bản phát hành. Các tệp có hash như app.4f2c.js có thể được cache một cách tích cực, nhưng index.html thì không nên. Hãy giữ HTML ở một cache ngắn và để các tài nguyên có dấu vân tay giữ trạng thái bất biến, như đã trình bày trước đó.

Cân nhắc về kiểm thử và production

Cloudflare xây dựng một bản triển khai xem trước cho mỗi nhánh không phải production và mỗi pull request, mỗi bản trên URL riêng của nó (ví dụ abc123.my-web-app.pages.dev). Vì các bản xem trước chạy trên cùng mạng edge như site trực tiếp của bạn, chúng là một nơi đáng tin cậy để xem xét các thay đổi trước khi hợp nhất.

Đối với các bản phát hành thực tế, một vài cơ chế kiểm soát tạo nên sự khác biệt giữa một dịch vụ host và một quy trình làm việc đáng tin cậy:

• Rollback. Mỗi bản triển khai đều được giữ lại, vì vậy một bản phát hành hỏng có thể được hoàn nguyên bằng cách đưa một bản build trước đó trở lại production từ dashboard trong vài giây, không cần build lại.
• Tách biệt môi trường. Đặt các biến khác nhau cho production và xem trước để các bản build xem trước trỏ đến các API staging thay vì dữ liệu trực tiếp.
• Phân tích và Core Web Vitals. Bật Cloudflare Web Analytics — ưu tiên quyền riêng tư và không dùng cookie — để theo dõi LCP, CLS và lưu lượng của người dùng thực mà không cần tải một script bên thứ ba.
• Kiểm soát truy cập cho các bản xem trước. Các URL xem trước mặc định là công khai. Nếu một nhánh để lộ công việc chưa phát hành, hãy đặt nó phía sau Cloudflare Access để chỉ nhóm của bạn mới có thể mở nó.

Việc thiết lập những điều này sớm giúp giữ cho các bản triển khai của bạn có thể dự đoán được khi dự án phát triển và nhiều người hơn đẩy mã vào đó.

Những điểm chính

• Cloudflare Pages host các ứng dụng web tĩnh trên mạng edge toàn cầu của Cloudflare, tối ưu hóa tốc độ tải.
• Tự động hóa việc triển khai bằng cách liên kết GitHub hoặc GitLab để biên dịch mã ở mỗi commit.
• Định nghĩa các lệnh build và thư mục đầu ra phù hợp với framework của bạn (Astro, Next.js, Hugo, React).
• Cấu hình chuyển hướng và header bảo mật bằng cách sử dụng các tệp văn bản _redirects và _headers đơn giản trong thư mục đầu ra của bạn.
• Ánh xạ miền tùy chỉnh với chứng chỉ SSL miễn phí, tự động gia hạn, được Cloudflare quản lý trực tiếp.

Tối ưu hóa hạ tầng web của bạn

Triển khai các frontend nhanh, an toàn đòi hỏi phải chọn kiến trúc hosting và quy tắc cache phù hợp. Mecanik chuyên về dịch vụ phát triển website và cung cấp dịch vụ kiểm tra SEO kỹ thuật chuyên nghiệp. Chúng tôi xây dựng các nền tảng React, Next.js và Astro tùy chỉnh được tối ưu hóa cho Core Web Vitals và triển khai trên Cloudflare. Hãy liên hệ với chúng tôi ngay hôm nay để thảo luận về bản build tiếp theo của bạn.

Câu hỏi thường gặp (FAQ)

Hosting Cloudflare Pages là gì? Đó là một nền tảng hosting frontend serverless build và phục vụ các ứng dụng web tĩnh, các SPA React và kết quả đầu ra của trình tạo site tĩnh (như Astro hoặc Hugo) trên toàn cầu qua CDN của Cloudflare.

Cloudflare Pages có hỗ trợ kết xuất phía máy chủ (SSR) không? Có. Pages hỗ trợ các framework SSR (như Next.js, Astro, SvelteKit) bằng cách tự động chuyển đổi logic máy chủ thành Cloudflare Workers serverless trong quá trình build.

Làm cách nào để cấu hình chuyển hướng trên Cloudflare Pages? Bạn tạo một tệp văn bản thuần có tên _redirects trong thư mục đầu ra build và viết các quy tắc chuyển hướng, định nghĩa đường dẫn nguồn, đường dẫn đích và mã trạng thái HTTP.

Cloudflare Pages có miễn phí không? Có. Cloudflare Pages cung cấp một gói miễn phí hào phóng bao gồm số lần triển khai không giới hạn, băng thông không giới hạn và miền tùy chỉnh, khiến nó rất tiết kiệm chi phí cho hosting tĩnh.

Làm cách nào để thiết lập miền tùy chỉnh trên Pages? Điều hướng đến tab Custom Domains trong dashboard dự án Pages của bạn, nhập tên miền của bạn, và Cloudflare sẽ cấu hình các bản ghi DNS và cấp một chứng chỉ SSL miễn phí.