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

Trong bài viết này, mình sẽ hướng dẫn bạn từng bước từ cài đặt Node.js để đảm bảo ứng dụng Next.js của bạn hoạt động mượt mà trên hosting cPanel của bạn.

Bước 1: Cài Đặt Node.js

1. Đăng nhập vào cPanel.

Bạn truy cập vào bảng điều khiển cPanel của bạn thông qua thông tin mà AZDIGI có gửi qua gmail của bạn, sau khi bạn đăng kí dịch vụ hosting. Nếu bạn chưa biết cách truy cập vào hosting thì bạn có thể tham khảo bài viết hướng dẫn sau:

• Cách đăng nhập vào cPanel của Hosting

2. Tìm và mở ứng dụng Node.js.

Trong cPanel, bạn tìm mục Software → Setup Node.js App để tạo ứng dụng Node.js.

Hoặc bạn có thể sử dụng công cụ tìm kiếm trên cPanel để tìm ứng dụng Node.js.

3. Tạo một ứng dụng Node.js mới.

Sau khi bạn đã truy cập vào mục Setup Node.js App, tiếp đến bạn bấm vào CREATE APPLICATION.

Lúc này sẽ xuất hiện phần thông tin cần chọn và điền để tạo ứng dụng node.js.

• Node.js version: Bạn chọn phiên bản Node.js tuỳ vào nhu cầu của dự án hoặc bạn muốn sử dụng(Nếu được bạn nên lựa chọn phiên bản mới nhất). Ở đây mình chọn phiên bản 20.12.2.
• Application mode: Là chế độ ứng dụng, với mục này sẽ có 2 phần là Development và Production. Chế độ này thiết lập biến môi trường NODE_ENV tương ứng để bạn có thể lựa chọn, tuỳ vào dự án và nhu cầu mà bạn sử dụng để triển khai. Ở đây mình sẽ chọn Production.
• Application root: Mục này bạn điền thư mục mà bạn sẽ triển khai ứng dụng Next.js của bạn. Trong bài này thư mục mà mình sẽ triển khai ứng dụng là next.it.info.vn.
• Application URL: Đây là URL mà qua đó ứng dụng của bạn sẽ có thể truy cập từ trình duyệt.
• Application startup file: Là file khởi động chính của ứng dụng Node.js. Thông thường, đây là file mà Node.js sẽ chạy đầu tiên khi ứng dụng bắt đầu, như index.js, server.js, hoặc một file khác do bạn chỉ định.
• Environment Variables: Là nơi bạn có thể thiết lập các biến môi trường cho ứng dụng của mình, chẳng hạn như các API keys, database, hoặc các biến tùy chỉnh khác mà ứng dụng của bạn cần.

Quá trình chọn và điền thông tin để tạo ứng dụng hoàn tất, bạn bấm CREATE để tạo. Như vậy là bạn đã tạo thành công một ứng dụng node.js.

Bước 2: Triển Khai Ứng Dụng Next.js

Đầu tiên bạn vào thư mục chứa dự án của bạn(Thư mục này bạn đã điền ở phần Application root), và bạn cần phải xoá hết các thư mục / file mặc định của node.js. Các thư mục / file này khi bạn tạo ứng dụng node.js sẽ tự tạo ra, nên cần phải xoá đi.

Sau đó bạn vào môi trường node.js để thao tác lệnh cài đặt next.js.

Và để vào bên trong môi trường node.js thao tác lệnh, bạn bấm vào đường dẫn ở mục Enter to the virtual environment.To enter to virtual environment, run the command: để copy.

Sau đó bạn tìm tới Terminal và paste vào và Enter.

Như vậy là bạn đã vào môi trường node.js, bạn sử dụng lệnh bên dưới để cài Next.js.

npx create-next-app@latest .
    

khi bạn tạo một ứng dụng Next.js mới. Các câu hỏi xuất hiện là các tùy chọn cấu hình mà bạn có thể chọn khi tạo ứng dụng. Trong đó:

• Would you like to use TypeScript?: Hỏi bạn có muốn sử dụng TypeScript không? Bạn chọn Yes nếu bạn muốn dùng TypeScript, và No nếu bạn chỉ muốn dùng JavaScript.
• Would you like to use ESLint?: ESLint là một công cụ phân tích mã nguồn, giúp phát hiện và sửa các vấn đề trong JavaScript và TypeScript. Chọn Yes để sử dụng ESLint, và No nếu bạn không muốn dùng.
• Would you like to use Tailwind CSS?: Hỏi bạn có muốn sử dụng Tailwind CSS không. Tailwind CSS là một framework CSS tiện lợi, giúp xây dựng giao diện nhanh chóng và linh hoạt. Chọn Yes để tích hợp Tailwind CSS vào dự án, hoặc No nếu bạn không muốn sử dụng.
• Would you like to use src/ directory?: Hỏi bạn có muốn đặt mã nguồn của ứng dụng trong thư mục src/ không. Việc sử dụng thư mục src/ giúp tổ chức mã nguồn rõ ràng hơn. Chọn Yes để sử dụng, hoặc No nếu bạn muốn mã nguồn ở thư mục gốc của dự án.
• Would you like to use App Router? (recommended): App Router là cách quản lý routing mới trong Next.js, cho phép tổ chức và quản lý routes một cách hiệu quả hơn. Đây là cách được khuyến nghị cho các dự án Next.js mới. Chọn Yes để sử dụng App Router, hoặc No nếu bạn muốn dùng hệ thống routing cũ.
• Would you like to customize the default import alias (@/*)?: Hỏi bạn có muốn tùy chỉnh alias import mặc định không. Alias giúp bạn có thể sử dụng đường dẫn ngắn gọn khi import các module trong dự án. Chọn Yes nếu bạn muốn thiết lập alias tùy chỉnh, hoặc No nếu bạn muốn giữ alias mặc định @/*.

Quá trình cài đặt sau khi hoàn tất sẽ báo Success!.

Tiếp theo bạn sử dụng lệnh npm run build

npm run build
    

Bước 3: Cấu hình để truy cập

Tạo file index.js hoặc server.js.

Bạn kiểm tra lại ở mục Application startup file này trong node.js của bạn đang cấu hình là file tên gì rồi bạn tạo file trong thư mục của dự án next.js của bạn đúng file đó bạn nhé. Vì Application startup file mình điền là server.js nên mình sẽ tạo file server.js.

Đây là nơi bạn sẽ cấu hình cách mà Passenger khởi động ứng dụng Next.js của bạn. Bạn thêm đoạn cấu hình sau vào file index.js hoặc server.js

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(process.env.PORT || 3000, () => {
    console.log(`> Ready on http://localhost:${process.env.PORT || 3000}`);
  });
});

Tạo file .htaccess

Sau khi bạn tạo file index.js hoặc server.js và thêm đoạn cấu hình trên vào trong file index.js hoặc server.js. Bạn tạo tiếp một file .htaccess rỗng.

Bước 4: Khởi Động và Kiểm Tra

Như vậy là quá trình cài đặt đã hoàn tất, bạn truy cập Setup Node.js App rồi STOP APP và START APP lại.

Cuối cùng bạn truy cập URL của ứng dụng Next.js (domain hoặc subdomain của bạn) để đảm bảo rằng ứng dụng đang hoạt động chính xác.

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.