8 free React hosting services for your app

Reading Time: 13 minutes

Vì vậy, bạn đã xây dựng một ứng dụng React nhưng bạn không chắc chắn cách thức hoặc nơi lưu trữ ứng dụng đó. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn 8 dịch vụ lưu trữ React miễn phí, cho bạn thấy cách chúng tôi triển khai ứng dụng React này sử dụng từng cái và cho bạn biết những gì chúng tôi đã học được trong quá trình này.

Chúng tôi đã xây dựng ứng dụng của mình trong Figma bằng cách sử dụng Anima plugin, cho phép chúng tôi thêm chức năng, hành vi phản hồi và đa phương tiện, sau đó xuất mã React sẵn sàng cho nhà phát triển cho toàn bộ giao diện người dùng. Chúng tôi mất một ngày để thiết kế và triển khai.

Nơi lưu trữ miễn phí ứng dụng React của bạn

Ngày càng có nhiều giải pháp lưu trữ không có máy chủ nhờ vào sự gia tăng của các khung dựa trên thành phần như React. Amazon AWS, Microsoft Azure và Google Cloud hiện là những nền tảng thống trị. Tuy nhiên, ngày càng có nhiều sự thay đổi hướng tới các dịch vụ lưu trữ giao diện người dùng chuyên dụng đòi hỏi ít nỗ lực hơn và có thể giúp bạn thiết lập và vận hành nhanh chóng—và hầu hết đều bao gồm CI/CD. Dưới đây là 8 dịch vụ lưu trữ ứng dụng React miễn phí mà chúng tôi đã thử nghiệm:

1. Netlify

2. Vercel

Hãy cùng tìm hiểu chi tiết hơn về các dịch vụ lưu trữ ứng dụng React miễn phí này và trình bày cách chúng tôi triển khai ứng dụng React bằng cách sử dụng từng dịch vụ.

Netlify

Nền

Netlify được thành lập vào năm 2014 và ngay từ đầu nó đã tập trung vào việc lưu trữ các trang web tĩnh. Nó thu hút rất nhiều nhà phát triển vì mức miễn phí hào phóng. Một vài năm sau, Netlify đã phát triển thành một trong những máy chủ lưu trữ trang web tĩnh và JAMstack phổ biến nhất.

Cách sử dụng

Lý tưởng nhất là bạn sẽ đăng ký hoặc đăng nhập bằng GitHub. Điều này đảm bảo bạn có thể truy cập vào kho lưu trữ trên hồ sơ của mình và triển khai chúng một cách nhanh chóng.
Sau khi đăng nhập, nhấp vào “Thêm trang web mới” và chọn “Nhập dự án hiện có”.
Sau đó nhấp vào GitHub làm nhà cung cấp của bạn.
Chọn “trang web ngân hàng” hoặc bất kể tên dự án của bạn là gì.
Tinh chỉnh cài đặt triển khai (trong trường hợp trang web của chúng tôi, cài đặt mặc định hoạt động hoàn hảo), sau đó nhấp vào “Triển khai trang web”.
Sau khi triển khai, bạn có thể xem nó trên URL công khai mà bạn có thể chia sẻ với mọi người. Đúng!

Đây là ứng dụng trực tiếp được triển khai trên Netlify.

Ưu và nhược điểm

Netlify rất dễ thiết lập và triển khai, chưa kể đây là một trong những dịch vụ nhanh nhất mà chúng tôi đã thử nghiệm tại đây. Một nhược điểm là nếu bạn cần cộng tác viên và/hoặc nhóm, bạn phải nâng cấp lên gói trả phí.

Vercel

Nền

Vercel (ban đầu được gọi là Zeit) được thành lập vào năm 2015 và nhanh chóng nổi tiếng. Họ là những người duy trì Next.js, một khung React phổ biến để xây dựng trang web. Họ cung cấp cấp độ miễn phí cho các trang web phi thương mại cũng như các cách sử dụng mạng Edge của họ cho các chức năng không có máy chủ.

Cách sử dụng

Đăng nhập hoặc đăng ký với GitHub.
Nhấp vào menu thả xuống “Thêm mới…” và chọn “Dự án”.
Chọn “trang web ngân hàng” hoặc dự án React yêu thích của bạn.
Chúng tôi đã sử dụng các cài đặt mặc định cho cài đặt triển khai và sau đó nhấp vào “Triển khai”.
Sau một thời gian, chúng tôi đã triển khai được trang web.

Đây là URL trực tiếp.

Ưu và nhược điểm

Vercel cần một chút thời gian để lưu vào bộ đệm phần cài đặt của quá trình triển khai, nhưng sau đó, đây là một trong những dịch vụ nhanh nhất. Nó hiển thị các bản triển khai xem trước cho mọi nhánh bạn đẩy và nó thực hiện nhanh chóng nhờ bộ nhớ đệm.

Khuếch đại AWS

Nền

AWS là một bộ sưu tập khổng lồ các sản phẩm đám mây và Amplify được quảng cáo là cách dễ dàng để sở hữu một số sản phẩm trong số đó. Với AWS Amplify, bạn có thể nhanh chóng xây dựng, vận chuyển và lưu trữ các ứng dụng toàn bộ trên AWS với khả năng linh hoạt tận dụng phạm vi rộng của các dịch vụ AWS khi các trường hợp sử dụng phát triển.

Cách sử dụng

Đăng ký hoặc đăng nhập vào AWS, sau đó tìm kiếm AWS Amplify và nhấp vào “Bắt đầu”.
Chọn GitHub và ủy quyền cho nó (tôi chỉ cho phép nó đối với repo “trang web ngân hàng”).
Chọn kho lưu trữ trong phần “Kho lưu trữ được cập nhật gần đây”.
1. Trong cài đặt bản dựng, chúng ta sẽ phải thay đổi cơ sởThư mục để ứng dụng của chúng tôi được quận như vậy: Sau đó, cài đặt bản dựng sẽ trông như thế này:
Trong bước tiếp theo, nhấp vào “Lưu và triển khai.”
Sau một thời gian, trang web sẽ được triển khai và sẵn sàng sử dụng.

Và chúng tôi đang sống! Đây là URL.

Ưu và nhược điểm

Bạn phải chỉnh sửa cơ sởThư mục trong đặc tả triển khai—nó không được nhận dạng ngay lập tức. Giao diện người dùng có vẻ hơi rắc rối, nhưng đây là sở thích cá nhân. Có tiềm năng rất lớn cho AWS Amplify vì rất nhiều dịch vụ web AWS khác đều nằm trong tầm tay.

căn cứ hỏa lực

Nền

Firebase là dịch vụ của Google nổi tiếng là nền tảng lưu trữ thời gian thực. Nhưng nó cũng có tùy chọn lưu trữ cho các trang web tĩnh và microservice Express.js hoặc API, đồng thời hỗ trợ xem trước URL cho các chi nhánh mà nhóm của bạn đang làm việc. Giống như Netlify, Vercel và các sản phẩm khác, nó phục vụ nội dung được triển khai qua mạng CDN.

Cách sử dụng

cài đặt công cụ firebase với cài đặt npm -g công cụ firebase.
Đăng nhập vào Firebase với đăng nhập căn cứ hỏa lực. Sau khi đăng nhập, bạn sẽ thấy một thông báo như thế này:
Di chuyển vào thư mục dự án và chạy khởi tạo căn cứ hỏa lực, bạn sẽ thấy một cái gì đó như thế này: Chọn tùy chọn để định cấu hình tệp cho Firebase Hosting với các triển khai GitHub Action tùy chọn. Sau đó, bạn có thể tạo một dự án trực tiếp từ CLI hoặc sử dụng giao diện người dùng Firebase để thực hiện dự án đó và sau đó kết nối nó. Chúng tôi đã tạo dự án từ dòng lệnh và đây là cách chúng tôi trả lời các câu hỏi dẫn đến: Sau đó, các tệp `firebase.json` và `.firebaserc` đơn giản sẽ được tạo.
Sau đó, chạy triển khai căn cứ hỏa lực để thực sự triển khai các tập tin từ quậnthư mục. Nếu thư mục bị thiếu, hãy đảm bảo chạy xây dựng chạy npm đầu tiên để tạo tập tin. các triển khai căn cứ hỏa lực lệnh sẽ tạo đầu ra tương tự như ví dụ dưới đây:

Bây giờ bạn có thể xem trang web trên URL được cung cấp. Đúng!

Ưu và nhược điểm

Firebase khá đơn giản, nhưng khi bạn thiết lập nó trong dự án của mình, các câu hỏi bạn cần trả lời sẽ hơi khó hiểu. May mắn thay, chúng tôi đã trả lời chúng cho bạn trong phần trên, nhưng chúng yêu cầu bạn hiểu rõ về các tính năng thực tế của Firebase trước khi tiếp tục. Ngoài ra, Firebase triển khai nhanh chóng và có thể tạo URL nơi bạn có thể xem trước các tệp đã triển khai. Bạn cũng có thể dễ dàng tự động hóa nó bằng cách triển khai GitHub Action bằng CLI, thật gọn gàng.

Trang GitHub

Nền

Trang GitHub đã xuất hiện khá lâu và đây là cách dễ dàng để xuất bản tài liệu hoặc trang web cá nhân trực tiếp từ GitHub. Nó rất phù hợp với nội dung tĩnh và nhiều người sử dụng nó để triển khai các trang web đơn giản với mức đầu tư tối thiểu. Nó có thể sử dụng miễn phí nếu dự án của bạn được công khai và là cách nhanh chóng và rẻ tiền để lưu trữ một trang web.

Cách sử dụng

Xin lưu ý rằng bạn phải chỉnh sửa Ứng dụng.jsx nơi chúng tôi gọi Bộ định tuyến và thêm tên cơ sở vào nó để khớp với tên repo. Vậy đây là cách Ứng dụng.jsx nên nhìn: Chúng ta phải thay đổi tên cơ sở vì các trang GitHub sẽ triển khai trang web lên URL có dạng này `https://GITHUB_USERNAME.gitlab.io/REPO_NAME`. Trang web sẽ không hoạt động bình thường nếu không đặt tên cơ sở cho Reac-router-dom.

Sau khi thay đổi code, chúng ta cần cài đặt trang gh gói với:
Và, thêm một triển khai trước và một triển khai kịch bản để gói.json:
Sau đó, chúng tôi chỉ cần chạy npm chạy triển khai. Nó sẽ kích hoạt xây dựng chạy npm và nó sẽ sử dụng trang gh công bố nội dung của quận đến một nhánh riêng trên GitHub được gọi là trang gh.
Cuối cùng, hãy kiểm tra xem trang gh được sử dụng cho các Trang GitHub như bên dưới:

Đây là URL trực tiếp.

Ưu và nhược điểm

Nếu bạn đang triển khai một dự án khác với tên người dùng của mình, dự án đó sẽ được triển khai bên trong thư mục con trên miền miễn phí của chúng tôi cùng với GitHub. Sau đó, bạn cần viết thêm mã để hỗ trợ logic nằm trong thư mục con.

Nó không hỗ trợ triển khai liên tục ngay trong trường hợp sử dụng của chúng tôi, nhưng bạn có thể thiết lập nó. Sau khi thiết lập, việc triển khai các thay đổi sẽ nhanh chóng.

Trang GitLab

Nền

Giống như GitHub, GitLab có giải pháp lưu trữ riêng và họ gọi đó là Trang GitLab. Tôi phải đưa nó cho họ, việc thiết lập triển khai liên tục lên Trang GitLab sẽ dễ dàng hơn so với Trang GitHub.

Cách sử dụng

Đăng ký hoặc đăng nhập vào GitLab
Thêm repo vào GitLab nếu bạn chưa có nó ở đó. bạn có thể fork cái tôi đã thêm vào đó
Tương tự như Trang GitHub, bạn phải chỉnh sửa Ứng dụng.jsx nơi chúng tôi gọi Bộ định tuyến và thêm tên cơ sở vào nó để khớp với tên repo. Vì vậy, đây là thay đổi cuối cùng: Chúng ta phải thay đổi tên cơ sở vì các trang GitLab sẽ triển khai trang web lên URL có dạng này: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. Trang web sẽ không hoạt động bình thường nếu không đặt tên cơ sở cho Reac-router-dom.
Sau khi bạn đã chỉnh sửa và đẩy dự án lên GitLab, hãy đi tới Cài đặt > Trang và bạn sẽ được chào đón bằng trình hướng dẫn bốn bước để triển khai kho lưu trữ lên Trang GitLab.
Bước đầu tiên trong trình hướng dẫn là nhập hình ảnh bản dựng. Chúng tôi sẽ sử dụng LTS Node.js.
Tiếp theo, chúng ta sẽ nhập lệnh dựng sẵn. các npm ci sẽ đủ ở đây.
Bây giờ đến bước xây dựng. Chúng ta cần phải vượt qua — –dist-dir công khai bởi vì Trang GitLab mong muốn trang web được xây dựng trong công cộng thư mục. Xin lỗi, bạn không thể thoát khỏi bất kỳ thư mục nào khác.
Cam kết mới được tạo .gitlab-ci.yml tệp cho GitLab biết cách triển khai trang web của bạn.
Bây giờ, hãy đi tới CI/CD -> phần Đường ống của kho lưu trữ và quan sát hoạt động của đường ống mới được thêm vào.
Sau một thời gian, công việc quy trình sẽ kết thúc và trang web sẽ được triển khai trên Trang GitLab.

Đây là kết quả.

Ưu và nhược điểm

Các gói cài đặt chậm và bạn cần thêm mã bổ sung để nó hoạt động, nhưng trình hướng dẫn siêu trực quan chỉ với bốn bước để triển khai.

Kết xuất

Nền

Render là một sản phẩm mới được ra mắt vào năm 2019. Nó đang cố gắng phá vỡ cách mọi người triển khai dịch vụ của họ (bao gồm cả các trang web tĩnh). Cho đến nay, họ đang hoạt động tốt và ngày càng tăng về số lượng.

Cách sử dụng

Đăng ký hoặc đăng nhập vào Render.
Tạo một trang web tĩnh mới bằng cách nhấn nút “Mới” và chọn “Trang web tĩnh”.
Chọn repo bạn muốn triển khai.
Giữ sợi; sợi xây dựng lệnh xây dựng trong cài đặt bản dựng. Thật không may, nó không hoạt động với npm ci; xây dựng chạy npm giống như các dịch vụ khác làm. Thay đổi “Thư mục xuất bản” thành quận và nhấp vào “Tạo trang tĩnh.”
Sau một thời gian, Render sẽ triển khai mã.

Đây là URL trực tiếp từ Kết xuất.

Ưu và nhược điểm

Nó rất nhanh, nhưng nó không hoạt động tốt cho dự án của chúng tôi với các lệnh `npm ci` và `npm run build`. Chỉ có `sợi` dường như hoạt động.

Tăng đột biến

Nền

Surge đã xuất hiện được một thời gian. Ngay lập tức, dịch vụ của họ rất dễ sử dụng và chỉ cần một hoặc hai lệnh để triển khai trang web tĩnh của bạn. Nó miễn phí nhưng cung cấp gói trả phí 30$/tháng. Chủ nghĩa khắc kỷ của công cụ này là điều khiến nó tỏa sáng. Không cần thiết lập phức tạp, chỉ cần cài đặt `surge` và chạy nó với `surge`.

Cách sử dụng

Để chuẩn bị, chạy xây dựng chạy npm để tạo các tập tin tĩnh bên trong quận thư mục. các dâng trào sẽ sử dụng chúng để triển khai.
Chạy cài đặt npm — tăng vọt toàn cầu
Sau đó, chạy dâng trào.

Một số điều cần lưu ý:
Nếu đây là lần đầu tiên bạn chạy nó, bạn sẽ phải tạo một tài khoản với Surge. Đừng lo lắng, thật dễ dàng. Chỉ cần nhập email của bạn và mật khẩu mong muốn.

Sau đó, bạn sẽ được yêu cầu nhập “dự án”, đây sẽ là đường dẫn đến quận thư mục. Bạn chỉ có thể nối thêm quận đến đường dẫn bạn được cung cấp nếu bạn chạy tăng tốc bên trong kho lưu trữ mà bạn đang triển khai.

Sau đó, nhập URL tương lai của trang web của bạn. Hãy thử một cái gì đó độc đáo bởi vì những gì dâng trào được cung cấp không hiệu quả đối với tôi.

Sau đầu vào URL, dâng trào sẽ triển khai nội dung từ quận tới URL được chỉ định. Đây là những gì tôi có:

Ưu và nhược điểm

Nó nhanh chóng, đơn giản và không yêu cầu bạn sử dụng một giao diện riêng—nhưng nó không đề xuất được URL có sẵn cho ứng dụng của bạn.

Thời gian triển khai cho từng dịch vụ hosting

3 dịch vụ lưu trữ React miễn phí hàng đầu của chúng tôi

Netlify
Vercel
Tăng đột biến

Bài học chính

Sau khi thử nghiệm từng dịch vụ lưu trữ ứng dụng React miễn phí này, chúng tôi cho rằng Netlify là dịch vụ tốt nhất trong nhóm. Nó cung cấp khả năng triển khai nhanh chóng với nhiều tính năng bạn có thể cần. Ngay sau đó là Vercel có rất nhiều tính năng và khá nhanh chóng sau lần triển khai đầu tiên. Sau đó, chúng tôi có Surge, một công cụ triển khai tối thiểu có thể khá rẻ nếu bạn quyết định nâng cấp.

8 dịch vụ lưu trữ ứng dụng React miễn phí21 min read