Cách cài đặt Next.js trên Ubuntu 22.04

[theanh]

Next.js là ứng dụng React miễn phí, mã nguồn mở và cấp độ sản xuất cung cấp cho bạn các khối xây dựng để tạo các ứng dụng web siêu nhanh và cực kỳ thân thiện với người dùng. Ứng dụng này được Vercel tạo ra và cho phép các ứng dụng web dựa trên React với kết xuất phía máy chủ và tạo các trang web tĩnh. Next.js có thể xử lý tất cả các cấu hình cần thiết cho React và cung cấp các tính năng và tối ưu hóa bổ sung cho ứng dụng của bạn.

Hướng dẫn này sẽ chỉ cho bạn cách cài đặt Next.js với Nginx làm proxy ngược trên Ubuntu 22.04.

Điều kiện tiên quyết​

• Một máy chủ chạy Ubuntu 22.04.
• Một tên miền hợp lệ được trỏ đến IP máy chủ của bạn.
• Một mật khẩu gốc được cấu hình trên máy chủ.

Cài đặt Node.js​

Trước khi bắt đầu, Node.js phải được cài đặt trên máy chủ của bạn. Trước tiên, hãy cài đặt tất cả các phụ thuộc cần thiết bằng lệnh sau:

apt install curl gnupg2 wget -y

Tiếp theo, hãy thêm kho lưu trữ Node.js bằng lệnh sau lệnh:

curl -sL https://deb.nodesource.com/setup_18.x | bash -

Sau khi kho lưu trữ được thêm vào, bạn có thể cài đặt Node.js bằng lệnh sau:

apt install nodejs -y

Sau khi cài đặt, hãy xác minh phiên bản Node.js bằng lệnh sau lệnh:

node -v

Bạn sẽ thấy kết quả sau:

v18.12.1

Bạn cũng có thể xác minh phiên bản NPM bằng cách sử dụng lệnh sau lệnh:

npm -v

Bạn sẽ thấy đầu ra sau:

8.19.2

Tạo ứng dụng Next.js​

Bạn có thể sử dụng công cụ npx để tạo ứng dụng Next.js. npx là một công cụ CLI giúp dễ dàng cài đặt và quản lý các phụ thuộc được lưu trữ trong sổ đăng ký npm.

Chạy lệnh sau để tạo ứng dụng Next.js có tên là nextapp:

npx create-next-app nextapp

Bạn sẽ nhận được kết quả đầu ra sau:

Need to install the following packages: [emailprotected]
Ok to proceed? (y) y
? Would you like to use TypeScript with this project? … No / Yes
? Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /root/nextapp.
Using npm.
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next
added 237 packages, and audited 238 packages in 20s
78 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities
Initializing project with template: default
Success! Created nextapp at /root/nextapp

Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Chạy ứng dụng Next.js​

Sau khi tạo ứng dụng Next.js, hãy thay đổi thư mục thành nextapp và chạy ứng dụng bằng lệnh sau:

cd nextapp
npm run dev

Bạn sẽ nhận được kết quả sau:

> [emailprotected] dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 3.2s (154 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

Nhấn CTRL+C để dừng ứng dụng. Sau đó, xây dựng ứng dụng bằng lệnh sau:

npm run build

Bạn sẽ nhận được kết quả đầu ra sau:

> [emailprotected] build
> next build
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Route (pages) Size First Load JS
? ? / 4.83 kB 83.7 kB
? ? css/ae0e3e027412e072.css 707 B
? /_app 0 B 78.9 kB
? ? /404 212 B 79.1 kB
? λ /api/hello 0 B 78.9 kB
+ First Load JS shared by all 79.2 kB ? chunks/framework-0f397528c01bc177.js 45.7 kB ? chunks/main-5cebf592faf0463a.js 31.8 kB ? chunks/pages/_app-05f53d08443c56f6.js 402 B ? chunks/webpack-2369ea09e775031e.js 1.02 kB ? css/ab44ce7add5c3d11.css 247 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
? (Static) automatically rendered as static HTML (uses no initial props)

Tiếp theo, khởi động ứng dụng Next.js bằng lệnh sau lệnh:

npm start

Bạn sẽ thấy kết quả sau:

> [emailprotected] start
> next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Nhấn CTRL+C để dừng ứng dụng.

Quản lý ứng dụng Next.js bằng PM2​

PM2 là trình quản lý quy trình nâng cao dành cho các ứng dụng Node.js sản xuất. Nó cho phép bạn giữ cho các ứng dụng hoạt động mãi mãi.

Để cài đặt PM2, hãy chạy lệnh sau:

npm install pm2@latest -g

Tiếp theo, hãy khởi động ứng dụng Next.js của bạn bằng PM2 bằng cách chạy lệnh sau:

pm2 start "npm start"

Bạn sẽ nhận được thông báo sau đầu ra:

[PM2] Starting /usr/bin/bash in fork_mode (1 instance)
[PM2] Done.
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
? id ? name ? namespace ? version ? mode ? pid ? uptime ? ? ? status ? cpu ? mem ? user ? watching ?
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
? 0 ? npm start ? default ? N/A ? fork ? 1321 ? 0s ? 0 ? online ? 0% ? 24.5mb ? root ? disabled ?
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Tại thời điểm này, ứng dụng Next.js được khởi động và lắng nghe trên cổng 3000. Bạn có thể kiểm tra bằng lệnh sau:

ss -antpl | grep 3000

Bạn sẽ thấy thông tin sau đầu ra:

LISTEN 0 511 0.0.0.0:3000 0.0.0.0:* users:(("node",pid=1337,fd=18))

Bạn cũng có thể kiểm tra trạng thái của ứng dụng Next.js bằng lệnh sau:

pm2 show "npm start"

Bạn sẽ nhận được thông tin sau đầu ra:

Describing process with id 0 - name npm start
???????????????????????????????????????????????????????????
? status ? online ?
? name ? npm start ?
? namespace ? default ?
? version ? N/A ?
? restarts ? 0 ?
? uptime ? 59s ?
? script path ? /usr/bin/bash ?
? script args ? -c npm start ?
? error log path ? /root/.pm2/logs/npm-start-error.log ?
? out log path ? /root/.pm2/logs/npm-start-out.log ?
? pid path ? /root/.pm2/pids/npm-start-0.pid ?
? interpreter ? none ?
? interpreter args ? N/A ?
? script id ? 0 ?
? exec cwd ? /root/nextapp ?
? exec mode ? fork_mode ?
? node.js version ? N/A ?
? node env ? N/A ?
? watch & reload ? ? ?
? unstable restarts ? 0 ?
? created at ? 2022-11-12T13:30:39.734Z ?
??????????????????????????????????????????????????????????? Divergent env variables from local env Add your own code metrics: http://bit.ly/code-metrics Use `pm2 logs npm start [--lines 1000]` to display logs Use `pm2 env 0` to display environment variables Use `pm2 monit` to monitor CPU and Memory usage npm start

Sau khi hoàn tất, bạn có thể tiến hành cài đặt và cấu hình Nginx.

Cấu hình Nginx làm Proxy ngược cho Ứng dụng Next.js​

Bạn nên cài đặt và cấu hình Nginx làm proxy ngược để truy cập ứng dụng Next.js.

Đầu tiên, hãy cài đặt gói Nginx với các lệnh sau lệnh:

apt install nginx -y

Sau khi Nginx được cài đặt, hãy tạo tệp cấu hình máy chủ ảo Nginx:

nano /etc/nginx/conf.d/next.conf

Thêm nội dung sau cấu hình:

server { server_name next.example.com; location / { # Reverse proxy for Next server proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Port $server_port; }
}

Lưu và đóng tệp. Sau đó, hãy xác minh Nginx xem có lỗi cấu hình cú pháp nào không:

nginx -t

Bạn sẽ thấy đầu ra sau:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Tiếp theo, hãy khởi động lại dịch vụ Nginx để áp dụng thay đổi:

systemctl restart nginx

Bạn cũng có thể kiểm tra trạng thái của Nginx bằng lệnh sau:

systemctl status nginx

Bạn sẽ thấy đầu ra sau:

? nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Sat 2022-11-12 13:35:46 UTC; 6s ago Docs: man:nginx(8) Process: 2023 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Process: 2024 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Main PID: 2025 (nginx) Tasks: 3 (limit: 464122) Memory: 3.3M CGroup: /system.slice/nginx.service ??2025 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;" ??2026 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ??2027 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Nov 12 13:35:46 ubuntu22041 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 12 13:35:46 ubuntu22041 systemd[1]: Started A high performance web server and a reverse proxy server.

Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Truy cập Ứng dụng Web Next.js​

Lúc này, ứng dụng Next.js đã được cài đặt và cấu hình bằng Nginx. Bây giờ bạn có thể truy cập bằng URL

http://next.example.com.

Bạn sẽ thấy trang web Next.js trên màn hình sau:


data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22750%22%20height=%22387%22%3E%3C/svg%3E

Kết luận​

Xin chúc mừng! Bạn đã cài đặt thành công ứng dụng Next.js với Nginx trên Ubuntu 22.04. Bây giờ bạn có thể tăng tốc quá trình phát triển của mình bằng cách sử dụng khuôn khổ Next.js. Hãy thoải mái hỏi tôi nếu bạn có bất kỳ câu hỏi nào.