Đã đăng vào khoảng 22 giờ trước 16 phút đọc

[Vibe Coding Thực Chiến #02] Setup "Bàn Làm Việc": VS Code, VPS Ubuntu Và EzyPlatform Để Vibe Code Mượt Nhất

Tác giả: Lee
Series: Vibe Coding Thực Chiến Cùng EzyPlatform (#02)
Hạ tầng thực nghiệm: VPS Ubuntu 22.04 LTS (157.66.47.xxx) | Domain: https://1576647xxx-admin.interdata.io.vn
Bộ công cụ: VS Code + Extension youngmonkeys.ezyarticle + Claude Code CLI / Codex

Ở bài viết trước, mình và anh em đã thống nhất với nhau một điều: Vibe Coding mà không có nền tảng hạ tầng vững chắc (foundation platform) thì chẳng khác nào xây lâu đài trên cát. Cứ mải miết gõ prompt cho AI vẽ giao diện, rồi đến lúc cần CMS quản lý, cần Database, cần Auth hay phân quyền thì toàn bộ codebase vỡ vụn.

Nhưng trước khi có thể ngồi rung đùi gõ prompt để AI sinh ra cả một website xịn sò, việc đầu tiên chúng ta phải làm là: Dựng một bàn làm việc thật thông suốt.

Cảm giác cụt hứng nhất của dân Vibe Coding là gì bạn biết không?

AI vừa nhả ra một đoạn code giao diện cực kỳ mượt...
Nhưng bạn không biết ném nó vào đâu trên server.
Hoặc lưu xong, bấm xem thử thì màn hình trắng tinh 😣.
Hay cay đắng hơn: kéo thả một file ảnh vector SVG vào thì server thẳng thừng từ chối vì không đúng định dạng 😡.

Hôm nay, mình sẽ cùng bạn dựng trọn vẹn một môi trường Vibe Coding thực chiến từ A-Z trong khoảng 15 phút: từ con VPS Ubuntu thực tế cho đến VS Code trên máy tính của bạn, và đặc biệt là 3 bẫy lỗi kinh điển mà 90% anh em mới bắt đầu đều dính phải!

1. Kiến trúc tổng thể: Chu kỳ phản hồi 3 giây

Trước khi gõ lệnh, hãy nhìn vào bức tranh toàn cảnh về cách mà cỗ máy này vận hành:

Kiến trúc môi trường Vibe Coding Kiến trúc luồng làm việc: Code tại máy local, AI sinh mã nguồn theo chuẩn module, Extension tự động đẩy lên VPS qua API và xem trước tức thì.

Quy trình này giải quyết triệt để sự cồng kềnh của quy trình truyền thống:

Không cần setup CI/CD phức tạp: Không phải mất công cấu hình GitHub Actions, Docker build hay rsync mỗi khi sửa một dòng CSS.
Phản hồi tức thì (Instant Feedback Loop): Bạn gõ prompt ở VS Code local -> AI sinh file -> Bấm Ctrl + S -> Extension tự đồng bộ lên VPS -> F5 trình duyệt là thấy ngay sản phẩm chạy trên môi trường thật!

2. Balo cần chuẩn bị những gì?

Đồ nghề để bắt đầu cực kỳ tinh gọn, bạn không cần máy tính cấu hình khủng:

2.1. Một con VPS Ubuntu (Bao nhiêu là đủ?)

Cấu hình khuyến nghị: 2 vCPU, 4GB RAM, ổ cứng SSD khoảng 30GB trở lên (hệ điều hành Ubuntu 22.04 LTS).
Chi phí thực tế: Hiện tại các nhà cung cấp cloud tại Việt Nam (Interdata, Vietnix, KDATA...) có mức giá rất mềm, chỉ tầm 100.000đ – 150.000đ/tháng là bạn đã có một con VPS chạy vi vu.
EzyPlatform được viết trên nền tảng Java tối ưu tài nguyên rất tốt, khi chạy ở trạng thái nhàn rỗi chỉ tốn khoảng 1.2GB – 1.5GB RAM, hoàn toàn dư dả cho các plugin hoạt động.

2.2. Tên miền / Subdomain

Nếu bạn đã có tên miền riêng (.com, .vn): Quá tuyệt vời!
Nếu chưa muốn mua domain: Hoàn toàn có thể tận dụng subdomain miễn phí mà nhà cung cấp VPS cấp sẵn (ví dụ dạng 1576647xxx-admin.interdata.io.vn), vừa tiện vừa không tốn thêm một xu nào.

2.3. VS Code & Trợ lý AI

VS Code: Trình soạn thảo quốc dân, nhẹ nhàng, kho extension phong phú. (Nếu anh em dùng Cursor hoặc Antigravity CLI thì tư duy thiết lập cũng hoàn toàn tương tự).
Trợ lý AI: Claude Code CLI, ChatGPT, OpenAI Codex hoặc GitHub Copilot tùy theo thói quen của bạn.

3. EzyPlatform trên VPS — Đã có sẵn những gì?

Bây giờ, hãy mở terminal lên và kiểm tra xem "trái tim" hệ thống trên VPS đang hoạt động ra sao.

3.1. Kiểm tra trạng thái dịch vụ qua SSH

Truy cập vào VPS bằng lệnh SSH quen thuộc:

ssh root@157.66.47.xxx

Kiểm tra xem EzyPlatform service có đang sống khỏe mạnh hay không:

# Kiểm tra trạng thái service
systemctl status ezyplatform

# Hoặc kiểm tra tiến trình Java đang chạy
ps aux | grep ezyplatform

Nếu kết quả trả về màu xanh lá active (running) cùng thông số cổng 8080 (hoặc Nginx reverse proxy cổng 80/443) là bạn đã yên tâm 100%:

Kiểm tra tiến trình EzyPlatform trên VPS Terminal thực tế trên VPS: Tiến trình EzyPlatform Java active mượt mà, RAM sử dụng ổn định.

3.2. Đăng nhập Admin và kiểm tra 3 plugin cốt lõi

Mở trình duyệt và truy cập trang quản trị của bạn: https://1576647xxx-admin.interdata.io.vn

Để phục vụ tốt nhất cho việc Vibe Coding, hệ thống của bạn cần bật sẵn 3 thành phần sau trong menu Plugins & Themes:

EzyArticle: Module hạt nhân cho phép quản lý trang (Pages), bài viết và các template HTML/CSS/JS rời.
EzySupport: Module quản trị hệ thống, cấp chứng chỉ SSL và cấu hình thông số vận hành.
Theme Freestyle: Theme tối giản chuẩn mực, giúp bạn tự do nhúng code do AI sinh ra mà không bị vướng layout cũ.

4. VS Code + Extension EzyArticle: Chiếc "cầu truyền hình" trực tiếp lên VPS

Đây là phần then chốt biến VS Code ở máy tính cá nhân của bạn kết nối thẳng vào VPS từ xa.

4.1. Cài đặt Extension EzyArticle

Mở VS Code, bấm tổ hợp phím Ctrl + Shift + X (hoặc Cmd + Shift + X trên macOS), gõ tìm kiếm: EzyArticle

Hãy chọn extension do tác giả youngmonkeys phát hành và bấm Install:

Extension EzyArticle trên VS Code Extension EzyArticle chính thức từ youngmonkeys trên VS Code Marketplace.

Extension này sẽ đảm nhận 3 nhiệm vụ quan trọng:

Tự động bắt sự kiện lưu file để đồng bộ nội dung lên VPS.
Cung cấp lệnh EzyArticle: Preview Page để xem trước bản nháp trực tiếp trên web.
Cung cấp lệnh EzyArticle: Publish Content để xuất bản chính thức khi bạn đã ưng ý.

4.2. Lấy Admin Access Token ở đâu?

Extension cần một chìa khóa xác thực (Token) để có quyền ghi dữ liệu lên VPS mà không bắt bạn phải nhập mật khẩu tài khoản mỗi lần lưu.

Cách lấy rất đơn giản:

Đăng nhập vào trang Admin EzyPlatform.
Bấm vào ảnh đại diện (Avatar) ở góc trên bên phải -> Chọn Profile.
Tại khu vực Access Tokens, bạn sẽ thấy danh sách token quản trị. Bấm nút Add để tạo mới hoặc copy token hiện có.

Lấy Admin Access Token trong trang Profile Trang Profile người dùng: Nơi tạo và quản lý Access Token bảo mật cho extension.

[!WARNING] Lưu ý bảo mật (Cực kỳ quan trọng ⚠️): Chuỗi token này có quyền quản trị tối cao trên VPS của bạn. Tuyệt đối không chia sẻ công khai hay commit lên các kho mã nguồn công cộng như GitHub!

4.3. Tạo file cấu hình `environment.json`

Tại thư mục gốc của project trên VS Code, bạn tạo một file tên là environment.json với nội dung như sau:

[
  {
    "name": "production",
    "admin_url": "https://1576647xxx-admin.interdata.io.vn",
    "admin_access_token": "92a3658a8c493fc0d7c3cedb3...[masked]",
    "default": true
  }
]

Cấu hình environment.json trong VS Code File environment.json tại root: Cầu nối xác thực trực tiếp giữa VS Code và VPS qua HTTPS.

name: Tên định danh môi trường (bạn có thể đặt là production hoặc staging).
admin_url: Đường dẫn URL đầy đủ tới trang Admin trên VPS.
admin_access_token: Chuỗi token bạn vừa copy ở bước trên.
default: true: Chỉ định môi trường mặc định để extension tự động chọn khi bạn thực hiện các thao tác sync hay preview.

(Bí kíp 💡): Nhớ thêm ngay dòng environment.json vào file .gitignore để không bao giờ lỡ tay đẩy file này lên mạng!

5. 3 bẫy lỗi kinh điển người mới 99% sẽ dính & Cách fix trong 1 nốt nhạc 😡

Đây là phần "xương máu" nhất. Rất nhiều bạn khi mới làm quen với EzyPlatform đều gặp phải 3 lỗi này và loay hoay mất cả buổi trời:

3 bẫy lỗi kinh điển khi setup và cách khắc phục Tóm tắt 3 bẫy lỗi phổ biến nhất và giải pháp xử lý nhanh gọn.

5.1. Bẫy lỗi #1: Upload icon SVG hay file JS bị báo lỗi không hỗ trợ 😡

Hiện tượng: Bạn bảo AI sinh một trang landing page có dùng icon vector .svg hoặc kèm một file script .js. Khi lưu file, extension báo lỗi đỏ lòm: "File type not supported".
Nguyên nhân: EzyPlatform có cơ chế bảo mật nghiêm ngặt, mặc định chỉ cho phép upload các file ảnh phổ thông (image/jpeg, image/png).
Cách fix (Recommend 👍):
1. Vào Admin EzyPlatform -> menu Settings -> chọn Regular.
2. Kéo xuống mục Allow MIME Types.
3. Bổ sung thêm các định dạng sau vào danh sách:
  image/svg+xml, application/javascript, text/css, application/json
4. Bấm Save để lưu cấu hình.

Cấu hình MIME Types trong Regular Settings Thêm các MIME Types cần thiết để thoải mái upload asset cho website.

5.2. Bẫy lỗi #2: Bấm Preview mà trang "trắng bóc" hoặc văng ra màn hình đăng nhập 😣

Hiện tượng: Bạn bấm chuột phải chọn EzyArticle: Preview Page, tab trình duyệt bật lên nhưng chỉ hiển thị một màu trắng toát, hoặc trang web bắt bạn đăng nhập lại liên tục dù bạn vừa đăng nhập ở tab bên cạnh.
Nguyên nhân: Nếu bạn sử dụng subdomain nhiều cấp (ví dụ 1576647xxx-admin.interdata.io.vn), các trình duyệt hiện đại (Chrome, Safari) sẽ kích hoạt chính sách bảo mật cookie cross-origin, chặn không cho chia sẻ session giữa domain admin và domain xem trước.
Cách fix (Bí kíp 💡):
1. Vào Admin -> Settings -> Regular.
2. Tìm mục Token Sharing Domain.
3. Nhập domain cha của bạn (ví dụ: interdata.io.vn hoặc yourdomain.com).
4. Bấm Save. Lúc này cookie xác thực sẽ được chia sẻ mượt mà giữa tất cả các subdomain con!

5.3. Bẫy lỗi #3: Giao diện AI sinh ra bị theme mặc định đè layout ⚠️

Hiện tượng: AI thiết kế cho bạn một giao diện hiện đại, nhưng khi xem trước thì nó bị nhét vào giữa một cái Header cồng kềnh và Footer tin tức của theme có sẵn.
Nguyên nhân: Theme đang áp dụng bố cục mặc định có sẵn sidebar và khung trang cố định.
Cách fix (Lưu ý ⚠️):
1. Vào menu Themes -> chọn Freestyle -> bấm Settings.
2. Ở mục Layout mặc định, hãy chọn Empty Layout (Layout Rỗng).
3. Khi chọn layout rỗng, EzyPlatform sẽ giải phóng hoàn toàn trang web, cho phép mã HTML do AI sinh ra làm chủ 100% từ thẻ <head> cho tới cuối chân trang.

Cấu hình Theme Freestyle chọn Empty Layout Chọn Empty Layout trong theme Freestyle để giao diện AI sinh ra hiển thị trọn vẹn.

6. Mớm "ngữ cảnh" cho AI trong Workspace

Người mới chơi Vibe Coding thường mắc một sai lầm ngây thơ: Quăng một câu prompt bừa bãi: "Viết cho tao một trang landing page bán khoá học".

Hậu quả là gì? AI sẽ nhả ra một file index.html dài 3.000 dòng, nhồi nhét cả CSS, JS, thẻ <html>, <body> lẫn lộn. Đem file đó quăng vào CMS thì vỡ trận ngay lập tức!

Để AI trở thành cộng sự đắc lực, bạn phải dạy cho nó hiểu Quy chuẩn 4 file của EzyArticle:

pages/
└── my-landing-page/
    ├── meta.json      # Khai báo slug, tiêu đề, layout, trạng thái
    ├── content.html   # Thân trang (Chỉ chứa các thẻ <section>, <div>, không lặp lại <html> hay <head>)
    ├── head.html      # Nơi nạp CSS framework (Tailwind/Bootstrap), Google Font, thẻ meta SEO
    └── foot.html      # Nơi nạp script tương tác JavaScript, thư viện animation

Tạo file `RULES.md` ngay tại root project

Tạo một file hướng dẫn ngắn gọn để trợ lý AI (như Claude Code hay Cursor) luôn đọc trước khi sinh code:

# Vibe Coding Rules for EzyPlatform

Khi sinh mã nguồn cho các trang web trong thư mục `pages/[page-name]`:
1. Luôn chia tách thành 4 file chuẩn: `meta.json`, `content.html`, `head.html`, `foot.html`.
2. Trong `content.html`: Tuyệt đối KHÔNG sinh các thẻ `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`. Chỉ viết các section nội dung component.
3. Trong `head.html`: Chỉ khai báo thẻ stylesheet `<link>` hoặc `<style>` tùy biến.
4. Trong `foot.html`: Đặt các đoạn mã JavaScript tương tác hoặc nạp script CDN.
5. Cấu trúc `meta.json` bắt buộc:
   {
     "slug": "[ten-trang]",
     "title": "[Tieu de trang]",
     "pageType": "PAGE",
     "contentType": "HTML",
     "status": "PUBLISHED"
   }

Nhờ có file ngữ cảnh này, mỗi khi bạn yêu cầu: "Tạo section Hero giới thiệu ứng dụng", AI sẽ biết tự động điền CSS vào head.html, code HTML vào content.html và viết hiệu ứng click vào foot.html. Gọn gàng và chuẩn chỉ!

7. Test drive: Chạy thử trang "Hello Vibe" đầu tiên trong 30 giây

Bây giờ là lúc tận hưởng thành quả của cả quá trình setup! Hãy cùng làm thử một trang test nhanh:

Bước 1: Tạo thư mục trang

Trong thư mục pages/, tạo thư mục con hello-vibe/ với 2 file tối thiểu:

meta.json:

{
  "slug": "hello-vibe",
  "title": "Hello Vibe Coding",
  "pageType": "PAGE",
  "contentType": "HTML",
  "status": "DRAFT"
}

content.html:

<div style="min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; text-align: center; background: #0b1120; color: white;">
  <h1 style="font-size: 3rem; margin-bottom: 1rem;">Hello Vibe Coding! 🚀</h1>
  <p style="color: #94a3b8; max-width: 500px; line-height: 1.6;">
    Trang web đầu tiên được sync trực tiếp từ VS Code lên VPS Ubuntu thành công rực rỡ!
  </p>
</div>

Bước 2: Bấm lưu & Xem trước tức thì

Bấm Ctrl + S để lưu file.
Chuột phải vào bất kỳ đâu trong file content.html -> Chọn EzyArticle: Preview Page.

Tab trình duyệt sẽ tự động mở ra với đường dẫn preview của VPS: https://1576647xxx-admin.interdata.io.vn/ezyarticle/preview?page=hello-vibe

Và đây là kết quả hiển thị ngay trước mắt bạn:

Preview trang Hello Vibe thành công trên VPS Trang "Hello Vibe" hiển thị trực tiếp trên VPS thật chỉ sau chưa đầy 3 giây đồng bộ!

=> Code local, lưu file, xem remote tức thì mà không cần gõ lệnh deploy nào 🎉! Cảm giác này thực sự rất "vibe" và đã tay!

8. Tổng kết & Kỳ tiếp theo

Thiết lập môi trường làm việc giống như việc mài sắc lưỡi rìu trước khi đốn cây. Khi hạ tầng đã thông suốt:

VPS & EzyPlatform gánh toàn bộ phần backend, cơ sở dữ liệu và bảo mật.
VS Code + Extension thu hẹp chu kỳ phản hồi từ vài phút xuống còn vài giây.
Né sạch 3 bẫy lỗi kinh điển giúp bạn không bao giờ phải bực bội vì những lỗi vặt ngớ ngẩn.

Giờ đây, "bàn làm việc" của chúng ta đã hoàn toàn sẵn sàng. Ở bài viết tiếp theo, chúng ta sẽ bước vào phần hào hứng nhất:

👉 [Vibe Coding Thực Chiến #03] Prompt Engineering Cho Dân Dev: Bẻ Nhỏ Tính Năng & Cách Giao Việc Để AI Không Nhả Ra "Một Đống Rác"!

Hẹn gặp lại anh em ở bài viết tới. Nếu trong quá trình setup anh em gặp phải lỗi nào lạ hoắc, cứ comment thẳng bên dưới bài viết này, mình sẽ cùng anh em bắt bệnh ngay nhé! 💬

AI Coding Ubuntu