Deploy and host nextjs website

Hi bạn, NextJS để nó chạy được thì nó cần có 1 server (thường là NodeJS) backed phía sau (thế thì mới có khái niệm SSR ), vì bản chất nó có server rồi nên nó có thể được deploy mà hoàn toàn ko cần nginx hay apache,...

Việc của bạn rất đơn giản, lên server của bạn clone code về, npm run build -> npm start là web NextJS của bạn đã ready ở http://IP_SERVER:3000 và có thể truy cập trực tiếp từ trình duyệt được

Để host domain cho trang web thì cũng giản đơn ko kém, lên Godaddy sắm quả domain lởm lởm vài chục nghìn VNĐ về để học, vào trang quản trị DNS của domain trỏ nó về IP_SERVER của bạn là ngay lập tức bạn có thể truy cập trang web của bạn từ trình duyệt với địa chỉ http://domain:3000

Nói chung để đưa web lên online thì ko khó 1 chút công sức là được rồi, đặc biệt là các web dùng JS/NodeJS cực cực cực kì dễ và nhanh chóng vì nó gần như thường chả phụ thuộc cái j ngoài nodejs cả

Nhưng ở các project thực tế xịn xò thì mình sẽ muốn toàn bộ phần deploy nó thành 1 pipeline sao cho dễ dàng, tự động nhất:

• Để build và chạy project nên chọn solution nào mà đơn giản hơn, ít phụ thuộc môi trường, ít phải cài linh tinh , cài đi cài lại lắm thứ, dễ dàng re-build re-deploy -> chọn Docker. Trang chủ NextJS hướng dẫn có cả Dockerfile mình chỉ việc copy paste là build được Docker Image: https://nextjs.org/docs/deployment#docker-image
• Host domain thì vẫn vậy ko có gì nhiều để cải tiến thêm
• Như ở trên mình nói NextJS có thể chạy mà ko cần Nginx/Apache... nhưng thực tế mình sẽ dùng chúng nó (chủ yếu là Nginx, hay dùng nó, please stop using Apache ), mục đích là mình sẽ triển khải HTTPS ở tầng đó để bảo mật cho website của mình. Flow sẽ là: request từ client -> Nginx -> NextJS

Thường khi code ae developers chỉ cố gắng làm sao localhost ko có lỗi là được nhưng ko biết là deploy cũng có 1 tỉ thứ như nào, cái này thì chỉ có trực tiếp làm, thu thập kinh nghiệm thực chiến mới khiến mình lên tay nhiều. Và cái cảm giác đưa được đứa "con cưng" của mình ra online cũng rất là "thoả mãn" . Bạn cứ follow các bước từ đơn giản xong đến phức tạp hơn như trên mình đề cập. Hi vọng giúp được bạn

@maitrungduc1410 Cảm ơn câu trả lời chi tiết của bạn rất nhiều. Tuy còn nhiều chỗ chưa hiểu quy trình lắm nhưng mình sẽ tìm hiểu thêm. Đúng như bạn nói là mình chỉ tập trung vô localhost, nhưng bước quan trong nhất là làm sao đưa "con cưng" của mình cho người khác thì gần như mình mù tịt. Ngay cả kiến trúc SSR call api từ server trên local như thế nào mình cũng k rõ nữa. Còn hoạt động của ngnix trỏ domain này nọ không hiểu sao nó làm được như vậy =)) Anyway, cảm ơn bạn nhiều. Chắc mình nên học những kiến trúc và cách hoạt động của tụi quỷ này trước đã =))

Bạn cho mình hỏi thêm nữa là hiện mình có:

1. trang web chính - nextjs - Tạm gọi web A
2. trang admin - reactjs thông thương - Tạm gọi web B
3. server expressjs (typescript) - để làm api cho 2 trang web trên. - Tạm gọi ServerC

Vậy các bước deploy của mình có phải như sau:

1. npm build cho web A, ra 1 đống file html, js, css này nọ
2. npm build cho web B cũng ra 1 đông file html, js,...
3. Viết 1 đoạn code trong ServerC: để host code - web A: http://localhost:3000 - web B: http://localhost:3000/admin - server: http://localhost:3000/api => theo mình hiểu thì chỗ này chỉ cần start cái serverC là có thể truy cập vô webA và webB đc rồi. Không biết mình hiểu đúng không nữa?!? Và do webA là SSR bởi nextjs nên k biết là làm cách này có đc không.
4. Nhiệm vụ còn lại là mình thay cái localhost bằng cái domain nào đó (vd như trên Godaddy) bằng cách xử dụng ngnix - Chỗ này mình không hiểu sẽ làm như thế nào - mình sẽ google thêm.

Các bước trên mình nói có đúng không vậy bạn ? Mình xin cảm ơn

@hxtruong6 hi bạn,

1 note trước khi bắt đầu đó là web B hay các web client side rendering nói chung (Vue, React, Angular), khi đã build thì nó sẽ ra file static và nó không thể tự chạy được, mà nó phải được host ở đâu đó, bằng server nào đó (NodeJS, php, python,....) hoặc bằng webserver (nginx, apache....). Khác với SSR (NextJS - web A) hoặc thuần server (như server C)

Trước khi deploy thì bạn cần đặt câu hỏi: bạn có muốn deploy tất cả chúng ở trên 1 domain hay ko? kiểu example.com, example.com/admin, example.com/api. Dựa theo những điều bạn nói thì có vẻ như vậy. Kiểu này sẽ "khó" hơn chút (tí thôi ) (kiểu deploy mỗi cái 1 domain thì sẽ dễ hơn, vì đơn giản là nó tách biệt ko chung chạ ko cần proxy path, location,...)

Cách deploy:

• Build + start web A(nextjs) và server C, cho chúng chạy ở các cổng khác nhau, giả sử 3000, 3001
• Build web B (React JS) được folder static build

Cấu hình Nginx nom sẽ như sau:

server {
  listen 80;
  listen [::]:80;
  server_name example.com;

  # Web B (ReactJS)
  location / {
    root /path_to_build_folder;
    index index.html index.htm index.nginx-debian.html;
    try_files $uri $uri/ /index.html;
  }

  # Web A (NextJS)
  location /admin {
    proxy_pass http://127.0.0.1:3000; # -->> Notice this PORT
    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-forwarded-for $remote_addr;
    proxy_cache_bypass $http_upgrade;
  }

  # Server C (NodeJS)
  location /api {
    proxy_pass http://127.0.0.1:3001; # -->> Notice this PORT
    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-forwarded-for $remote_addr;
    proxy_cache_bypass $http_upgrade;
  }
}

Với cách này thì Nginx sẽ serve Web B (ReactJS) như các trang HTML thông thường, nếu client request vào url mà có prefix là /api hoặc /admin thì proxy request vào các backend tương ứng (backend ở đây sẽ là nextjs và nodejs)

P/s: còn 1 vài cách deploy khác, mình ko muốn bạn thấy rối khi giới thiệu nhiều cách, cứ làm dần dần tìm hiểu dần nhé, cách này mình hay dùng và thấy đơn giản nhất