Cách cài đặt ReactJS với Nginx trên Ubuntu 22.04

[theanh]

React.js là một framework JavaScript miễn phí và mã nguồn mở do Facebook phát triển vào năm 2011. Nó được sử dụng để xây dựng các thành phần UI có thể tái sử dụng và giúp người dùng 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. Với React, bạn có thể xây dựng một giao diện web tương tác và tạo ra các UI phức tạp từ các phần nhỏ và biệt lập. Nó sử dụng Virtual DOM giúp ứng dụng chạy nhanh. Nó cung cấp rất nhiều tính năng như Virtual DOM, One-way Data Binding, Components, JSX, Conditional Statements và nhiều tính năng khác nữa.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách cài đặt React.js trên Ubuntu 22.04.

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

• Một máy chủ chạy Ubuntu 22.04.
• 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​

Đầu tiên, 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 lệnh sau:

apt-get update -y
apt-get upgrade -y

Sau khi tất cả các gói được cập nhật, hãy chạy lệnh sau để cài đặt các gói cần thiết khác dependency:

apt-get install curl gnupg2 -y

Sau khi tất cả các dependency đượ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 trên 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 22.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_18.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 cách sử dụng lệnh sau lệnh:

npm install npm@latest -g

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

removed 14 packages, changed 73 packages, and audited 223 packages in 3s
14 packages are looking for funding run `npm fund` for details
found 0 vulnerabilities

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

node -v

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

v18.12.1

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à một công cụ CLI giúp người dùng 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

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 mẫu​

Trong phần này, chúng ta sẽ tạo một ứng dụng React mẫu bằng công cụ Create React App.

Đầu 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 lệnh:

cd /opt
create-react-app reactapp

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

Success! Created reactapp at /opt/reactapp
Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing: cd reactapp npm start
Happy hacking!

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

cd /opt/reactapp
npm start

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

Compiled successfully!
You can now view reactapp in the browser. http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully

Nhấn CTRL+C để dừng ứng dụng. Chúng tôi sẽ tạo một tệp dịch vụ systemd để quản lý ứng dụng React.

Tạo dịch vụ Systemd cho ứng dụng React​

Tiếp theo, bạn sẽ cần tạo một dịch vụ systemd cho ứng dụng React của mình. 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:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactapp
ExecStart=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 nó 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 lệnh:

systemctl status react

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

? react.service Loaded: loaded (/lib/systemd/system/react.service; static) Active: active (running) since Sun 2022-11-20 11:18:50 UTC; 6s ago Main PID: 76129 (npm start --por) Tasks: 30 (limit: 2242) Memory: 250.9M CPU: 4.663s CGroup: /system.slice/react.service ??76129 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ??76140 sh -c "react-scripts start --port=3000" ??76141 node /opt/reactapp/node_modules/.bin/react-scripts start --port=3000 ??76148 /usr/bin/node /opt/reactapp/node_modules/react-scripts/scripts/start.js --port=3000
Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddl>
Nov 20 11:18:54 ubuntu2204 npm[76148]: (Use `node --trace-deprecation ...` to show where the warning was created)
Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMid>
Nov 20 11:18:54 ubuntu2204 npm[76148]: Starting the development server...
Nov 20 11:18:55 ubuntu2204 npm[76148]: Compiled successfully!
Nov 20 11:18:55 ubuntu2204 npm[76148]: You can now view reactapp in the browser.
Nov 20 11:18:55 ubuntu2204 npm[76148]: http://localhost:3000
Nov 20 11:18:55 ubuntu2204 npm[76148]: Note that the development build is not optimized.
Nov 20 11:18:55 ubuntu2204 npm[76148]: To create a production build, use npm run build.
Nov 20 11:18:55 ubuntu2204 npm[76148]: webpack compiled successfully

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​

Bạn nên cài đặt và cấu hình Nginx là 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 nội dung sau dòng:

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 Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $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 true; proxy_redirect off; }
}

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 xác minh Nginx xem có lỗi cú pháp nào không bằng cách chạy lệnh sau lệnh:

nginx -t

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

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Cuối cùng, khởi động lại dịch vụ Nginx để áp dụng thay đổi:

systemctl restart nginx

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

systemctl status nginx

Bạn sẽ thấy thông báo sau đầu ra:

? nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Sun 2022-11-20 11:20:17 UTC; 6s ago Docs: man:nginx(8) Process: 76760 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Process: 76762 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Main PID: 76763 (nginx) Tasks: 2 (limit: 2242) Memory: 2.6M CPU: 32ms CGroup: /system.slice/nginx.service ??76763 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;" ??76764 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
Nov 20 11:20:17 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 20 11:20:17 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.

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.

Bảo mật React.js với Let's Encrypt​

Tiếp theo, bạn sẽ cần cài đặt gói máy khách Certbot để cài đặt và quản lý Let's Encrypt SSL.

Trước tiên, hãy cài đặt Certbot bằng lệnh sau:

apt-get install python3-certbot-nginx -y

Sau khi cài đặt hoàn tất, hãy chạy lệnh sau để cài đặt Let's Encrypt SSL trên trang web:

certbot --nginx -d reactjs.example.com

Bạn sẽ được yêu cầu cung cấp địa chỉ email hợp lệ và chấp nhận điều khoản dịch vụ như hiển thị bên dưới:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): [emailprotected]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for reactjs.example.com
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/sites-enabled/fuel.conf

Tiếp theo, chọn có chuyển hướng lưu lượng HTTP sang HTTPS hay không như hiển thị bên dưới:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

Gõ 2 và nhấn Enter để hoàn tất quá trình cài đặt. Bạn sẽ thấy kết quả đầu ra sau:

Redirecting all traffic on port 80 to ssl in /etc/nginx/sites-enabled/fuel.conf
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://reactjs.example.com
You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=reactjs.example.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/reactjs.example.com/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/reactjs.example.com/privkey.pem Your cert will expire on 2023-02-20. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le - We were unable to subscribe you the EFF mailing list because your e-mail address appears to be invalid. You can try again later by visiting https://act.eff.org.

Bây giờ, ứng dụng web React.js của bạn đã được bảo mật bằng Let's Encrypt SSL.

Truy cập Giao diện web ứng dụng React​

Bây giờ, hãy mở trình duyệt web của bạn và nhập URL https://reactjs.example.com. Bạn sẽ được chuyển hướng đến giao diện web React.Js trên màn hình sau:


data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22750%22%20height=%22414%22%3E%3C/svg%3E

Kết luận​

Xin chúc mừng! Bạn đã cài đặt và cấu hình thành công React.Js trên máy chủ Ubuntu 22.04. Bây giờ bạn có thể bắt đầu xây dựng ứng dụng dựa trên React của riêng mình và lưu trữ 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.