Lưu ý -- bạn có thể cần ít nhất gói Hacker cơ bản vì dung lượng ổ đĩa cần thiết để cài đặt React với tất cả các phụ thuộc và số giây CPU đã tiêu tốn trong quá trình cài đặt
từ chối trách nhiệm
Có nhiều cách khả thi để sử dụng React với khung phụ trợ -- các bước được trình bày bên dưới đang chỉ ra một cách khả thi để kết nối những cách đó trên PythonAnywhere để tạo điểm khởi đầu cho các điều chỉnh tiếp theo
điều kiện tiên quyết
Giả sử rằng bạn có một Nút đang hoạt động. js trên tài khoản PythonAnywhere của bạn -- nếu không, hãy làm theo các bước được đề cập trên trang trợ giúp này
Tạo một giàn giáo ứng dụng React frontend
Giả sử ứng dụng web của bạn [Django hoặc Flask] nằm ở thư mục
cd frontend
npm run build
2cd ~/mysite
npx create-react-app frontend
Nếu nó hoạt động tốt, hãy nhập thư mục
cd frontend
npm run build
3 và tạo bản dựng sản xuất của ứng dụng Reactcd frontend
npm run build
Điều đó sẽ thêm một thư mục
cd frontend
npm run build
4 với một thư mục con cd frontend
npm run build
0 bên trong. Hãy xem vị trí của các tài nguyên cd frontend
npm run build
1 cũng như cd frontend
npm run build
2 và cd frontend
npm run build
3~/mysite/frontend $ tree -I node_modules ... ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── static │ ├── css │ │ ├── main.073c9b0a.css │ │ └── main.073c9b0a.css.map │ ├── js │ │ ├── 787.cda612ba.chunk.js │ │ ├── 787.cda612ba.chunk.js.map │ │ ├── main.b7ea7086.js │ │ ├── main.b7ea7086.js.LICENSE.txt │ │ └── main.b7ea7086.js.map │ └── media │ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg ...
Django
Giả sử bạn đã tạo ứng dụng web Django trong
cd frontend
npm run build
2 bằng trình hướng dẫn của chúng tôi trên trang ứng dụng Webcd frontend
npm run build
5
Mở
cd frontend
npm run build
6Giả sử rằng
cd frontend
npm run build
7 là một đối tượng cd frontend
npm run build
8 [bạn có thể cần điều chỉnh cú pháp nếu bạn sử dụng cd frontend
npm run build
9 thay thế], hãy cho Django biết nơi tìm kiếm mẫu cd frontend
npm run build
1 cơ bản do React cung cấpcd frontend
npm run build
3Tiếp theo, trỏ Django đến các tài nguyên tĩnh do bản dựng React cung cấp
cd frontend
npm run build
4~/mysite/frontend $ tree -I node_modules
...
├── build
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── robots.txt
│ └── static
│ ├── css
│ │ ├── main.073c9b0a.css
│ │ └── main.073c9b0a.css.map
│ ├── js
│ │ ├── 787.cda612ba.chunk.js
│ │ ├── 787.cda612ba.chunk.js.map
│ │ ├── main.b7ea7086.js
│ │ ├── main.b7ea7086.js.LICENSE.txt
│ │ └── main.b7ea7086.js.map
│ └── media
│ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
...
1
Hãy sử dụng một
~/mysite/frontend $ tree -I node_modules ... ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── static │ ├── css │ │ ├── main.073c9b0a.css │ │ └── main.073c9b0a.css.map │ ├── js │ │ ├── 787.cda612ba.chunk.js │ │ ├── 787.cda612ba.chunk.js.map │ │ ├── main.b7ea7086.js │ │ ├── main.b7ea7086.js.LICENSE.txt │ │ └── main.b7ea7086.js.map │ └── media │ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg ...2 phục vụ
cd frontend
npm run build
1 đơn giản được cung cấp bởi ứng dụng giao diện người dùngcd frontend
npm run build
8Đặt ánh xạ tệp tĩnh
Điều chỉnh ánh xạ tệp tĩnh để phục vụ tệp React [sử dụng tên người dùng của bạn thay vì "tên người dùng"]
Nếu bạn muốn quản trị viên của mình có một CSS phù hợp, hãy thêm cái này nữa
/static/admin/home/username/mysite/static/adminBình giữ nhiệt
Giả sử bạn đã tạo ứng dụng web Flask trong
cd frontend
npm run build
2 bằng trình hướng dẫn của chúng tôi trên trang ứng dụng Web~/mysite/frontend $ tree -I node_modules
...
├── build
│ ├── asset-manifest.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ ├── robots.txt
│ └── static
│ ├── css
│ │ ├── main.073c9b0a.css
│ │ └── main.073c9b0a.css.map
│ ├── js
│ │ ├── 787.cda612ba.chunk.js
│ │ ├── 787.cda612ba.chunk.js.map
│ │ ├── main.b7ea7086.js
│ │ ├── main.b7ea7086.js.LICENSE.txt
│ │ └── main.b7ea7086.js.map
│ └── media
│ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
...
5
Mở
~/mysite/frontend $ tree -I node_modules ... ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── static │ ├── css │ │ ├── main.073c9b0a.css │ │ └── main.073c9b0a.css.map │ ├── js │ │ ├── 787.cda612ba.chunk.js │ │ ├── 787.cda612ba.chunk.js.map │ │ ├── main.b7ea7086.js │ │ ├── main.b7ea7086.js.LICENSE.txt │ │ └── main.b7ea7086.js.map │ └── media │ └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg ...6 và chỉnh sửa nó để chứa
cd frontend
npm run build
1Ánh xạ tệp tĩnh
Điều chỉnh ánh xạ tệp tĩnh để phục vụ tệp React [sử dụng tên người dùng của bạn thay vì "tên người dùng"]
URLDirectory/static//home/username/mysite/frontend/build/staticChưa lên
Tải lại ứng dụng web và bạn sẽ thấy trang React mặc định khi truy cập. Nó có thể hiển thị thông báo "Chỉnh sửa src/Ứng dụng. js và lưu để tải lại" -- lưu ý rằng điều đó sẽ không hoạt động tự động trên PythonAnywhere, vì không thể chạy máy chủ phát triển trên PythonAnywhere, thay vào đó, bạn cần xây dựng lại các tệp React