- vừa được xem lúc

Deploy ReactJs Project lên môi trường Production với PM2

0 0 29

Người đăng: Trung Nguyen Dinh

Theo Viblo Asia

Mở đầu

PM2 là một công cụ quản lý process của NodeJS, có thể tự động quản lý và tự động khởi động lại các process khi có lỗi. Ngoài ra, PM2 cũng có thể sử dụng để deploy ReactJS dạng production build. Đây là các bước để deploy một ứng dụng ReactJS sử dụng PM2 trên máy tính chạy windows:

Thực hiện

  1. Build ứng dụng
  • Trước hết, bạn cần tạo một project ReactJs và build ứng dụng của mình:
  • Tạo một project:
npx create-react-app my-app
  • Build project
npm run build

hoặc:

yarn run build
  1. Cài đặt PM2
  • Bạn cần cài đặt PM2 để serve ứng dụng, sử dụng lệnh sau trong terminal:
npm install pm2 -g
  1. Chạy thư mục vừa build với PM2
pm2 serve <path> <port>
  • Bây giờ, chúng ta cần đưa thư mục build chạy trong PM2 bằng cách:
pm2 serve myReactApp/ 3000 --name "my-react-app" --spa
  • myReactApp/: Thư mục của ứng dụng. Bạn cần trỏ đến đúng thư mục vừa build bên trên.
  • 3000: Cổng để serve.
  • "my-react-app": Tên cho project. Tên này sẽ được hiển thị trong tiến trình của PM2 bằng lệnh "pm2 list". Nếu không thì pm2 sẽ tự tạo tên tự động
  • --spa: Tham số cho Single Page Application, chuyển hướng tới URL gốc. Tham số này bắt buộc phải có đối với ứng dựng react vì nếu không khi load lại trang sẽ không thể hiện thị lại được router.
  • Ví dụ, Ở đây mình sẽ chạy project dashboard trên port 3000:
pm2 serve ./build 3000 --name "dashboard" --spa
  1. Theo dõi và quản lý các ứng dụng đang chạy với PM2:
  • Chúng ta có thể thấy tất cả các tiến trình đang chạy với lệnh:
pm2 llist

  • Truy cập localhost:3000 để xem ứng dụng vừa được start:

  • Và có thể start, stop hoặc delete các tiến trình đang chạy với:
pm2 <start/stop/delete> <process id/process name>
  • Ví dụ để dừng ứng dụng vừa chạy ở trên:
pm2 stop dashboard

Kết thúc

  • Trên đây là cách đơn giản để chạy ứng dụng React với PM2. Các bạn có thể làm tưng tự trên VPS để deoploy ứng dựng React của mình. Thanks!! https://pm2.keymetrics.io/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 399

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 147

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 146

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 372

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 281