Cách cài đặt ReactJS với proxy Nginx trên CentOS 8

[theanh]

React là một thư viện JavaScript mã nguồn mở và miễn phí do Facebook phát triển. Nó được sử dụng để tạo giao diện web và các thành phần UI. Nó thường được sử dụng để phát triển Ứng dụng web hoặc Ứng dụng di động. Nó cho phép các nhà phát triển tạo các thành phần có thể tái sử dụng và độc lập với nhau. Nó có thể được sử dụng với các thư viện khác bao gồm Axios, JQuery AJAX hoặc window.fetch tích hợp sẵn trong trình duyệt.

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách cài đặt React JS trên CentOS 8

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

• Một máy chủ đang chạy CentOS 8.
• Một tên miền hợp lệ được trỏ bằng 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ủ.

Bắt đầu​

Trước khi bắt đầu, bạn sẽ cần cập nhật các gói hệ thống của mình lên phiên bản mới nhất. Bạn có thể cập nhật chúng bằng cách chạy lệnh sau:

dnf update -y

Sau khi tất cả các gói được cập nhật, hãy cài đặt các phụ thuộc bắt buộc khác bằng lệnh sau:

dnf install gcc-c++ make curl -y

Sau khi hoàn tất cài đặt các phụ thuộc bắt buộc, bạn có thể tiến hành bước tiếp theo.

Cài đặt NPM và Node.js​

Tiếp theo, bạn sẽ cần cài đặt Node.js và NPM trong hệ thống của mình. NPM còn được gọi là trình quản lý gói là một công cụ dòng lệnh được sử dụng để tương tác với các gói Javascript. Theo mặc định, phiên bản mới nhất của NPM và Node.js không được bao gồm trong kho lưu trữ mặc định của CentOS. Vì vậy, bạn sẽ cần thêm kho lưu trữ nguồn Node vào hệ thống của mình. Bạn có thể thêm nó bằng lệnh sau:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

Sau khi kho lưu trữ được thêm vào, hãy cài đặt Node.js và NPM bằng lệnh sau:

dnf install nodejs -y

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

node -v

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

v14.16.0

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

npm -v

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

6.14.11

Lúc này, NPM và Node.js đã được cài đặt trong hệ thống của bạn. Bây giờ, bạn có thể tiến hành cài đặt Reactjs.

Cài đặt Reactjs​

Trước khi bắt đầu, bạn sẽ cần cài đặt create-react-app trong hệ thống của mình. Đây là tiện ích dòng lệnh dùng để tạo Ứng dụng React.

Bạn có thể cài đặt bằng NPM như hiển thị bên dưới:

npm install -g create-react-app

Sau khi cài đặt, hãy xác minh phiên bản đã cài đặt của create-react-app bằng lệnh sau:

create-react-app --version

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

4.0.3

Tiếp theo, hãy tạo ứng dụng Reactjs đầu tiên của bạn bằng lệnh sau:

create-react-app myapp

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

Thành công! Đã tạo myapp tại /root/myappBên trong thư mục đó, bạn có thể chạy một số lệnh: npm start Khởi động máy chủ phát triển. npm run build Đóng gói ứng dụng thành các tệp tĩnh để sản xuất. npm test Khởi động trình chạy thử nghiệm. npm run eject Xóa công cụ này và sao chép các phụ thuộc xây dựng, tệp cấu hình và tập lệnh vào thư mục ứng dụng. Nếu bạn làm như vậy, bạn không thể quay lại!Chúng tôi khuyên bạn nên bắt đầu bằng cách nhập: cd myapp npm start

Tiếp theo, hãy thay đổi thư mục thành myapp và khởi động ứng dụng bằng lệnh sau:

cd myapp
npm start

Sau khi ứng dụng được khởi động thành công, bạn sẽ nhận được đầu ra sau:

Đã biên dịch thành công!Bây giờ bạn có thể xem myapp trong trình duyệt. http://localhost:3000Lưu ý rằng bản dựng phát triển không được tối ưu hóa.Để tạo bản dựng sản xuất, hãy sử dụng npm run build.

Bây giờ, hãy nhấn CTRL+C để dừng ứng dụng. Bây giờ bạn có thể tiến hành bước tiếp theo.

Tạo tệp dịch vụ Systemd cho Reactjs​

Tiếp theo, bạn nên tạo tệp dịch vụ systemd để quản lý dịch vụ Reactjs. Bạn có thể tạo nó bằng lệnh sau:

nano /lib/systemd/system/react.service

Thêm các dòng sau:

[Unit]After=network.target[Service]Type=simpleUser=rootWorkingDirectory=/root/myappExecStart=/usr/bin/npm startRestart=on-failure[Install]WantedBy=multi-user.target

Lưu và đóng tệp, sau đó tải lại daemon systemd bằng lệnh sau:

systemctl daemon-reload

Tiếp theo, khởi động dịch vụ Reactjs và cho phép nó khởi động khi khởi động lại hệ thống bằng lệnh sau:

systemctl start react
systemctl enable react

Tiếp theo, hãy xác minh trạng thái của ứng dụng Reactjs bằng lệnh sau:

systemctl status react

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

? react.service Đã tải: đã tải (/usr/lib/systemd/system/react.service; đã tắt; đã đặt trước của nhà cung cấp: đã tắt) Đang hoạt động: đang hoạt động (đang chạy) kể từ Thứ ba 2021-03-23 02:52:32 EDT; 6 giây trước PID chính: 2191 (nút) Nhiệm vụ: 29 (giới hạn: 12524) Bộ nhớ: 220,3M CGroup: /system.slice/react.service ??2191 npm ??2202 node /root/myapp/node_modules/.bin/react-scripts start ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js23-03 02:52:34 centos8 npm[2191]: ? ?wds?: Dự án đang chạy tại http://0.0.0.0:3000/23-03 02:52:34 centos8 npm[2191]: ? ?wds?: đầu ra webpack được phục vụ từ23-03 02:52:34 centos8 npm[2191]: ? ?wds?: Nội dung không phải từ webpack được phục vụ từ /root/myapp/public23/03 02:52:34 centos8 npm[2191]: ? ?wds?: 404 giây sẽ chuyển về /23/03 02:52:34 centos8 npm[2191]: Đang khởi động máy chủ phát triển...23/03 02:52:37 centos8 npm[2191]: Đã biên dịch thành công!23/03 02:52:37 centos8 npm[2191]: Bây giờ bạn có thể xem myapp trong trình duyệt.23/03 02:52:37 centos8 npm[2191]: http://localhost:300023/03 02:52:37 centos8 npm[2191]: Lưu ý rằng bản dựng phát triển chưa được tối ưu hóa.23/03 02:52:37 centos8 npm[2191]: Để tạo bản dựng sản xuất, hãy sử dụng npm run build.

Tại thời điểm này, Reactjs đã được khởi động và lắng nghe trên cổng 3000. Bạn có thể xác minh điều đó bằng lệnh sau:

ss -antpl | grep 3000

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

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

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

Cấu hình Nginx làm Proxy ngược cho ứng dụng React​

Tiếp theo, bạn sẽ cần cấu hình Nginx làm proxy ngược để truy cập ứng dụng React trên cổng 80. Trước tiên, hãy cài đặt gói Nginx bằng lệnh sau:

dnf 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 mới bằng lệnh sau:

nano /etc/nginx/conf.d/react.conf

Thêm các dòng sau:

server { listen 80; server_name react.example.com; location / { proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header Host $http_host; proxy_pass http://localhost:3000; }}

Lưu và đóng tệp khi bạn hoàn tất, sau đó xác minh Nginx xem có lỗi cú pháp nào không bằng lệnh sau:

nginx -t

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

nginx: cú pháp tệp cấu hình /etc/nginx/nginx.conf là oknginx: kiểm tra tệp cấu hình /etc/nginx/nginx.conf thành công

Cuối cùng, hãy khởi động dịch vụ Nginx và cho phép nó khởi động khi khởi động lại hệ thống bằng cách chạy lệnh sau:

systemctl start nginx
systemctl enable nginx

Bạn cũng có thể xác minh trạng thái của Nginx bằng cách chạy lệnh sau:

systemctl status nginx

Bạn sẽ nhận được trạng thái của dịch vụ React trong kết quả sau:

? nginx.service - Máy chủ proxy ngược và HTTP nginx Đã tải: đã tải (/usr/lib/systemd/system/nginx.service; đã tắt; cài đặt trước của nhà cung cấp: đã tắt) Đang hoạt động: đang hoạt động (đang chạy) kể từ Thứ 3 2021-03-23 02:57:48 EDT; 4 giây trước Tiến trình: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS) Tiến trình: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS) Tiến trình: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS) PID chính: 4081 (nginx) Nhiệm vụ: 2 (giới hạn: 12524) Bộ nhớ: 4.0M CGroup: /system.slice/nginx.service ??4081 nginx: tiến trình chính /usr/sbin/nginx ??4082 nginx: tiến trình công nhân23-03 02:57:48 centos8 systemd[1]: Đang khởi động máy chủ proxy ngược và HTTP nginx...23-03 02:57:48 centos8 nginx[4078]: nginx: cú pháp tệp cấu hình /etc/nginx/nginx.conf là ok23-03 02:57:48 centos8 nginx[4078]: nginx: tệp cấu hình /etc/nginx/nginx.conf đã kiểm tra thành công23-03 02:57:48 centos8 systemd[1]: nginx.service: Không phân tích được PID từ tệp /run/nginx.pid: Đối số không hợp lệ23-03 02:57:48 centos8 systemd[1]: Đã khởi động máy chủ proxy ngược và HTTP nginx.

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

Cấu hình Tường lửa​

Tiếp theo, bạn sẽ cần cho phép các cổng 80 và 443 đi qua tường lửa. Bạn có thể cho phép chúng bằng cách chạy lệnh sau:

firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp

Tiếp theo, tải lại tường lửa để áp dụng các thay đổi cấu hình:

firewall-cmd --reload

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 Reactjs​

Bây giờ, hãy mở trình duyệt web của bạn và truy cập ứng dụng Reactjs của bạn bằng URL http://react.example.com. Bạn sẽ thấy trang Reactjs trên màn hình sau:

Kết luận​

Xin chúc mừng! bạn đã cài đặt thành công Reactjs trên CentOS 8. Bạn cũng đã cấu hình Nginx làm proxy ngược cho ứng dụng Reactjs. Bây giờ bạn có thể bắt đầu phát triển ứng dụng Reactjs của mình.