Cách cài đặt ReactJS trên Ubuntu 20.04

[theanh]

ReactJS là một thư viện JavaScript miễn phí và mã nguồn mở được sử dụng để xây dựng các thành phần UI có thể tái sử dụng. Nó được Facebook phát triển vào năm 2011 để tạo các ứng dụng web phong phú và hấp dẫn một cách nhanh chóng và hiệu quả với mã hóa tối thiểu. Nó cho phép bạn tạo các thành phần tương tác trên các trang web. Nó sử dụng DOM ảo giúp ứng dụng chạy nhanh. Nó cung cấp một bộ tính năng phong phú bao gồm DOM ảo, Liên kết dữ liệu một chiều, Thành phần, JSX, Câu lệnh có điều kiện và nhiều tính năng khác.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách cài đặt ứng dụng tạo phản ứng và lưu trữ ứng dụng ReactJS với máy chủ web Nginx trên Ubuntu 20.04.

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

• Máy chủ chạy Ubuntu 20.04 với tối thiểu 2 GB RAM.
• Tên miền hợp lệ được trỏ bằng IP máy chủ của bạn. Trong hướng dẫn này, chúng ta sẽ sử dụng tên miền reactjs.example.com.
• Mật khẩu gốc được cấu hình cho máy chủ.

Bắt đầu​

Trước khi bắt đầu, bạn nên cập nhật các gói hệ thống 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:

apt-get 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 cách chạy lệnh sau:

apt-get install curl gnupg2 -y

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

Cài đặt Node.js​

Tiếp theo, bạn sẽ cần cài đặt Node.js vào máy chủ của mình. Theo mặc định, phiên bản Node.js mới nhất không có trong kho lưu trữ chuẩn Ubuntu 20.04. Vì vậy, bạn sẽ cần cài đặt Node.js từ kho lưu trữ chính thức của Node.js.

Đầu tiên, hãy thêm kho lưu trữ Node.js bằng lệnh sau:

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

Tiếp theo, hãy chạy lệnh sau để cài đặt Node.js vào hệ thống của bạn:

apt-get install nodejs -y

Sau khi cài đặt Node.js, hãy cập nhật NPM lên phiên bản mới nhất bằng lệnh sau:

npm install npm@latest -g

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

/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js+ [emailprotected]đã cập nhật 2 gói trong 12,78 giây

Tiếp theo, hãy xác minh phiên bản Node.js đã cài đặt bằng lệnh sau:

node -v

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

v14.15.3

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

Cài đặt Công cụ Create React App​

Create React App là công cụ giúp bạn tiết kiệm thời gian thiết lập và cấu hình. Bạn chỉ cần chạy một lệnh duy nhất và Create React App sẽ thiết lập tất cả các công cụ cần thiết để bắt đầu dự án của bạn.

Bạn có thể cài đặt công cụ Create React App bằng lệnh sau:

npm install -g create-react-app

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

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js+ [emailprotected]đã thêm 67 gói từ 25 người đóng góp trong 4.705 giây

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

Tạo ứng dụng React đầu tiên của bạn​

Trong phần này, chúng tôi sẽ chỉ cho bạn cách tạo ứng dụng React bằng công cụ Create React App.

Trước tiên, hãy đổi thư mục thành /opt và tạo dự án đầu tiên của bạn bằng lệnh sau:

cd /opt
create-react-app reactproject

Bạn sẽ thấy đầu ra sau:

Thành công! Đã tạo reactproject tại /opt/reactprojectBê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 reactproject npm startChúc bạn hack vui vẻ!

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

cd /opt/reactproject
npm start

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

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

Nhấn CTRL+C để dừng ứng dụng.

Tạo tệp khởi động cho ứng dụng React​

Nếu bạn muốn tự động khởi động React App khi khởi động lại hệ thống thì bạn sẽ cần tạo một dịch vụ systemd cho ứng dụng React của mình. Vì vậy, bạn có thể quản lý ứng dụng của mình dễ dàng bằng lệnh systemctl. Bạn có thể tạo tệp dịch vụ systemd bằng lệnh sau:

nano /lib/systemd/system/react.service

Thêm các dòng sau:

[Service]Type=simpleUser=rootRestart=on-failureWorkingDirectory=/opt/reactprojectExecStart=npm start -- --port=3000

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ụ React và cho phép dịch vụ này khởi động khi khởi động lại hệ thống bằng cách chạy lệnh sau:

systemctl start react
systemctl enable react

Bạn có thể xác minh trạng thái của dịch vụ React 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 (/lib/systemd/system/react.service; tĩnh; cài đặt trước của nhà cung cấp: đã bật) Đang hoạt động: đang hoạt động (đang chạy) kể từ Thứ bảy 2020-12-19 06:11:42 UTC; 4 giây trước PID chính: 30833 (node) Nhiệm vụ: 30 (giới hạn: 4691) Bộ nhớ: 141,0M CGroup: /system.slice/react.service ??30833 npm ??30844 sh -c react-scripts start "--port=3000" ??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000 ??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=300019/12 06:11:42 ubuntu2004 systemd[1]: Đã khởi động react.service.19/12 06:11:43 ubuntu2004 npm[30833]: > [emailprotected] start /opt/reactproject19/12 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"19/12 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Dự án đang chạy tại http://0.0.0.0:3000/19/12 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: đầu ra webpack được phục vụ từ19/12 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Nội dung không phải từ webpack được phục vụ từ /opt/reactproject/public19/12 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s sẽ chuyển về /19/12 06:11:46 ubuntu2004 npm[30852]: Đang khởi động máy chủ phát triển...

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

Cấu hình Nginx cho React App​

Bạn nên cài đặt và cấu hình Nginx làm proxy ngược cho React App. Vì vậy, bạn có thể truy cập ứng dụng của mình thông qua cổng 80.

Đầu tiên, hãy cài đặt gói Nginx bằng lệnh sau:

apt-get 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:

nano /etc/nginx/sites-available/reactjs.conf

Thêm các dòng sau:

upstream backend { server localhost:3000;}server { listen 80; server_name reactjs.example.com; location / { proxy_pass http://backend/; proxy_http_version 1.1; proxy_set_header Nâng cấp $http_upgrade; proxy_set_header Kết nối "nâng cấp"; proxy_set_header Máy chủ $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forward-For $proxy_add_x_forwarded_for; proxy_set_header X-Forward-Proto http; proxy_set_header X-Nginx-Proxy đúng; proxy_redirect tắt; }}

Lưu và đóng tệp, sau đó bật máy chủ ảo Nginx bằng lệnh sau:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Tiếp theo, hãy kiểm tra Nginx xem có lỗi cú pháp nào không bằng cách chạy 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 lại dịch vụ Nginx để áp dụng các thay đổi:

systemctl restart nginx

Bạn cũng có thể kiểm tra trạng thái dịch vụ Nginx bằng lệnh sau:

systemctl status nginx

Bạn sẽ thấy đầu ra sau:

? nginx.service - Một máy chủ web hiệu suất cao và một máy chủ proxy ngược Đã tải: đã tải (/lib/systemd/system/nginx.service; đã bật; cài đặt trước của nhà cung cấp: đã bật) Đang hoạt động: đang hoạt động (đang chạy) kể từ Sat 2020-12-19 06:12:42 UTC; 4 giây trước Tài liệu: man:nginx(8) Quy trình: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Quy trình: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS) PID chính: 30915 (nginx) Nhiệm vụ: 3 (giới hạn: 4691) Bộ nhớ: 3,6M CGroup: /system.slice/nginx.service ??30915 nginx: tiến trình chính /usr/sbin/nginx -g daemon bật; master_process bật; ??30916 nginx: tiến trình công nhân ??30917 nginx: tiến trình công nhân19/12 06:12:42 ubuntu2004 systemd[1]: Đang khởi động Một máy chủ web hiệu suất cao và một máy chủ proxy ngược...19/12 06:12:42 ubuntu2004 systemd[1]: Đã khởi động Một máy chủ web hiệu suất cao và một máy chủ proxy ngược.

Tại thời điểm này, Nginx đã được cài đặt và cấu hình để phục vụ React App. Bây giờ bạn có thể tiến hành bước tiếp theo.

Truy cập Giao diện web React App​

Bây giờ, hãy mở trình duyệt web của bạn và nhập URL

http://reactjs.example.com

. Bạn sẽ được chuyển hướng đến giao diện web React.Js trong màn hình sau:

Kết luận​

Xin chúc mừng! Bạn đã cài đặt và cấu hình React.Js thành công trên máy chủ Ubuntu 20.04. Tôi hy vọng bây giờ bạn đã có đủ kiến thức để triển khai ứng dụng React của riêng mình trong môi trường sản xuất. Hãy thoải mái hỏi tôi nếu bạn có bất kỳ câu hỏi nào.