Hướng dẫn Deploy React, Vue và SPA lên PocketBase Cloud bằng CLI

Nếu frontend của bạn build ra static files như index.html, JavaScript và CSS, bạn có thể deploy trực tiếp lên PocketBase Cloud bằng CLI mà không cần upload thủ công.

Command chính là:

pb cloud frontend deploy

Trong bài này, mình sẽ đi qua workflow cơ bản để deploy một SPA từ terminal.

Cài PocketBase Cloud CLI

CLI được cài qua npm:

npm install -g @pocketbasecloud/cli

Kiểm tra sau khi cài:

pb --help

Nếu command hoạt động, bước tiếp theo là đăng nhập.

Đăng nhập

Chạy:

pb cloud login

CLI sẽ mở trình duyệt để xác thực tài khoản PocketBase Cloud.

Sau khi đăng nhập thành công, quay lại terminal và tiếp tục deploy.

Chuẩn bị frontend project

Di chuyển vào project:

cd my-spa

Cài dependencies:

npm install

Với một project Vite, bạn có thể kiểm tra trước bằng:

npm run build

Output thường nằm trong thư mục:

dist/
├── index.html
└── assets/

Đây là các static files sẽ được deploy.

Deploy lần đầu

Từ thư mục project, chạy:

pb cloud frontend deploy --name my-spa

Ở lần deploy đầu tiên, CLI sẽ xử lý phần lớn workflow:

Source code
    ↓
Build
    ↓
Static output
    ↓
Upload
    ↓
Deployment

Sau khi hoàn tất, CLI sẽ trả về URL public của frontend.

Deploy các bản cập nhật tiếp theo

Sau lần deploy đầu tiên, project được liên kết với deployment thông qua file pb.json.

Vì vậy những lần sau chỉ cần chạy:

pb cloud frontend deploy

Không cần truyền lại --name.

Đây cũng là command mình thường dùng sau khi hoàn thành một thay đổi frontend:

git pull
npm install
pb cloud frontend deploy

Nếu dependencies không thay đổi thì đơn giản hơn:

pb cloud frontend deploy

Nếu đã build sẵn

Trong một số trường hợp, bạn có thể muốn tự chạy build trước:

npm run build

Sau đó deploy trực tiếp output hiện tại:

pb cloud frontend deploy --skip-build

Cách này khá hữu ích nếu build đã được thực hiện trong CI hoặc bạn muốn kiểm tra thư mục output trước khi upload.

Workflow hoàn chỉnh

Lần đầu:

npm install -g @pocketbasecloud/cli

pb cloud login

cd my-spa

npm install

pb cloud frontend deploy --name my-spa

Những lần tiếp theo:

pb cloud frontend deploy

Kết luận

Với static frontend, deployment thực chất chỉ là:

Build frontend
      ↓
Generate static files
      ↓
Upload
      ↓
Serve publicly

PocketBase Cloud CLI gom các bước đó lại thành một command:

pb cloud frontend deploy

Nếu project của bạn là React, Vue, Svelte, Astro static hoặc bất kỳ frontend nào build ra static files, đây là một workflow khá gọn để deploy trực tiếp từ terminal.

Tài liệu tham khảo:

https://pocketbasecloud.com/docs/frontend/deploying-a-frontend

CLI source:

https://github.com/pocketbasecloud/cli

Video demo : https://www.youtube.com/watch?v=sPC8Ywx2z3w