ReactJS: Cách triển khai ứng dụng React với Nginx trên Ubuntu
Giải phóng thời gian, khai phóng năng lực
Giới thiệu
Bạn có thể nhanh chóng triển khai các ứng dụng React tới một máy chủ bằng cách sử dụng công cụ tạo ứng dụng React mặc định. Tập lệnh build
sẽ biên dịch ứng dụng thành một thư mục duy nhất chứa tất cả mã JavaScript, hình ảnh, kiểu và tệp HTML. Với các nội dung ở một vị trí duy nhất, bạn có thể triển khai tới một máy chủ web với cấu hình tối thiểu.
Trong hướng dẫn này, bạn sẽ triển khai ứng dụng React trên máy cục bộ của mình tới máy chủ Ubuntu chạy Nginx. Bạn sẽ xây dựng một ứng dụng bằng Create React App, sử dụng tệp cấu hình Nginx để xác định vị trí triển khai tệp và sao chép an toàn thư mục build và nội dung của nó vào máy chủ. Đến cuối hướng dẫn này, bạn sẽ có thể xây dựng và triển khai một ứng dụng React.
Điều kiện tiên quyết
- Bạn sẽ cần một môi trường phát triển chạy Node.js. Để cài đặt phần mềm này trên macOS hoặc Ubuntu, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu.
- Một máy chủ Ubuntu để triển khai, được thiết lập bằng cách làm theo thiết lập máy chủ ban đầu này cho hướng dẫn Ubuntu, bao gồm người dùng không phải root đã kích hoạt sudo, tường lửa và quyền truy cập SSH từ máy cục bộ của bạn.
- Môi trường phát triển React được thiết lập với Create React App. Để thiết lập điều này, hãy làm theo Bước 1 - Tạo một dự án trống của hướng dẫn Cách quản lý trạng thái trên các thành phần lớp React. Hướng dẫn này sẽ sử dụng
performance-tutorial
làm tên dự án. - Nếu bạn chưa quen gỡ lỗi trong React, hãy xem hướng dẫn Cách gỡ lỗi các component trong React bằng Công cụ dành cho nhà phát triển React và tự làm quen với các công cụ dành cho nhà phát triển trong trình duyệt bạn đang sử dụng, chẳng hạn như Chrome DevTools và Firefox Developer Tools.
- Tên miền đã đăng ký. Hướng dẫn này sẽ sử dụng
your_domain
xuyên suốt. - Cả hai bản ghi DNS sau được thiết lập cho máy chủ của bạn.
- Bản ghi A với việc
your_domain
trỏ đến địa chỉ IP công cộng của máy chủ của bạn. - Bản ghi A với việc www.your_domain trỏ đến địa chỉ IP công cộng của máy chủ của bạn.
- Bản ghi A với việc
- Đã cài đặt Nginx bằng cách làm theo Cách cài đặt Nginx trên Ubuntu 20.04. Đảm bảo rằng bạn có khối máy chủ cho miền của mình. Hướng dẫn này sẽ sử dụng /etc/nginx/sites-available/your_domain làm ví dụ.
- Bạn cũng nên bảo mật máy chủ của mình bằng chứng chỉ HTTPS. Bạn có thể thực hiện việc này với hướng dẫn Cách bảo mật Nginx với Let's Encrypt trên Ubuntu.
- Bạn cũng sẽ cần kiến thức cơ bản về JavaScript, HTML và CSS.
Bước 1 - Tạo một dự án React
Trong bước này, bạn sẽ tạo một ứng dụng bằng Create React App và xây dựng một phiên bản có thể triển khai của ứng dụng boilerplate.
Để bắt đầu, hãy tạo một ứng dụng mới bằng Tạo ứng dụng React trong môi trường cục bộ của bạn. Trong một thiết bị đầu cuối, hãy chạy lệnh để xây dựng một ứng dụng. Trong hướng dẫn này, dự án sẽ được gọi là react-deploy
:
npx create-react-app react-deploy
Lệnh npx
s sẽ chạy một gói Node mà không cần tải nó xuống máy của bạn. Lệnh create-react-app
sẽ cài đặt tất cả các phụ thuộc cần thiết cho ứng dụng React của bạn và sẽ xây dựng một dự án cơ sở trong thư mục react-deploy
. Để biết thêm về Tạo ứng dụng React, hãy xem hướng dẫn Cách thiết lập một dự án React với Tạo ứng dụng React.
Mã sẽ chạy trong vài phút khi tải xuống và cài đặt các phần phụ thuộc. Khi hoàn tất, bạn sẽ nhận được thông báo thành công. Phiên bản của bạn có thể hơi khác nếu bạn sử dụng yarn
thay vì npm
:
Output
Success! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm 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 react-deploy
npm start
Happy hacking!
Theo gợi ý trong output, trước tiên hãy chuyển đến thư mục dự án:
cd react-deploy
Bây giờ bạn có một dự án cơ sở, hãy chạy nó cục bộ để kiểm tra xem nó sẽ xuất hiện như thế nào trên máy chủ. Chạy dự án bằng cách sử dụng lệnh npm start
:
npm start
Khi lệnh chạy, bạn sẽ nhận được đầu ra với thông tin máy chủ cục bộ:
Output
Compiled successfully!
You can now view react-deploy in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.110:3000
Note that the development build is not optimized.
To create a production build, use npm build.
Mở trình duyệt và điều hướng đến http://localhost:3000
. Bạn sẽ có thể truy cập ứng dụng React bản soạn sẵn:
Dừng dự án bằng cách nhập một trong hai CTRL+C
hoặc ⌘+C
trong Terminal.
Bây giờ bạn có một dự án chạy thành công trong một trình duyệt, bạn cần tạo một bản dựng sản xuất. Chạy lệnh build với những điều sau:
npm run build
Lệnh này sẽ biên dịch JavaScript và nội dung vào thư mục build
. Khi lệnh kết thúc, bạn sẽ nhận được một số đầu ra với dữ liệu về bản dựng của bạn. Lưu ý rằng các tên tệp bao gồm một hàm băm, vì vậy đầu ra của bạn sẽ hơi khác một chút:
Output
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.21 KB build/static/js/2.82f639e7.chunk.js
1.4 KB build/static/js/3.9fbaa076.chunk.js
1.17 KB build/static/js/runtime-main.1caef30b.js
593 B build/static/js/main.e8c17c7d.chunk.js
546 B build/static/css/main.ab7136cd.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
https://cra.link/deployment
Thư mục build
bây giờ sẽ bao gồm các phiên bản đã biên dịch và rút gọn của tất cả các tệp bạn cần cho dự án của mình. Tại thời điểm này, bạn không cần phải lo lắng về bất cứ điều gì bên ngoài thư mục build
. Tất cả những gì bạn cần làm là triển khai thư mục tới một máy chủ.
Như vậy trong bước này, bạn đã tạo một ứng dụng React mới. Bạn đã xác minh rằng ứng dụng chạy cục bộ và bạn đã tạo phiên bản sản xuất bằng cách sử dụng tập lệnh Tạo ứng dụng React build
. Trong bước tiếp theo, bạn sẽ đăng nhập vào máy chủ của mình để tìm hiểu nơi sao chép thư mục build
.
Bước 2 - Xác định vị trí tệp triển khai trên máy chủ Ubuntu của bạn
Trong bước này, bạn sẽ bắt đầu triển khai ứng dụng React của mình lên một máy chủ. Nhưng trước khi có thể tải tệp lên, bạn cần xác định vị trí tệp chính xác trên máy chủ triển khai của mình. Hướng dẫn này sử dụng Nginx làm máy chủ web, nhưng cách tiếp cận giống với Apache. Sự khác biệt chính là các tệp cấu hình sẽ nằm trong một thư mục khác.
Để tìm thư mục mà máy chủ web sẽ sử dụng làm thư mục gốc cho dự án của bạn, hãy đăng nhập vào máy chủ của bạn bằng ssh
:
ssh username@server_ip
Khi ở trên máy chủ, hãy tìm cấu hình máy chủ web của bạn trong /etc/nginx/sites-enabled
. Ngoài ra còn có một thư mục được gọi là sites-allowed
; thư mục này bao gồm các cấu hình không nhất thiết phải được kích hoạt. Khi bạn tìm thấy tệp cấu hình, hãy hiển thị đầu ra trong thiết bị đầu cuối của bạn bằng lệnh sau:
cat /etc/nginx/sites-enabled/your_domain
Nếu trang web của bạn không có chứng chỉ HTTPS, bạn sẽ nhận được kết quả tương tự như sau:
Output
server {
listen 80;
listen [::]:80;
root /var/www/your_domain/html;
index index.html index.htm index.nginx-debian.html;
server_name your_domain www.your_domain;
location / {
try_files $uri $uri/ =404;
}
}
Nếu bạn đã làm theo điều kiện tiên quyết Let's Encrypt để bảo mật máy chủ Ubuntu của mình, bạn sẽ nhận được kết quả sau:
Output
server {
root /var/www/your_domain/html;
index index.html index.htm index.nginx-debian.html;
server_name your_domain www.your_domain;
location / {
try_files $uri $uri/ =404;
}
listen [::]:443 ssl ipv6only=on; # managed by Certbobt
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.your_domain) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = your_domain) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
listen [::]:80;
server_name your_domain www.your_domain;
return 404; # managed by Certbot
}
Trong cả hai trường hợp, trường quan trọng nhất để triển khai ứng dụng React của bạn là root
. Điều này trỏ các yêu cầu HTTP đến thư mục /var/www/your_domain/html. Điều đó có nghĩa là bạn sẽ sao chép các tệp của mình vào vị trí đó. Trong dòng tiếp theo, bạn có thể thấy rằng Nginx sẽ tìm kiếm một file index.html. Nếu bạn nhìn vào thư mục cục bộ của mình, bạn sẽ thấy một file build
index.html
sẽ đóng vai trò là điểm nhập chính.
Đăng xuất khỏi máy chủ Ubuntu và quay lại môi trường phát triển cục bộ của bạn.
Bây giờ bạn đã biết vị trí tệp mà Nginx sẽ phân phát, bạn có thể tải lên bản dựng của mình.
Bước 3 - Tải lên tệp bản dựng với scp
Tại thời điểm này, các file build
của bạn đã sẵn sàng. Tất cả những gì bạn cần làm là sao chép chúng vào máy chủ. Một cách nhanh chóng để thực hiện việc này là sử dụng scp
để sao chép các tệp của bạn vào đúng vị trí. Lệnh scp
là một cách an toàn để sao chép tệp vào máy chủ từ xa từ một thiết bị đầu cuối. Lệnh sử dụng khóa ssh
của bạn nếu nó được cấu hình. Nếu không, bạn sẽ được nhắc nhập tên người dùng và mật khẩu.
Định dạng lệnh sẽ là .scp files_to_copy username@server_ip:path_on_server
. Đối số đầu tiên sẽ là các tệp bạn muốn sao chép. Trong trường hợp này, bạn đang sao chép tất cả các tệp trong thư mục build. Đối số thứ hai là sự kết hợp giữa thông tin đăng nhập của bạn và đường dẫn đích. Đường dẫn đích sẽ giống như root trong cấu hình Nginx của bạn: /var/www/your_domain/html
Sao chép tất cả các file build
bằng ký tự đại diện *
vào /var/www/your_domain/html:
scp -r ./build/* username@server_ip:/var/www/your_domain/html
Khi bạn chạy lệnh, bạn sẽ nhận được kết quả hiển thị rằng các tệp của bạn đã được tải lên. Kết quả của bạn sẽ hơi khác một chút:
Output
asset-manifest.json 100% 1092 22.0KB/s 00:00
favicon.ico 100% 3870 80.5KB/s 00:00
index.html 100% 3032 61.1KB/s 00:00
logo192.png 100% 5347 59.9KB/s 00:00
logo512.png 100% 9664 69.5KB/s 00:00
manifest.json 100% 492 10.4KB/s 00:00
robots.txt 100% 67 1.0KB/s 00:00
main.ab7136cd.chunk.css 100% 943 20.8KB/s 00:00
main.ab7136cd.chunk.css.map 100% 1490 31.2KB/s 00:00
runtime-main.1caef30b.js.map 100% 12KB 90.3KB/s 00:00
3.9fbaa076.chunk.js 100% 3561 67.2KB/s 00:00
2.82f639e7.chunk.js.map 100% 313KB 156.1KB/s 00:02
runtime-main.1caef30b.js 100% 2372 45.8KB/s 00:00
main.e8c17c7d.chunk.js.map 100% 2436 50.9KB/s 00:00
3.9fbaa076.chunk.js.map 100% 7690 146.7KB/s 00:00
2.82f639e7.chunk.js 100% 128KB 226.5KB/s 00:00
2.82f639e7.chunk.js.LICENSE.txt 100% 1043 21.6KB/s 00:00
main.e8c17c7d.chunk.js 100% 1045 21.7KB/s 00:00
logo.103b5fa1.svg 100% 2671 56.8KB/s 00:00
Khi lệnh được thực hiện thành công, thì bạn đã hoàn thành. Vì một dự án React được xây dựng bằng các tệp tĩnh chỉ cần một trình duyệt, bạn không phải định cấu hình bất kỳ ngôn ngữ phía máy chủ nào nữa. Mở trình duyệt và điều hướng đến tên miền của bạn. Khi làm như vậy, bạn sẽ thấy dự án React của mình:
Như vậy trong bước này, bạn đã triển khai một ứng dụng React tới một máy chủ. Bạn đã học cách xác định thư mục web gốc trên máy chủ của mình và bạn đã sao chép các tệp bằng scp
. Khi các file hoàn tất tải lên, bạn có thể xem dự án của mình trong trình duyệt web.
Phần kết luận
Triển khai ứng dụng React là một quá trình nhanh chóng khi bạn sử dụng Create React App. Bạn chạy lệnh build
để tạo một thư mục chứa tất cả các tệp bạn cần để triển khai. Sau khi chạy bản build, bạn sao chép các file vào vị trí chính xác trên máy chủ, đẩy ứng dụng của bạn trực tuyến lên web.
Nếu bạn muốn đọc thêm các hướng dẫn về React, hãy quay lại trang Cách viết mã trong chuỗi React.js.
Giải phóng thời gian, khai phóng năng lực