TopDev
#Open Source

STRAPI là gì? Hướng dẫn sử dụng cho người mới

minhdev 📖 6 phút đọc ✎ đã sửa

Strapi là một hệ thống Headless CMS mã nguồn mở được viết bằng Node.js, cho phép bạn tạo và quản lý nội dung dễ dàng, đồng thời cung cấp RESTful API hoặc GraphQL API để hiển thị nội dung ở bất cứ đâu (website, mobile app, IoT,...).

🚀 TỔNG QUAN VỀ STRAPI#

✅ Strapi là gì?#

  • Headless CMS: Tách phần quản lý nội dung (Backend) và phần hiển thị (Frontend).

  • Ngôn ngữ: Node.js

  • Cơ sở dữ liệu hỗ trợ: SQLite, PostgreSQL, MySQL, MariaDB, MongoDB (qua plugin)

  • Giao diện Admin: Hiện đại, dễ dùng.

  • Tạo API: Tự động sinh API khi bạn tạo Collection hoặc Content Type.

📦 CÀI ĐẶT STRAPI (Dành cho Developer)#

1. Yêu cầu hệ thống#

  • Node.js >= v18

  • npm hoặc yarn

  • (Tùy chọn) PostgreSQL hoặc SQLite

2. Cài đặt project mới#

`

Cài Strapi CLI

npm install -g create-strapi-app

Tạo project mới

npx create-strapi-app my-project --quickstart `

Tùy chọn --quickstart sẽ dùng SQLite và tự chạy ngay.

🏗️ CẤU TRÚC DỰ ÁN STRAPI#

my-project/ ├── api/ # Nơi tạo các Content Types ├── config/ # Cấu hình toàn cục ├── public/ # Tài nguyên tĩnh ├── src/ # Mã nguồn chính └── package.json # Cấu hình npm

🛠️ HƯỚNG DẪN SỬ DỤNG STRAPI TỪ A-Z#

✅ Bước 1: Truy cập Admin Panel#

Sau khi chạy npm run develop, mở trình duyệt tại: 👉 http://localhost:1337/admin Tạo tài khoản admin để truy cập dashboard.

✅ Bước 2: Tạo Content Type (Giống như bảng dữ liệu)#

Ví dụ: tạo Content Type tên là Post

  • Chọn Content-Type Builder

  • Click Create new Collection Type

  • Nhập tên: Post

  • Thêm các trường dữ liệu:

    title (Text)

    • content (Rich Text)

    • publishedAt (Date)

  • Lưu lại và Strapi sẽ tự sinh API tương ứng

✅ Bước 3: Tạo dữ liệu#

  • Vào Content Manager

  • Chọn Post → Bấm Create new entry

  • Nhập tiêu đề, nội dung

  • Lưu lại → bấm Publish

✅ Bước 4: Truy cập API (Mặc định public)#

GET http://localhost:1337/api/posts

  • Trả về danh sách bài viết dạng JSON

  • Hoặc sử dụng GraphQL nếu cài plugin GraphQL

✅ Bước 5: Bảo vệ API (Roles & Permissions)#

  • Vào menu Settings → Users & Permissions → Roles

  • Chọn Public, bật quyền find, findOne cho Post

  • Lưu lại để cho phép API công khai

✅ Bước 6: Deploy lên môi trường thật#

Strapi có thể triển khai trên:

  • Render, Railway, Heroku, Vercel, DigitalOcean, hoặc VPS

  • Hỗ trợ build Docker container nếu cần

🔌 Plugin hữu ích#

Plugin Công dụng
GraphQL Cung cấp API GraphQL
i18n Hỗ trợ đa ngôn ngữ
Users & Permissions Quản lý quyền và xác thực người dùng
Upload Quản lý media
Email Gửi email từ CMS

💡 Use case điển hình#

Loại dự án Vai trò Strapi
Blog cá nhân Backend + API cho frontend React/Nuxt
App bán hàng Backend cho Mobile App (Flutter/React Native)
Website công ty Quản lý nội dung tách biệt giao diện
Hệ thống đa nền tảng Cung cấp API cho nhiều frontend khác nhau

📚 Tài nguyên học thêm#

Dưới đây là danh sách các mã nguồn mở tương tự như Strapi, được trình bày theo dạng liệt kê và mô tả ngắn gọn:

1. Directus#

Là một headless CMS mã nguồn mở được viết bằng Node.js. Directus cho phép bạn kết nối với cơ sở dữ liệu SQL hiện có và tự động tạo giao diện quản lý nội dung. Nó hỗ trợ cả REST và GraphQL API. Giao diện người dùng rất trực quan, phù hợp cho cả developer và người quản trị nội dung.

2. KeystoneJS#

Đây là một framework CMS sử dụng Node.js và GraphQL. KeystoneJS đặc biệt linh hoạt, thích hợp cho các ứng dụng phức tạp. Nó không chỉ là CMS mà còn cho phép bạn xây dựng hệ thống backend tùy chỉnh tích hợp chặt chẽ với MongoDB hoặc PostgreSQL.

3. Payload CMS#

Là một CMS hiện đại, mã nguồn mở, sử dụng Node.js. Payload hỗ trợ REST và GraphQL, tập trung vào bảo mật, hiệu suất cao và dễ mở rộng. Bạn có thể chạy Payload hoàn toàn tự quản hoặc triển khai lên đám mây. Phù hợp cho các ứng dụng phức tạp hoặc cần API mạnh mẽ.

4. Sanity.io#

Sanity là một CMS linh hoạt, mạnh mẽ, hỗ trợ cấu hình schema bằng mã JavaScript. Sanity cung cấp tính năng real-time, phân quyền chi tiết, khả năng tùy biến cao. Nó sử dụng một ngôn ngữ truy vấn riêng gọi là GROQ, ngoài ra cũng hỗ trợ GraphQL.

5. Netlify CMS#

Đây là một CMS mã nguồn mở tích hợp trực tiếp vào Git (Git-based CMS). Nội dung được lưu trữ trực tiếp trong repo Git của bạn (dạng Markdown hoặc JSON). Phù hợp cho các website tĩnh sử dụng Hugo, Jekyll hoặc Gatsby.

6. TinaCMS#

Là một CMS mã nguồn mở hướng đến việc tích hợp trực tiếp trong frontend, chủ yếu dùng cho các site viết bằng React. Nội dung được lưu trữ trong Git, có thể chỉnh sửa ngay trên trình duyệt theo thời gian thực. Phù hợp với blog và landing page.

7. Cockpit CMS#

Một CMS nhẹ và đơn giản, viết bằng PHP. Cockpit dùng REST API để cung cấp dữ liệu, dễ dàng triển khai với các website nhỏ hoặc các dự án không yêu cầu quá phức tạp về backend.

8. DatoCMS#

Mặc dù không hoàn toàn mã nguồn mở, DatoCMS cung cấp API rất mạnh và dễ dùng. Giao diện hiện đại, có hỗ trợ GraphQL, phù hợp cho các dự án doanh nghiệp.

9. Builder.io#

Là một công cụ kéo thả headless CMS (SaaS), không mã nguồn mở nhưng rất nổi bật nhờ khả năng tích hợp vào frontend hiện đại như React, Vue, Angular. Builder.io hỗ trợ cả REST và GraphQL.

Bài liên quan trong #Open Source

✓ Đã sao chép link