Deploy ứng dụng đầu tiên lên Coolify – Static Site & React/Vue SPA

Hướng dẫn Coolify

(1) Coolify là gì? – Self-hosted thay thế Vercel, Heroku miễn phí

(2) Cài đặt Coolify trên VPS – Hướng dẫn chi tiết

(3) Giao diện Coolify- Hướng dẫn sử dụng Dashboard chi tiết

(4) Domain, DNS và SSL trên Coolify — Cấu hình tên miền và HTTPS tự động

(5) Deploy ứng dụng đầu tiên lên Coolify – Static Site & React/Vue SPA

(6) Deploy Node.js, Python, PHP lên Coolify

(7) Deploy Docker Compose trên Coolify – Ứng dụng phức tạp multi-container

(8) CI/CD trên Coolify – Tích hợp GitHub, GitLab, Bitbucket

(9) Database trên Coolify — MySQL, PostgreSQL, Redis, MongoDB

(10) One-Click Services trên Coolify — Deploy 294+ services chỉ với 1 click

(11) Multi-Server & Scaling trên Coolify — Mở rộng hệ thống

(12) Coolify Production – Backup, bảo mật

(13) Hướng dẫn deploy Laravel lên Coolify từ local lên server với CI/CD cơ bản

Đã đến lúc deploy ứng dụng đầu tiên! Bài này hướng dẫn deploy static site và React/Vue SPA lên Coolify từ GitHub, chỉ cần paste URL repo, Coolify sẽ tự build và chạy.

I. Quy trình deploy trên Coolify

Mọi deployment trên Coolify đều theo flow 5 bước:

1. Vào Project → Environment → + Add Resource
2. Chọn loại resource (Public Repo, Private Repo, Docker Image, Docker Compose, Service)
3. Cấu hình: repo URL, branch, build commands, domain
4. Click Deploy
5. Xem build logs real-time, đợi container start

II. Deploy Static Site từ Public Repository

Bắt đầu với cách đơn giản nhất, deploy một static HTML site từ GitHub public repo.

Bước 1: Tạo Resource mới

1. Vào Projects → chọn project → chọn environment (Production)
2. Click “+ Add Resource”
3. Chọn “Public Repository”

Bước 2: Nhập Repository URL

Paste URL của GitHub repo vào ô “Repository URL”, click “Check repository”.

# Ví dụ repo static site
https://github.com/coollabsio/coolify-examples

Coolify sẽ fetch repo, hiển thị danh sách branches. Chọn branch (thường là main hoặc master).

Bước 3: Chọn Build Pack

Coolify hỗ trợ nhiều build packs:

• Nixpacks (mặc định): Tự phát hiện ngôn ngữ và build. Hỗ trợ Node.js, Python, PHP, Go, Rust, Ruby, Java, .NET…
• Static: Cho pure HTML/CSS/JS: không cần build step
• Dockerfile: Dùng Dockerfile có sẵn trong repo

💡 Nixpacks thông minh, nó đọc package.json, requirements.txt, go.mod… và tự biết cách build. 90% trường hợp bạn không cần config gì thêm.

Bước 4: Cấu hình và Deploy

Sau khi chọn build pack, Coolify tạo resource và đưa bạn đến trang cấu hình:

• Domain: Nhập domain (VD: https://demo.example.com) hoặc để trống dùng IP:port
• Port: Port ứng dụng listen (Nixpacks tự detect, thường là 3000 hoặc 80)
• Build Command: Lệnh build (VD: npm run build): Nixpacks tự điền
• Start Command: Lệnh chạy app (VD: npm start)
• Base Directory: Thư mục gốc nếu repo có nhiều apps (monorepo)

Click “Deploy” → Coolify bắt đầu build.

Bước 5: Xem Build Logs

Coolify hiển thị build logs real-time, bạn thấy từng bước: clone repo → install dependencies → build → start container.

# Ví dụ build log
[+] Building with Nixpacks...
=> Detected: Node.js (package.json)
=> Installing dependencies: npm ci
=> Building: npm run build
=> Starting container on port 3000
==> Application is running!

III. Deploy React/Vue SPA

React và Vue SPA deploy giống static site, Nixpacks tự phát hiện từ package.json.

React App (Create React App / Vite)

1. New Resource → Public Repository
2. Paste URL repo React: https://github.com/username/my-react-app
3. Build Pack: Nixpacks (auto-detect)
4. Nixpacks tự chạy npm install → npm run build → serve static files

ℹ️ Với Vite React, Nixpacks tự detect và dùng port 3000. Nếu app dùng port khác, chỉnh trong Ports Exposes trên trang cấu hình resource.

Vue App (Vue CLI / Vite)

Tương tự React, Nixpacks đọc package.json, detect Vue, build và serve tự động. Không cần config thêm.

Next.js / Nuxt.js (SSR)

Next.js và Nuxt.js cũng được Nixpacks hỗ trợ tự động. Coolify detect từ next.config.js hoặc nuxt.config.ts và build đúng mode (SSR hoặc static export).

⚠️ Với Next.js standalone mode, thêm output: "standalone" vào next.config.js để Nixpacks build đúng. Không có setting này, image build sẽ rất nặng.

IV. Preview Deployments

Coolify hỗ trợ Preview Deployments: mỗi Pull Request tự động có URL riêng để test trước khi merge.

Cách bật Preview Deployments

1. Kết nối repo qua GitHub App (không dùng Public Repository)
2. Vào resource → tab Previews
3. Bật “Preview Deployments”
4. Mỗi PR mới → Coolify tự tạo container riêng với URL dạng pr-123.app.example.com
5. Khi PR đóng/merge → container tự xoá

💡 Preview deployments cần GitHub App integration (bài 8 sẽ hướng dẫn). Public Repository không hỗ trợ webhook nên không có preview deployments.

V. Auto-Deploy khi Push Code

Có 2 cách auto-deploy:

1. Webhook (GitHub App / Deploy Key)

Khi kết nối qua GitHub App, Coolify tự nhận webhook mỗi khi có push → trigger rebuild. Zero config.

2. Polling (Public Repository)

Với Public Repository (không có webhook), bật “Is Git Polling” trên resource config. Coolify sẽ check repo mỗi X phút và deploy nếu có commit mới.

VI. Xử lý lỗi thường gặp

• Build failed: “command not found”: Nixpacks không detect đúng → set Build Pack thủ công hoặc thêm Dockerfile
• App chạy nhưng trắng trang: Port sai: kiểm tra port app listen và cập nhật Ports Exposes
• 502 Bad Gateway: Container chưa start xong hoặc crash: xem Logs tab
• Permissions error khi install: Một số npm packages cần thêm --unsafe-perm: thêm vào Build Command

VII. Tổng kết

Deploy ứng dụng trên Coolify cực kỳ đơn giản, paste URL repo, chọn build pack, click Deploy. Nixpacks xử lý hầu hết mọi thứ tự động. Bài tiếp theo sẽ hướng dẫn deploy backend applications: Node.js, Python, PHP.