FlashPanel
Tìm kiếm K

Tiếng Việt

English

Tiếng Việt

English

Appearance

Deploy ứng dụng Next.js ​

Giả sử bạn có 1 ứng dụng Next.js muốn deploy dưới domain app.domain.com

Yêu cầu ​

  • Máy chủ đã kết nối với FlashPanel
  • DNS domain đã trỏ về máy chủ

Bước 1: Cài đặt ứng dụng cần thiết ​

Đảm bảo NodeJS và PM2 được cài đặt trên máy chủ. Xem hướng dẫn cài đặt ứng dụng tại Quản lý ứng dụng.

WARNING

Nếu bạn sử dụng pnpm hoặc yarn làm package manager, hãy cài đặt ứng dụng tương ứng qua trang Quản lý ứng dụng.

Bước 2: Tạo trang web ​

  1. Vào trang quản lý máy chủ, nhấp vào menu Sites ở thanh bên, sau đó nhấp nút Create Website
  2. Nhập domain (ví dụ: app.domain.com)
  3. Nhập Proxy Port — port mà ứng dụng Next.js của bạn chạy (mặc định là 3000)

Bước 3: Cài đặt mã nguồn ​

Cài đặt mã nguồn cho trang web từ git hoặc tự tải lên. Xem hướng dẫn chi tiết tại Cài đặt mã nguồn. Để truy cập, vào trang quản lý trang web và nhấp vào menu Source Code ở thanh bên.

Bước 4: Build ứng dụng ​

Mở terminal máy chủ (qua SSH hoặc tính năng terminal) và di chuyển đến thư mục website để cài đặt dependencies và build ứng dụng:

bash
cd /home/flashpanel/app.domain.com

# Cài đặt dependencies
npm install

# Build ứng dụng production
npm run build

TIP

Thay app.domain.com bằng domain thực tế của bạn.

Bước 5: Khởi chạy ứng dụng ​

Cách A: Sử dụng PM2 Dashboard (Khuyến nghị) ​

Nếu đã cài đặt ứng dụng PM2, bạn có thể sử dụng PM2 Dashboard trên trang quản lý máy chủ:

  1. Nhấp vào nút Add New
  2. Nhập command: npm start --name my-nextjs-app -- -p 3000
  3. Nhấn Start

Cách B: Sử dụng SSH ​

Bạn cũng có thể khởi chạy ứng dụng thủ công qua SSH:

bash
cd /home/flashpanel/app.domain.com
pm2 start npm --name my-nextjs-app -- start -- -p 3000

WARNING

Đảm bảo port (3000) khớp với Proxy Port bạn đã cấu hình khi tạo trang web.

Lưu danh sách process PM2 ​

Để ứng dụng tự động khởi động lại sau khi server reboot:

bash
pm2 save

Bước 6: Thiết lập Deployment Script (Tùy chọn) ​

Để tự động hóa các lần deploy sau, bạn có thể cấu hình Deployment Script cho trang web. Một deployment script Next.js điển hình:

bash
cd /home/flashpanel/app.domain.com
git pull origin main
npm install
npm run build
pm2 restart my-nextjs-app

Cập nhật ứng dụng ​

Khi push code mới, bạn cần rebuild và restart:

  • Nếu đã cấu hình Deployment Script, chỉ cần nhấp Deploy trong trang quản lý trang web
  • Nếu sử dụng PM2 Dashboard, rebuild thủ công rồi nhấp nút Restart tương ứng với process của bạn
  • Hoặc chạy qua SSH:
bash
cd /home/flashpanel/app.domain.com
git pull origin main
npm install
npm run build
pm2 restart my-nextjs-app

Biến môi trường ​

Next.js sử dụng file .env để cấu hình biến môi trường. Tạo hoặc chỉnh sửa file .env trong thư mục website:

bash
cd /home/flashpanel/app.domain.com
nano .env

Thêm các biến môi trường:

properties
DATABASE_URL=mysql://user:password@localhost:3306/mydb
NEXT_PUBLIC_API_URL=https://api.domain.com
NODE_ENV=production

WARNING

Sau khi thay đổi biến môi trường, bạn cần rebuild (npm run build) và restart ứng dụng để thay đổi có hiệu lực. Các biến có tiền tố NEXT_PUBLIC_ được nhúng vào lúc build.

Xử lý sự cố ​

Ứng dụng không khởi chạy được ​

  1. Kiểm tra logs PM2: sử dụng nút View Log trong PM2 Dashboard, hoặc chạy pm2 logs my-nextjs-app
  2. Xác minh build thành công: npm run build
  3. Kiểm tra port đã bị sử dụng chưa: sudo lsof -i :3000

Lỗi 502 Bad Gateway ​

  1. Xác minh ứng dụng đang chạy: kiểm tra PM2 Dashboard hoặc chạy pm2 status
  2. Đảm bảo port ứng dụng khớp với Proxy Port đã cấu hình cho trang web
  3. Kiểm tra logs ứng dụng để xem lỗi khởi động