Deploy Next.js: Hướng dẫn toàn tập cách Deploy Next.js lên VPS chi tiết từ A-Z

Deploy ứng dụng Next.js không chỉ đơn thuần là đưa code lên mạng, mà là bài toán tối ưu giữa hiệu năng xử lý phía server (SSR) và tốc độ phản hồi cho người dùng. Bài viết này được mình đúc kết từ quá trình trực tiếp hỗ trợ triển khai và tối ưu hạ tầng cho hơn nhiều khách hàng tại Vietnix, giúp bạn tránh những lỗi phổ biến như rò rỉ bộ nhớ hoặc cấu hình Nginx sai cách khiến website bị chậm. Thay vì chỉ dẫn dắt lý thuyết, mình sẽ cùng bạn đi sâu vào quy trình thực tế để đảm bảo ứng dụng Next.js của bạn không chỉ hoạt động ổn định mà còn đạt điểm số tối ưu trên các công cụ đo lường tốc độ.

Những điểm chính

• Quan điểm của mình: Dù các nền tảng Serverless đang phát triển, nhưng mình nhận thấy việc làm chủ quy trình deploy Next.js trên VPS vẫn là tiêu chuẩn quan trọng để kiểm soát hoàn toàn chi phí hạ tầng và tối ưu hóa tốc độ truy cập tại thị trường Việt Nam (thấp hơn 200ms TTFB).
• Chuẩn bị môi trường: Biết được các yêu cầu cần thiết về ứng dụng, VPS và công nghệ để chuẩn bị cho quá trình triển khai.
• Khởi tạo và bảo mật VPS: Nắm vững cách tạo một VPS mới và thiết lập truy cập an toàn bằng SSH Key, thay thế cho mật khẩu truyền thống.
• Cấu hình máy chủ cơ bản: Biết cách thiết lập người dùng mới với quyền quản trị và cấu hình truy cập không mật khẩu để quản lý VPS an toàn, hiệu quả hơn.
• Triển khai ứng dụng Next.js: Nắm vững quy trình cài đặt Node.js, lấy mã nguồn từ Git và sử dụng PM2 để chạy ứng dụng liên tục, tự động khởi động lại khi có lỗi.
• Cấu hình Nginx và tên miền: Biết cách trỏ tên miền về VPS và cấu hình Nginx làm reverse proxy để người dùng có thể truy cập ứng dụng của bạn qua một địa chỉ web chuyên nghiệp.
• Bảo mật và tối ưu hóa với HTTPS/SSL: Nắm được cách cài đặt chứng chỉ SSL miễn phí với Certbot để bảo mật kết nối và kích hoạt HTTP/2 nhằm tăng tốc độ tải trang.
• Giải đáp thắc mắc (FAQ): Nhận được câu trả lời cho các câu hỏi phổ biến về các lựa chọn triển khai miễn phí, yêu cầu máy chủ và so sánh giữa các nền tảng phổ biến.

Chuẩn bị và thiết lập môi trường nền tảng

• Một ứng dụng Node.js hoặc Next.js đã được phát triển hoàn chỉnh và có khả năng vận hành ổn định trên môi trường local.
• Một máy chủ ảo (VPS) sử dụng hệ điều hành Ubuntu 22.04 LTS x64.
• Mô hình triển khai sẽ bao gồm việc sử dụng Nginx làm web server và thiết lập mã hóa HTTPS/SSL. 

1. Khởi tạo một Instance VPS mới

Trong bảng điều khiển quản trị của nhà cung cấp dịch vụ, bạn sẽ bắt đầu quy trình bằng việc triển khai một máy chủ mới. Mặc dù giao diện có thể khác nhau giữa các nhà cung cấp, các tùy chọn cấu hình cơ bản thường bao gồm:

• Lựa chọn loại máy chủ: Bạn cần chọn loại hình VPS phù hợp với nhu cầu, các lựa chọn phổ biến thường là các gói tài nguyên điện toán đám mây.
• Cấu hình CPU và vị trí: Tùy chọn loại CPU và đặc biệt là vị trí đặt máy chủ là rất quan trọng. Việc chọn một trung tâm dữ liệu gần với đối tượng người dùng mục tiêu sẽ giúp giảm độ trễ và cải thiện tốc độ truy cập.
• Chọn hệ điều hành: Bạn cần chọn Ubuntu 22.04 LTS x64 để đảm bảo tính tương thích với hướng dẫn này.
• Lựa chọn gói tài nguyên: Dựa trên quy mô và lưu lượng truy cập dự kiến của ứng dụng, bạn hãy chọn một gói tài nguyên phù hợp với ngân sách và yêu cầu kỹ thuật.

2. Cấu hình bảo mật và truy cập bằng SSH Key

SSH Key là một phương thức xác thực an toàn để truy cập vào máy chủ, thay thế cho việc sử dụng mật khẩu truyền thống.

• Mục đích chính của SSH Key là thiết lập một cơ chế xác thực mã hóa, đảm bảo rằng chỉ máy tính cá nhân của bạn mới có quyền truy cập vào VPS.
• Trong quá trình tạo VPS, nhà cung cấp dịch vụ sẽ cung cấp một mục để bạn có thể thêm SSH Key. Tại đây, bạn sẽ dán nội dung khóa công khai (public key) của mình vào.

3. Hướng dẫn tạo SSH Key trên máy tính cá nhân

Nếu bạn chưa từng tạo SSH Key trên máy tính của mình, hãy thực hiện các bước dưới đây. Nếu đã có, bạn có thể bỏ qua phần này.

• Bạn mở một cửa sổ dòng lệnh (Terminal hoặc Git Bash) và thực thi lệnh sau, thay thế your_email@example.com bằng địa chỉ email của bạn:

ssh-keygen -t ed25519 -C "your_email@example.com"

Lệnh này sẽ khởi tạo một cặp khóa SSH mới sử dụng thuật toán mã hóa ed25519 hiện đại và an toàn.

• Khi hệ thống hỏi Enter a file in which to save the key, bạn nên nhấn Enter để chấp nhận đường dẫn và tên file mặc định.
• Tiếp theo, hệ thống sẽ yêu cầu nhập passphrase (mật khẩu cho khóa). Bạn có thể nhấn Enter hai lần để bỏ qua. Việc này giúp bạn không cần phải nhập mật khẩu mỗi khi tương tác với máy chủ, thuận tiện cho các quy trình tự động sau này.
• Sau khi hoàn tất, hai tệp tin sẽ được tạo ra trong thư mục .ssh của bạn: Một tệp là khóa riêng (private key, ví dụ: id_ed25519) và một tệp là khóa công khai (public key, có đuôi .pub, ví dụ: id_ed25519.pub).

• Để lấy nội dung khóa công khai, bạn có thể dùng lệnh.

 cat ~/.ssh/id_ed25519.pub

Hãy sao chép toàn bộ nội dung được hiển thị, sau đó quay lại trang web của nhà cung cấp VPS và dán vào mục thêm SSH Key.

1. Truy cập Server và chuyển đổi người dùng

Để tương tác với máy chủ, bạn cần sử dụng một SSH client. Hầu hết các hệ điều hành hiện đại đều tích hợp sẵn OpenSSH. Bạn chỉ cần mở cửa sổ dòng lệnh (Terminal) và thực thi lệnh:

ssh root@ip_address

Hãy thay thế ip_address bằng địa chỉ IP của máy chủ VPS bạn vừa tạo. Nếu bạn đã thêm SSH Key vào VPS và sử dụng tên file key mặc định trên máy cá nhân, bạn sẽ được đăng nhập tự động mà không cần mật khẩu. Trong trường hợp bạn sử dụng một tên file key khác, bạn cần chỉ định đường dẫn đến file private key bằng cờ -i:

ssh -i /path/to/your/private_key root@ip_address

2. Tạo và cấp quyền người dùng mới

Để tạo một người dùng mới, hãy sử dụng lệnh adduser và thay ten_username bằng tên bạn mong muốn:

adduser ten_username

Hệ thống sẽ yêu cầu bạn nhập và xác nhận một mật khẩu mới cho người dùng này, nên hãy tạo một mật khẩu mạnh và ghi nhớ cẩn thận.

Tiếp theo, bạn cần cấp cho người dùng này khả năng thực thi các lệnh với quyền quản trị viên. Việc này được thực hiện bằng cách thêm người dùng vào nhóm sudo.

usermod -aG sudo ten_username

Lệnh này sẽ thêm ten_username vào nhóm sudo, cho phép người dùng này chạy các lệnh yêu cầu quyền root bằng cách thêm tiền tố sudo vào trước mỗi lệnh. Để chuyển đổi sang tài khoản người dùng mới, bạn có thể sử dụng lệnh su - ten_username.

3. Thiết lập truy cập không mật khẩu cho user mới

Để tăng tính tiện lợi và bảo mật, bạn nên cấu hình để người dùng mới cũng có thể đăng nhập vào VPS bằng SSH Key thay vì mật khẩu. Quy trình này bao gồm việc sao chép khóa công khai (public key) từ máy tính cá nhân của bạn vào tài khoản người dùng mới trên server.

Cách 1 (Sử dụng công cụ ssh-copy-id – Khuyến nghị): Là phương pháp đơn giản và an toàn nhất. Từ máy tính cá nhân, bạn chỉ cần chạy lệnh sau:

ssh-copy-id -i ~/.ssh/id_ed25519.pub ten_username@ip_address

Công cụ này sẽ tự động kết nối đến server, tạo các thư mục và tệp tin cần thiết, sau đó dán khóa công khai vào đúng vị trí với các quyền truy cập chính xác.

Cách 2 (Thực hiện thủ công): Nếu không có ssh-copy-id, bạn có thể thực hiện thủ công. Đầu tiên, bạn hãy đăng nhập vào VPS với người dùng mới bằng mật khẩu. Sau đó, chạy các lệnh sau trên server để tạo thư mục .ssh và file authorized_keys, rồi dán nội dung public key của bạn vào file đó.

cat ~/.ssh/id_rsa.pub | ssh user@server_ip "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"

Bạn hãy thay user và server_ip bằng thông tin của mình.

1. Cài đặt Node.js bằng NVM

Để đảm bảo tính tương thích tuyệt đối, việc sử dụng đúng phiên bản Node.js mà dự án Next.js của bạn yêu cầu là rất quan trọng. NVM là công cụ lý tưởng cho việc này, cho phép quản lý nhiều phiên bản Node.js một cách linh hoạt.

• Trước tiên, hãy cập nhật và nâng cấp các gói hệ thống trên máy chủ của bạn:

sudo apt-get update && sudo apt-get upgrade

• Tiếp theo, cài đặt NVM bằng cách chạy kịch bản cài đặt từ trang GitHub chính thức của dự án. Lệnh này sẽ tự động tải về và thiết lập NVM trên hệ thống của bạn.
• Sau khi cài đặt xong, bạn đóng cửa sổ terminal và đăng nhập lại vào server để hệ thống nạp các biến môi trường của NVM.
• Bây giờ, hãy cài đặt phiên bản Node.js cụ thể mà bạn đang sử dụng cho dự án Next.js ở môi trường local:

nvm install 18.17.0 # Thay thế bằng phiên bản Node.js của bạn
nvm use 18.17.0
nvm alias default 18.17.0 # Đặt phiên bản này làm mặc định

2. Cấu hình Git để lấy mã nguồn từ Repository

Để triển khai, bạn cần kéo (pull) mã nguồn từ kho lưu trữ Git (như GitHub, GitLab) về máy chủ.

• Bạn tạo một cặp khóa SSH mới ngay trên máy chủ VPS. Thực hiện tương tự như khi bạn làm trên máy cá nhân:

ssh-keygen -t ed25519 -C "your_vps_email@example.com"

Bạn nhấn Enter để chấp nhận các giá trị mặc định cho tên file và để trống passphrase.

• Tiếp theo, bạn lấy nội dung khóa công khai của VPS:

cat ~/.ssh/id_ed25519.pub

• Sao chép nội dung khóa này, sau đó truy cập vào kho lưu trữ Git của bạn bằng cách vào mục Settings > Deploy Keys (hoặc SSH Keys) rồi thêm khóa công khai này vào. Việc sử dụng “Deploy Keys” sẽ cấp cho máy chủ quyền chỉ đọc (read-only), an toàn hơn cho việc triển khai.
• Cuối cùng, clone mã nguồn dự án Next.js của bạn về máy chủ:

git clone git@github.com:username/your-nextjs-repo.git

3. Triển khai ứng dụng Next.js với PM2

Sau khi có mã nguồn, bạn cài đặt, xây dựng và chạy ứng dụng bằng trình quản lý tiến trình PM2.

• Bạn di chuyển vào thư mục dự án:

cd your-nextjs-repo.

• Bạn cài đặt Yarn (hoặc nếu bạn dùng NPM thì có thể bỏ qua bước này) và PM2 dưới dạng gói toàn cục (global):

sudo npm install -g yarn pm2

PM2 là công cụ cực kỳ mạnh mẽ, giúp ứng dụng Next.js của bạn chạy dưới nền, tự động khởi động lại khi có lỗi và duy trì hoạt động 24/7.

• Cài đặt toàn bộ các gói phụ thuộc được định nghĩa trong package.json:

yarn install

• Bạn xây dựng phiên bản production cho ứng dụng. Lệnh này sẽ tối ưu hóa và biên dịch mã nguồn của bạn vào thư mục .next:

yarn build

Sau khi build thành công, hãy sử dụng PM2 để khởi chạy ứng dụng Next.js. Lệnh này sẽ chạy máy chủ Node.js đã được tối ưu hóa của Next (next start):

pm2 start yarn --name "my-next-app" -- start

Bạn thay thế "my-next-app" bằng một tên định danh cho dự án của bạn để dễ dàng quản lý.

• Bạn có thể xem trạng thái của tất cả các ứng dụng đang chạy bằng lệnh: pm2 ls.

4. Thiết lập PM2 tự khởi động cùng hệ thống

Để đảm bảo ứng dụng của bạn tự động chạy lại mỗi khi máy chủ được reboot, bạn cần cấu hình PM2 như một dịch vụ hệ thống.

• Đầu tiên, chạy lệnh sau để PM2 tạo ra một kịch bản khởi động:

pm2 startup

Lệnh trên sẽ trả về một dòng lệnh khác. Bạn hãy sao chép và thực thi dòng lệnh đó (thường yêu cầu quyền sudo). Thao tác này sẽ đăng ký PM2 với systemd, trình quản lý dịch vụ của Ubuntu.

• Cuối cùng, bạn lưu lại danh sách các ứng dụng mà bạn muốn PM2 tự động khởi động:

pm2 save

5. Xây dựng quy trình cập nhật hiệu quả

• Bạn SSH vào máy chủ và di chuyển đến thư mục dự án.
• Tiếp theo, kéo những thay đổi mới nhất từ nhánh chính (main/master) của bạn:

git pull

• Sau đó bạn cài đặt lại các gói phụ thuộc để đảm bảo tính nhất quán:

yarn install

• Bạn xây dựng lại phiên bản production mới:

yarn build

• Cuối cùng, bạn khởi động lại ứng dụng bằng PM2:

pm2 restart my-next-app

Bạn có thể kết hợp các lệnh này thành một script hoặc một dòng lệnh duy nhất trong package.json để tự động hóa quy trình redeploy.

Hiện tại, ứng dụng Next.js của bạn đang chạy trên một port cụ thể (ví dụ: 3000) và chỉ có thể được truy cập qua địa chỉ IP của VPS. Để người dùng có thể truy cập qua một tên miền thân thiện (ví dụ: example.com) và để quản lý các kết nối một cách hiệu quả, chúng ta cần sử dụng Nginx làm reverse proxy.

1. Thiết lập bản ghi DNS cho tên miền

Trước khi cấu hình Nginx, bạn cần trỏ tên miền của mình đến địa chỉ IP của VPS. Bạn hãy truy cập vào trang quản trị DNS của nhà cung cấp tên miền và thiết lập các bản ghi sau:

• Trỏ tên miền chính:
  • Bạn tạo một bản ghi A với tên (host) là @ và giá trị (value) là địa chỉ IP của VPS.
  • Bạn tạo một bản ghi CNAME với tên là www và giá trị là tên miền chính của bạn (ví dụ: example.com).
• Trỏ tên miền con: Bạn tạo một bản ghi A với tên là blog (hoặc tên subdomain bạn muốn) và giá trị là địa chỉ IP của VPS.

2. Cài đặt và cấu hình tường lửa cho Nginx

Bạn cài đặt Nginx và cấu hình tường lửa UFW để cho phép các lưu lượng truy cập web cần thiết.

• Bạn chạy lệnh sau để cài đặt Nginx từ kho lưu trữ của Ubuntu:

sudo apt-get update && sudo apt-get install nginx

• Tiếp theo, bạn cấu hình tường lửa. UFW cung cấp các cấu hình ứng dụng được định sẵn. Bạn hãy liệt kê bằng lệnh sau:

sudo ufw app list

Bạn sẽ thấy các profile như Nginx Full (mở port 80 cho HTTP và 443 cho HTTPS), Nginx HTTP, và Nginx HTTPS.

• Bạn cho phép cả hai loại lưu lượng để chuẩn bị cho việc cài đặt SSL sau này:

sudo ufw allow 'Nginx Full'

• Cần đảm bảo rằng kết nối SSH vẫn được cho phép để bạn không bị khóa khỏi server:

sudo ufw allow OpenSSH

• Cuối cùng, bạn chạy lệnh dưới đây để kích hoạt tường lửa:

sudo ufw enable

3. Thiết lập Nginx làm Reverse Proxy

Bây giờ, bạn cần cấu hình Nginx để nó lắng nghe các yêu cầu gửi đến tên miền của bạn và chuyển tiếp (proxy) chúng đến ứng dụng Next.js đang chạy trên port 3000.

• Đầu tiên, bạn kiểm tra Nginx đã chạy đúng chưa bằng lệnh systemctl status nginx. Bạn cũng có thể truy cập http://your_vps_ip trên trình duyệt và sẽ thấy trang chào mừng mặc định của Nginx.
• Nginx quản lý cấu hình cho từng trang web trong thư mục /etc/nginx/sites-available. Bạn hãy tạo một file cấu hình mới cho tên miền của bạn:

sudo nano /etc/nginx/sites-available/example.com

• Dán nội dung cấu hình sau vào file, thay thế example.com bằng tên miền thực của bạn và 3000 bằng port mà ứng dụng Next.js của bạn đang chạy:

server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;

    location / {
        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_cache_bypass $http_upgrade;
    }
}

• Tiếp theo, bạn kích hoạt file cấu hình này bằng cách tạo một liên kết tượng trưng (symlink) từ nó đến thư mục sites-enabled:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

• Để tránh các lỗi tiềm ẩn về bộ nhớ khi có nhiều tên miền, bạn hãy mở file cấu hình Nginx chính và bỏ dấu # ở đầu dòng server_names_hash_bucket_size 64;:

sudo nano /etc/nginx/nginx.conf

• Kiểm tra để chắc chắn rằng file cấu hình của bạn không có lỗi cú pháp:

sudo nginx -t

• Nếu kết quả là syntax is ok và test is successful, bạn hãy khởi động lại Nginx để áp dụng các thay đổi:

sudo systemctl restart nginx

Bây giờ, bạn đã có thể truy cập ứng dụng Next.js của mình thông qua http://example.com. Bước cuối cùng là bảo mật kết nối này bằng HTTPS/SSL.

1. Cài đặt Certbot và lấy chứng chỉ SSL

Certbot là một công cụ tự động hóa việc lấy và gia hạn chứng chỉ SSL từ Let’s Encrypt. Bạn cần cài đặt và sử dụng Certbot để cấu hình HTTPS cho Nginx.

• Ubuntu 22.04 khuyến nghị cài đặt Certbot thông qua snap. Đầu tiên, bạn hãy đảm bảo snapd đã được cài đặt và cập nhật:

sudo snap install core; sudo snap refresh core

• Nếu bạn đã từng cài đặt Certbot bằng apt, hãy gỡ bỏ phiên bản cũ:

sudo apt-get remove certbot

• Tiếp theo bạn cài đặt Certbot bằng snap:

sudo snap install --classic certbot

• Bạn tạo một liên kết tượng trưng để lệnh certbot có thể được thực thi từ bất kỳ đâu:

sudo ln -s /snap/bin/certbot /usr/bin/certbot

• Bây giờ, bạn chạy Certbot với plugin Nginx. Certbot sẽ tự động đọc file cấu hình Nginx của bạn, xác minh tên miền và cấu hình SSL:

sudo certbot --nginx

• Trong lần chạy đầu tiên, Certbot sẽ hỏi bạn một vài thông tin, bao gồm địa chỉ email (để nhận thông báo về việc gia hạn hoặc các vấn đề bảo mật) và yêu cầu bạn đồng ý với các điều khoản dịch vụ.
• Sau đó, Certbot sẽ liệt kê các tên miền mà nó tìm thấy trong cấu hình Nginx của bạn (ví dụ: example.com và www.example.com). Bạn sẽ được hỏi muốn kích hoạt HTTPS cho tên miền nào.
• Khi quá trình hoàn tất thành công, Certbot sẽ tự động sửa đổi file cấu hình Nginx của bạn để chuyển hướng tất cả lưu lượng HTTP sang HTTPS và áp dụng chứng chỉ SSL.

2. Kiểm tra và đảm bảo tự động gia hạn chứng chỉ

Chứng chỉ của Let’s Encrypt có hiệu lực trong 90 ngày. Gói Certbot bạn đã cài đặt sẽ tự động xử lý việc gia hạn này.

• Một bộ đếm thời gian của systemd sẽ được tạo ra, tự động chạy lệnh certbot renew hai lần mỗi ngày. Lệnh này sẽ kiểm tra tất cả các chứng chỉ trên máy chủ và tự động gia hạn những chứng chỉ còn dưới 30 ngày hiệu lực.
• Bạn có thể kiểm tra xem quá trình gia hạn tự động có hoạt động đúng hay không bằng cách chạy một lần thử nghiệm (dry run):

sudo certbot renew --dry-run

Nếu không có lỗi nào được báo cáo, điều đó có nghĩa là cơ chế tự động gia hạn đã được thiết lập thành công.

3. Kích hoạt giao thức HTTP/2

HTTP/2 là một phiên bản nâng cấp của giao thức HTTP, mang lại nhiều cải tiến về hiệu suất như ghép kênh (multiplexing), nén tiêu đề, giúp website tải nhanh hơn đáng kể.

• Điều kiện cần: Nginx phiên bản 1.9.5 trở lên (phiên bản trên Ubuntu 22.04 đã đáp ứng) và đã kích hoạt HTTPS/SSL.
• Mở lại file cấu hình Nginx cho website của bạn:

sudo nano /etc/nginx/sites-available/example.com

• Bạn tìm đến các dòng listen 443 ssl; và listen [::]:443 ssl; (những dòng này đã được Certbot thêm vào). Tiếp đến, bạn thêm từ khóa http2 vào sau mỗi dòng đó, chúng sẽ trở thành:

listen 443 ssl http2; listen [::]:443 ssl http2;

• Lưu và đóng file, sau đó, bạn kiểm tra lại cú pháp Nginx và khởi động lại dịch vụ:

sudo nginx -t && sudo systemctl restart nginx

Giờ đây, website của bạn đã được bảo mật bằng HTTPS và được tối ưu hóa hiệu suất với giao thức HTTP/2.

Triển khai Next.js là một quy trình đòi hỏi kiến thức tổng hợp về cả hạ tầng máy chủ lẫn đặc điểm vận hành của framework. Qua từng bước hướng dẫn, bạn không chỉ có thể đưa ứng dụng lên môi trường thực tế an toàn, ổn định mà còn chủ động tối ưu hiệu suất, tăng độ bảo mật với HTTPS/SSL và mở rộng quy mô linh hoạt theo nhu cầu phát triển.