Hướng dẫn cài đặt Next.js trên aaPanel

I. Giới thiệu về Next.js và aaPanel

1. Next.js là gì?

Next.js là một framework mạnh mẽ dựa trên React, hỗ trợ cả phát triển ứng dụng frontend và backend với khả năng render phía server (Server-Side Rendering – SSR). Nó cung cấp các tính năng tối ưu hóa như phân trang tự động, tải trước, và hỗ trợ SEO tốt.

2. aaPanel là gì?

aaPanel là một công cụ quản lý máy chủ mạnh mẽ và dễ sử dụng, giúp bạn cài đặt, quản lý và giám sát các dịch vụ như web, cơ sở dữ liệu và email thông qua giao diện web trực quan. Cài đặt và chạy ứng dụng Next.js trên aaPanel sẽ giúp bạn quản lý máy chủ dễ dàng hơn mà không cần sử dụng dòng lệnh phức tạp.

II. Yêu cầu hệ thống

Để cài đặt và chạy Next.js trên aaPanel, bạn cần đảm bảo rằng hệ thống của mình đáp ứng các yêu cầu sau:

Hệ điều hành: Ubuntu 18.04 trở lên, Debian 9 hoặc 10, Almalinux
RAM: Tối thiểu 2GB
Node.js: Phiên bản 18.17 trở lên
aaPanel: Phiên bản mới nhất

III. Cài đặt aaPanel và Node.js

Đầu tiên, bạn cần cài đặt aaPanel trên máy chủ của mình. Làm theo các bước sau, ở đây mình sử dụng Ubuntu 22.04.

1. Cài đặt aaPanel

Đầu tiên, bạn cần đăng nhập vào VPS của bạn thông qua SSH hoặc truy cập VPS hoặc máy chủ của bạn với quyền root trước. Nếu bạn chưa biết cách SSH vào VPS hoặc Server của bạn thì bạn có thể tham khảo bài viết hướng dẫn sau:

• Hướng dẫn đăng nhập vào VPS Linux với giao thức SSH Bấm tại đây.

Sau khi bạn đăng nhập vào VPS, bạn cập nhật các gói hệ thống và cài đặt aaPanel với các lệnh sau:

AZDIGI Tutorial

sudo apt-get update -y
    

Sau khi đã cập nhật các gói hệ thống, tiếp theo bạn chạy lệnh sau để cài đặt aaPanel.

AZDIGI Tutorial

URL=https://www.aapanel.com/script/install_7.0_en.sh && if [ -f /usr/bin/curl ];then curl -ksSO "$URL" ;else wget --no-check-certificate -O install_7.0_en.sh "$URL";fi;bash install_7.0_en.sh aapanel
    

Sau khi cài đặt hoàn tất, bạn sẽ nhận được thông tin truy cập giao diện web của aaPanel, bao gồm địa chỉ, tên người dùng, và mật khẩu.

Bạn có thể tham khảo bài viết hướng dẫn sau, nếu chưa thao tác cài aaPanel được nhé:

• Hướng dẫn cài đặt AAPanel

2. Cài đặt Node.js trên aaPanel

Bạn truy cập và đăng nhập vào giao diện aaPanel, tiếp đến bạn vào App Store trong aaPanel và tìm kiếm node.js và bấm Install để cài đặt Node.js version manager.

Sau khi quá trình cài đặt Node.js version manager hoàn tất, tiếp đến bạn cài phiên bản cho node.js. Để cài phiên bản, bạn bấm vào Setting.

Lúc này sẽ hiển thị danh sách các phiên bản node.js (bao gồm Testing Version và Stable Version). Bạn lựa chọn và cài đặt phiên bản phù hợp với mã nguồn dự án của bạn.

Lưu ý:

• Nếu bạn không thấy có các phiên bản mới và cao hơn thì bạn click vào nút Update version list để update lại danh sách các phiên bản.
• Bạn nên cài đặt các phiên bản thuộc Stable Version.

Ở đây mình sẽ cài phiên bản v20.18.0 Stable Version.

Như vậy là quá trình cài đặt node.js đã hoàn tất. Tiếp đến chúng ta triển khai ứng dụng Next.js.

IV. Cài đặt hoặc triển khai dự án Next.js

1. Cài Next.js mặc định.

Để triển khai Next.js mới, bạn truy cập vào lại VPS thông qua SSH. Sau đó bạn di chuyển tới thư mục /www/wwwroot với lệnh sau.

AZDIGI Tutorial

cd /www/wwwroot/
    

Sau đó bạn sử dụng hai lệnh bên dưới để cài Next.js.

AZDIGI Tutorial

ln -s /www/server/nodejs/v20.18.0/bin/node /usr/bin/node
/www/server/nodejs/v20.18.0/bin/yarn create next-app 
    

Chú thích:

• v20.18.0: Bạn thay lại thành phiên bản node.js mà bạn đã cài ở bước trên.
• <Tên_dự_án>: Bạn thay lại thành tên thư mục dự án của bạn.

2. Triển khai Next.js đã có.

Trường hợp dự án của bạn đã có dữ liệu rồi và bạn muốn upload lên aaPanel thì bạn không cần phải sử dụng lệnh cài đặt trên.

Đầu tiên bạn vào mục Files → New sau đó chọn New directory để tạo thư mục dự án của bạn.

Sau đó bạn nhập tên thư mục theo dự án của bạn hoặc tên bất kì bạn muốn tạo.

Khi bạn tạo thư mục hoàn tất, bạn vào thư mục vừa tạo và upload source code Next.js.

V. Cấu hình Next.js

Sau khi bạn cài đặt mới hoặc upload lên hoàn tất, tiếp theo là cấu hình để hoạt động. Bạn vào mục Website → Node Project → Add Node project

Ở mục Path bạn bấm vào icon cuối dòng, chọn thư mục chứa dự án Next.js và bấm Confirm.

Tiếp theo phần Name mặc định sẽ tự động điền theo thông tin tên thư mục dự án mà bạn chọn, trường hợp nếu tên thư mục dự án của bạn có kí tự đặt biệt thì bạn nên thay đổi lại tên với định dạng chữ, số, dấu gạch dưới.

Tiếp đến mục Run opt bạn chọn build [next build] để build Next.js.

Trường hợp nếu bạn muốn chạy với lệnh khác thì bạn mở file package.json trong thư mục dự án và thêm lệnh bạn muốn chạy, sau đó quay lại Run opt chọn lệnh bạn vừa thêm trong file package.json.

Mục Port bạn nhập 3000. Các mục User, Node, Remark bạn để mặc định. Tiếp đến mục Domain name bạn nhập tên miền của bạn, và bấm Confirm để hoàn tất thiết lập.

Lúc này bạn sẽ thấy trạng thái node.js đang Running, tuy nhiên quá trình vẫn chưa hoàn tất và để hoàn tất bạn cần thao tác thêm một bước nữa.

Bạn bấm vào tên dự án

Sau đó bạn vào mục Project log để kiểm tra xem quá trình run build đã hoàn tất hết chưa.

Lưu ý:

Phần Project log không hiển thị realtime, nên bạn tắt và mở lại để kiểm tra chính xác nhé, hoặc bạn có thể để ý phần trạng thái, nếu trạng thái là Stopped thì lúc này bạn vào mục Project log để kiểm tra.

Sau khi quá trình run build hoàn tất và trạng thái là Stopped, bạn vào mục Project config chọn lại Run opt thành start [next start] và bấm Save lại.

Cuối cùng bạn vào mục Service status và Restart lại node.js.

Như vậy là quá trình cài đặt và cấu hình đã hoàn tất, bạn có thể kiểm tra tiến trình chạy ở mục Load status. Và truy cập tên miền để kiểm tra kết quả.

Trên đây là các bước cơ bản để cài đặt và triển khai ứng dụng Next.js trên aaPanel. Quá trình này giúp bạn dễ dàng quản lý ứng dụng của mình trong môi trường sản xuất với các công cụ hỗ trợ mạnh mẽ từ aaPanel.

Chúc bạn thực hiện thành công.

Nếu các bạn cần hỗ trợ các bạn có thể liên hệ bộ phận hỗ trợ theo các cách bên dưới:

• Hotline 247: 028 888 24768
• Ticket/Email: Bạn dùng email đăng ký dịch vụ gửi trực tiếp về: support@azdigi.com.