Bạn đang tìm hiểu cách chạy NextJS thông qua Nginx Proxy trên máy chủ DirectAdmin đang chạy web server nginx_apache và giải quyết vấn đề chạy SSL trên NextJS thông qua Nginx Proxy? Trong bài viết này, chúng ta sẽ đi qua các bước để thiết lập Nginx Proxy và cài đặt SSL cho server NextJS, cùng với cách chạy đồng thời cả server và proxy của NextJS.

1. Cấu hình Nginx Proxy: Máy chủ DirectAdmin hỗ trợ "Custom HTTPD Configuration" để thay đổi port proxy mặc định thành port của Next.js server. Bạn cần tìm đến tên miền và sửa nội dung phần "nginx.conf customization" thành:
   |?PORT_8080=3001|
   |?PORT_8081=3002|
   ở đây 8080 và 8081 tương ứng port http và https của Apache, còn 3001 và 3002 là port của server Next.js. Mình không dùng chung 1 port, vì file cấu hình Nginx phần SSL có sẵn tiền tố https cho proxy_pass, có thể sửa https thành http nhưng như vậy phải theo dõi và sửa lại khi có bất kỳ thay đổi nào làm cho server tự build lại file cấu hình cho Nginx

2. Vấn đề chạy SSL trên Next.js thông qua Nginx Proxy: Tuy nhiên, Next.js chỉ chạy được trên 1 port duy nhất, làm sao có thể chạy trên 2 port và đặc biệt port 3002 phải thông qua SSL. Giải pháp đó là sử dụng "Locally Trusted SSL Certificates", và thông qua một proxy nữa để chuyển hướng port 3002 vào 3001. Cách làm như sau:

   • Đầu tiên, bạn phải cài đặt "Locally Trusted SSL Certificates" theo hướng dẫn tại đây để tạo SSL cho localhost: https://computingforgeeks.com/create-locally-trusted-ssl-certificates-on-linux-macos-using-mkcert/
   • Sau khi đã có 2 file localhost.pem và localhost-key.pem, bạn cần cài đặt local-ssl-proxy bằng lệnh: npm i --dev local-ssl-proxy
   • Tiếp theo, bạn chạy lệnh sau để bắt đầu chạy proxy: local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3002 --target 3001
3. Chạy đồng thời cả server và proxy của Next.js:
   • Trong dự án thực tế, bạn phải chạy cả lệnh "npm start" và câu lệnh trên để chạy cả 2 port. Để chạy đồng thời trong 1 lệnh duy nhất npm start, bạn có thể sử dụng package concurrently. Bạn cài đặt package này bằng lệnh: npm i concurrently --save-dev và sửa lại phần start hoặc dev trong file package.json như sau:
     "dev": "concurrently --kill-others \"next dev -p 3001\" \"npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3002 --target 3001\"",
     "start": "concurrently --kill-others \"next start -p 3001\" \"npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3002 --target 3001\""

Còn một cách khác không sử dụng local-ssl-proxy, là sử dụng http-proxy:

• Cài đặt http-proxy: npm i http-proxy
• Tạo file proxy.js ở thư mục gốc:

  const httpProxy = require('http-proxy');
  var fs = require('fs');
  const proxy = httpProxy.createProxyServer({
    target: 'http://localhost:3001',
    ssl: {
      key: fs.readFileSync('localhost-key.pem', 'utf8'),
      cert: fs.readFileSync('localhost.pem', 'utf8'),
    },
  });

  proxy.listen(3002);

• Trong next.config.js thêm dòng sau vào đầu file
  const proxyjs = require("./proxy.js");

Với các bước trên, bạn đã có thể chạy NextJS thông qua Nginx Proxy trên máy chủ DirectAdmin đang chạy web server nginx_apache và giải quyết vấn đề chạy SSL trên NextJS thông qua Nginx Proxy. Đồng thời, bạn cũng có thể chạy đồng thời cả server và proxy của NextJS trong 1 lệnh duy nhất bằng cách sử dụng package concurrently. Hy vọng hướng dẫn này sẽ hữu ích cho bạn trong quá trình phát triển ứng dụng NextJS của mình.