Deploy Website lên VPS với Caddy Server (Đơn giản nhất)

devopsreactnextjsnodejs
Deploy Website lên VPS với Caddy Server (Đơn giản nhất)
3.2k 22 ngày trước
##Comments

Deploy một trang web lên server VPS có thể hơi phức tạp với người mới. Bài viết này sẽ hướng dẫn các bạn cách đơn giản nhất để đưa trang web của mình lên mạng sử dụng Caddy Server, một web server hiện đại, tự động cấu hình HTTPS.

Chuẩn bị

Trước khi bắt đầu, các bạn cần chuẩn bị:

  1. Source code: Một dự án web đã sẵn sàng để deploy. Trong bài viết này, chúng ta sẽ sử dụng ví dụ từ repository: [email protected]:duongnguyen321/test.git (các bạn có thể xem trên GitHub).
  2. Server VPS: Một máy chủ ảo (VPS) chạy Ubuntu. các bạn cần setup môi trường Node.js cơ bản. Hãy làm theo hướng dẫn tại bài viết: Hướng dẫn setup môi trường Node.js trên VPS.
  3. Tài khoản Cloudflare: Đăng ký một tài khoản miễn phí tại Cloudflare.
  4. Domain: Một tên miền đã đăng ký, các bạn cần trỏ Name Server (NS) của domain về Cloudflare theo hướng dẫn trong dashboard quản lý domain của các bạn và chờ đợi cập nhật thành công (thường mất vài phút đến vài giờ).

Các bước thực hiện

1. SSH vào VPS

Mở terminal trên máy tính của các bạn và kết nối đến VPS bằng lệnh SSH:

ssh your_username@your_vps_ip

Thay your_username bằng tên người dùng (ví dụ: các bạn) và your_vps_ip bằng địa chỉ IP của VPS.

2. Setup VPS (Nếu chưa làm)

Nếu các bạn chưa setup môi trường Node.js, hãy làm theo hướng dẫn trong bài viết đã đề cập ở phần chuẩn bị: Hướng dẫn setup môi trường Node.js trên VPS.

3. Clone source code và cấu hình môi trường

Di chuyển đến thư mục các bạn muốn chứa source code (ví dụ: /var/www) và clone repository:

# Ví dụ: tạo thư mục nếu chưa có
sudo mkdir -p /var/www
sudo chown $USER:$USER /var/www # Cấp quyền cho user hiện tại
cd /var/www

# Clone code
git clone [email protected]:duongnguyen321/test.git # Hoặc https://github.com/duongnguyen321/test.git

# Di chuyển vào thư mục dự án
cd test

Nếu dự án của các bạn cần file môi trường (.env), hãy tạo và chỉnh sửa nó bằng vim:

vi .env

Nhấn phím i để vào chế độ Insert, dán hoặc gõ các biến môi trường cần thiết. Sau khi xong, nhấn Esc để thoát chế độ Insert, sau đó gõ :wq và nhấn Enter để lưu và thoát vim.

4. Cài đặt Caddy Server

Caddy là một web server mạnh mẽ, tự động quản lý HTTPS. Cài đặt Caddy trên Ubuntu bằng các lệnh sau:

# Cài đặt các gói cần thiết
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl

# Thêm GPG key của Caddy
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg

# Thêm repository của Caddy
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list

# Cập nhật danh sách gói và cài đặt Caddy
sudo apt update
sudo apt install caddy

5. Cài đặt PM2

PM2 là một process manager cho Node.js, giúp ứng dụng của các bạn chạy nền và tự động khởi động lại khi cần.

npm install -g pm2

6. Tìm hiểu về PM2 và Caddy (Tham khảo)

Để hiểu rõ hơn về cách sử dụng PM2 và Caddy, các bạn có thể tham khảo bài viết: Mình hay làm gì trên server Ubuntu?.

7. Cài đặt dependencies

Di chuyển vào thư mục dự án (nếu các bạn chưa ở đó) và cài đặt các gói cần thiết. Chúng ta sẽ sử dụng bun thay cho npm hoặc yarn vì tốc độ và hiệu năng vượt trội.

cd /var/www/test # Đảm bảo các bạn đang ở đúng thư mục dự án

Nếu chưa cài bun, hãy cài đặt theo hướng dẫn tại bun.sh. Sau đó cài dependencies:

bun install

Tìm hiểu thêm về bun: Dùng Bun.js đi, đừng dùng NPM nữa!.

8. Build dự án

Chạy lệnh build theo cấu hình trong package.json của dự án. Ví dụ:

bun run build

Lệnh này có thể khác tùy thuộc vào dự án của các bạn (ví dụ: npm run build, yarn build).

9. Thử chạy bản production

Trước khi chạy chính thức với PM2, hãy thử chạy trực tiếp để đảm bảo không có lỗi:

bun run preview # Hoặc lệnh tương ứng để chạy production mode, ví dụ: node build/index.js, bun start,...

Truy cập http://your_vps_ip:PORT (thay PORT bằng cổng mà ứng dụng đang chạy, thường là 3000, 8080,…) trên trình duyệt để kiểm tra. Nhấn Ctrl + C để dừng lại sau khi kiểm tra xong.

10. Chạy ứng dụng với PM2

Sử dụng PM2 để chạy ứng dụng nền và quản lý nó:

# pm2 start --name="ten-app" "lenh-chay-app"
pm2 start --name="test-project" "bun run preview" # Thay "bun run preview" bằng lệnh chạy production của các bạn

Lệnh này sẽ khởi động ứng dụng của các bạn với tên là test-project.

11. Kiểm tra logs PM2

Đảm bảo ứng dụng đã chạy thành công bằng cách xem logs:

# pm2 logs ten-app
pm2 logs test-project

Nhấn Ctrl + C để thoát khỏi chế độ xem log. Nếu không có lỗi đỏ và các bạn thấy các thông báo khởi động thành công, ứng dụng đã sẵn sàng.

12. Cấu hình Caddy

Bây giờ, chúng ta sẽ cấu hình Caddy để trỏ domain của các bạn đến ứng dụng đang chạy trên một cổng cục bộ (ví dụ: 3000).

12.1 Mở file cấu hình Caddy:

Sử dụng vim (hoặc nano) để chỉnh sửa file Caddyfile. các bạn sẽ cần quyền sudo:

sudo vi /etc/caddy/Caddyfile

12.2 Thêm cấu hình:

Xóa nội dung mặc định (nếu có) và thêm cấu hình sau:

your_domain.com:80 {
    reverse_proxy localhost:3000 # Thay 3000 bằng cổng ứng dụng của các bạn đang chạy
    # Các cấu hình khác nếu cần
}

Giải thích:

  • your_domain.com: Thay bằng tên miền thực tế của các bạn.
  • :80: Chúng ta chỉ định cổng 80 vì đang sử dụng Cloudflare. Cloudflare sẽ xử lý HTTPS cho chúng ta (ở chế độ Flexible hoặc Full). Caddy sẽ nhận request HTTP trên cổng 80 từ Cloudflare và proxy nó đến ứng dụng. Đây là cách đơn giản nhất trong khuôn khổ bài viết này. Nếu không dùng Cloudflare hoặc muốn Caddy tự quản lý SSL (chế độ Full (Strict) trên Cloudflare), các bạn chỉ cần ghi your_domain.com và Caddy sẽ tự động lấy chứng chỉ SSL và lắng nghe trên cổng 443.
  • reverse_proxy localhost:3000: Chỉ dẫn Caddy chuyển tiếp các request đến ứng dụng đang chạy trên localhost tại cổng 3000.

Nhấn Esc, gõ :wq, và nhấn Enter để lưu và thoát vim.

12.3 Restart Caddy:

Áp dụng cấu hình mới bằng cách khởi động lại Caddy:

sudo systemctl restart caddy

Kiểm tra trạng thái Caddy để đảm bảo không có lỗi:

sudo systemctl status caddy

13. Kiểm tra kết quả

Mở trình duyệt và truy cập vào https://your_domain.com. Trang web của các bạn bây giờ đã được deploy!

Xử lý sự cố:

  • Cache: Nếu không thấy thay đổi, hãy thử xóa cache trình duyệt hoặc mở bằng chế độ ẩn danh.
  • Cloudflare: Đảm bảo cấu hình DNS trên Cloudflare đã trỏ đúng đến IP của VPS và chế độ Proxy (đám mây màu cam) đang bật. Chờ đợi DNS cập nhật hoàn toàn.
  • Firewall: Kiểm tra firewall trên VPS (ví dụ: ufw) có cho phép truy cập cổng 80 và 443 không (sudo ufw allow 80, sudo ufw allow 443).
  • Logs: Kiểm tra lại logs của PM2 (pm2 logs test-project) và Caddy (journalctl -u caddy --no-pager | less) để tìm lỗi.
  • Curl: Thử curl your_domain.com hoặc curl http://localhost:3000 ngay trên VPS để xem có nhận được phản hồi không.

Nếu vẫn gặp khó khăn, đừng ngần ngại để lại bình luận bên dưới hoặc liên hệ để được hỗ trợ.

Demo

Đây là một ví dụ về trang web có thể được deploy theo cách này:

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	iframe {
		width: 100vw;
		height: 100vh;
	}
</style>
<iframe src="https://cowdown.vercel.app/" title="Trang web demo"></iframe>

Chúc mừng! các bạn đã deploy thành công trang web của mình lên VPS bằng Caddy.

0%