- vừa được xem lúc

Cách triển khai ứng dụng React với ứng dụng Coolify Marketplace của Vultr

0 0 6

Người đăng: Gung Typical

Theo Viblo Asia

Giới thiệu

Coolify là một nền tảng mã nguồn mở giúp đơn giản hóa việc triển khai và quản lý ứng dụng. Nó hỗ trợ nhiều ngôn ngữ lập trình, tích hợp với Git cho CI/CD và cung cấp quản lý cơ sở dữ liệu. Là một giải pháp thay thế tự lưu trữ cho các dịch vụ đám mây, Coolify cung cấp khả năng kiểm soát cơ sở hạ tầng của bạn, khiến nó trở nên lý tưởng cho các nhà phát triển và nhóm tìm kiếm sự đơn giản và linh hoạt.

Bài viết này sẽ hướng dẫn bạn cách triển khai ứng dụng Coolify Vultr Marketplace, thiết lập Ứng dụng React và sau đó triển khai ứng dụng React trên Coolify với tên miền tùy chỉnh.

Triển khai Vultr Optimized Cloud Instance

  1. Đầu tiên, đăng ký và đăng nhập vào Cổng thông tin khách hàng Vultr tại đây.
  2. Tiếp theo, đi đến trang Products .
  3. Từ side menu, bạn chọn Compute.
  4. Nhấp vào nút Deploy Server ở giữa.
  5. Chọn Optimized Cloud Compute tại mục Server type.
  6. Chọn vị trí server.
  7. Chọn Coolify tại mục Marketplace Application. image.png
  8. Chọn plan phù hợp mà bạn cần
  9. Chọn bất kỳ Additional Features nếu cần thiết
  10. Click chọn Deploy Now để ứng dụng bắt đầu triển khai

Thiết lập ứng dụng React

  1. Đầu tiên bạn hãy tạo một ứng dụng React mới
$ npx create-react-app my-react-app
  1. Điều hướng đến thư mục dự án
$ cd my-react-app
  1. Tạo kho lưu trữ Git
$ git init && git add . && git commit -m "Initial Commit"
  1. Tạo một kho lưu trữ và đặt tên là “my-react-app”.

  2. Đẩy mã vào kho lưu trữ

$ git remote add origin https://github.com/your-username/my-react-app.git && git branch -M main && git push -u origin main

Lưu trữ ứng dụng React trên Coolify

  1. Truy cập bảng điều khiển Coolify tại http://<server-ip>:8000

  2. Tạo tài khoản trên Coolify. image.png

  3. Chọn LocalHost làm tùy chọn máy chủ. image.png

  4. Click chọn vào Public Repository image.png

  5. Cung cấp URL kho lưu trữ.

  6. Click chọn Continue

  7. Cung cấp tên miền tùy chỉnh của bạn. Đảm bảo tên miền của bạn trỏ đến IP và máy chủ tên của Vultr Server được cấu hình đúng với nhà cung cấp của bạn. image.png

  8. Cung cấp Build Command và Publish Directory
    image.png

  9. Cuộn xuống và click chọn Reset to Coolify Generated Labels

  10. Click chọn Save sau khi thiết lập

  11. Click chọn Server tại menu ngoài cùng bên trái

  12. Click chọn Local Host

  13. Thêm URL tên miền của bạn vào ô Wildcard Domain image.png

  14. Click chọn Save

  15. Quay lại màn hình dự án ban đầu và Click chọn Deploy

  16. Sau khi triển khai hoàn tất, bạn có thể truy cập ứng dụng React của mình tại https://<server-ip>

Các trường hợp nào nên sử dụng Coolify?

  • Nhà phát triển: Đối với các nhà phát triển muốn triển khai và quản lý ứng dụng mà không cần dựa vào nền tảng đám mây của bên thứ ba, Coolify cung cấp giải pháp mạnh mẽ và linh hoạt.
  • Nhóm nhỏ: Coolify vô cùng lý tưởng cho các nhóm nhỏ muốn cộng tác trong các dự án với quy trình triển khai hợp lý.
  • Những người đam mê Self-Hosting: Đối với những người muốn kiểm soát ứng dụng và dữ liệu của mình, Coolify cung cấp giải pháp tự lưu trữ thay thế cho dịch vụ đám mây vô cùng linh hoạt.

Kết luận

Bằng cách thực hiện các bước trong bài viết này, bạn đã có thể triển khai Ứng dụng Coolify Vultr Marketplace, tạo và thiết lập ứng dụng React mới và triển khai ứng dụng đó trên Coolify với tên miền tùy chỉnh. Cảm ơn các bạn đã theo dõi!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 399

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 146

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 146

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 371

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 280