Bạn có thể nhanh chóng triển khai các ứng dụng React lên máy chủ bằng công cụ xây dựng mặc định Create React App. Script build biên dịch ứng dụng thành một thư mục duy nhất chứa toàn bộ mã JavaScript, hình ảnh, styles, và file HTML. Với toàn bộ tài nguyên nằm một chỗ, bạn có thể triển khai lên web server với cấu hình tối thiểu.
Trong bài hướng dẫn này, bạn sẽ triển khai một ứng dụng React trên máy cục bộ lên một server Ubuntu chạy Nginx. Bạn sẽ xây dựng ứng dụng bằng Create React App, sử dụng file cấu hình Nginx để xác định vị trí triển khai file, và sao chép an toàn thư mục build cùng nội dung của nó lên server. Cuối cùng, bạn sẽ có thể xây dựng và triển khai ứng dụng React.
Nếu bạn đang sử dụng Ubuntu phiên bản 16.04 hoặc thấp hơn, khuyến khích nâng cấp lên phiên bản mới hơn vì Ubuntu không còn hỗ trợ các phiên bản này. Bộ hướng dẫn nâng cấp Ubuntu sẽ hỗ trợ bạn.
Để theo dõi bài này, bạn cần:
sudo và firewall đang hoạt động. Để được hướng dẫn cách thiết lập, hãy chọn bản phân phối của bạn trong danh sách này và theo dõi Hướng dẫn thiết lập server ban đầu./etc/nginx/sites-available/your_domain.your_domain trỏ đến IP công cộng server.www.your_domain trỏ đến IP công cộng server.Trong bước này, bạn sẽ tạo một ứng dụng sử dụng Create React App và xây dựng phiên bản có thể triển khai của ứng dụng mẫu.
Đầu tiên, tạo ứng dụng mới bằng Create React App trong môi trường local. Trong terminal, chạy lệnh để khởi tạo dự án, trong hướng dẫn này gọi là react-deploy:
$ npx create-react-app react-deploy
Lệnh npx sẽ chạy gói Node mà không cần tải xuống máy bạn. Script create-react-app sẽ cài đặt các phụ thuộc cần thiết cho app React và xây dựng dự án cơ bản trong thư mục react-deploy. Để hiểu thêm, xem hướng dẫn Cách thiết lập dự án React với Create React App.
Lệnh sẽ chạy trong vài phút trong khi tải và cài đặt các phụ thuộc. Khi hoàn thành, bạn sẽ nhận được thông báo thành công. Phiên bản output có thể khác nếu 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 ý, di chuyển vào thư mục dự án trước:
$ cd react-deploy
Giờ bạn đã có dự án cơ bản, hãy chạy thử cục bộ để kiểm tra giao diện trên server. Dùng lệnh:
$ npm start
Khi lệnh chạy, bạn sẽ nhận thông tin server local:
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 truy cập http://localhost:3000, bạn sẽ thấy ứng dụng React mẫu:
Dừng dự án bằng cách nhấn CTRL+C hoặc ⌘+C trong terminal.
Giờ cần tạo bản dựng production. Chạy script build:
$ npm run build
Lệnh sẽ biên dịch JavaScript và tài nguyên vào thư mục build. Sau khi hoàn tất, nhận output có dạng gần giống:
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
Bây giờ thư mục build chứa phiên bản đã biên dịch và thu gọn của toàn bộ file cần thiết cho dự án. Bạn chỉ cần triển khai thư mục này lên server.
Trong bước này, bạn đã tạo ứng dụng mới, chạy thử trên local và tạo bản dựng production dùng script build của Create React App. Bước tiếp theo là đăng nhập vào server để biết vị trí sao chép thư mục build.
Bước này giúp bạn xác định vị trí đúng trên server để tải file lên. Bài dùng Nginx như web server, phương pháp tương tự với Apache (Ubuntu 22.04 / 20.04 / 18.04), chỉ khác thư mục file cấu hình.
Đăng nhập vào server bằng ssh:
$ ssh username@server_ip
Trên server, tìm file cấu hình web server trong /etc/nginx/sites-enabled. Thư mục sites-allowed chứa các cấu hình chưa kích hoạt. Khi tìm được file cấu hình, hiển thị nội dung bằng lệnh:
$ cat /etc/nginx/sites-enabled/your_domain
Nếu trang bạn chưa có chứng chỉ HTTPS, output tương tự:
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 bật Let’s Encrypt, output sẽ như 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 Certbot
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
}
Trường quan trọng nhất để triển khai ứng dụng React là root, nó chỉ tới thư mục /var/www/your_domain/html. Bạn sẽ sao chép các file vào thư mục này. Dòng kế tiếp cho thấy Nginx sẽ tìm file index.html. Trong thư mục build của bạn có sẵn file index.html làm điểm vào chính.
Đăng xuất server Ubuntu trở lại môi trường phát triển local.
Giờ bạn đã biết vị trí file Nginx sẽ phục vụ, có thể tải bản build lên server.
scpKhi các file trong thư mục build đã sẵn sàng, bạn chỉ việc sao chép lên server. Cách nhanh nhất dùng lệnh scp để copy file từ terminal lên server. scp dùng khóa ssh nếu đã thiết lập, nếu chưa bạn sẽ được hỏi username và password.
Cú pháp lệnh là scp files_to_copy username@server_ip:path_on_server. Đối số đầu là các file bạn muốn copy (trong trường hợp này là toàn bộ file trong thư mục build). Đối số thứ hai gồm thông tin đăng nhập và đường dẫn đích trên server, bằng với trường root trong cấu hình Nginx: /var/www/your_domain/html.
Dùng lệnh sao chép toàn bộ file trong build vào /var/www/your_domain/html:
$ scp -r ./build/* username@server_ip:/var/www/your_domain/html
Khi chạy, bạn sẽ thấy output xác nhận quá trình upload file:
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 hoàn tất, bạn đã xong. Vì dự án React là các file tĩnh dùng trình duyệt nên không cần cấu hình server thêm. Mở trình duyệt truy cập domain của bạn, bạn sẽ thấy ứng dụng React:
Trong bước này, bạn đã triển khai ứng dụng React lên server, biết cách xác định thư mục web root và sao chép file với scp. Khi file upload xong, dự án sẽ hiển thị trên trình duyệt.
Việc triển khai ứng dụng React rất nhanh nếu dùng Create React App. Bạn chạy lệnh build để tạo thư mục chứa toàn bộ file cần thiết. Sau đó, sao chép các file vào vị trí đúng trên server, đưa ứng dụng chạy trực tuyến trên web.