- Amazon AWS ->s3 ->tạo xô.
Thêm chính sách nhóm để mọi người có thể truy cập ứng dụng phản ứng. nhấp vào tạo nhóm ->thuộc tính ->quyền. Trong đó, nhấp vào Chỉnh sửa chính sách nhóm. Dưới đây là ví dụ về chính sách nhóm.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Allow Public Access to All Objects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
}
]
}
Nếu bạn muốn bản ghi, tạo xô nhau và thiết lập tên xô dưới bản ghi phần trong tính.
Bạn cần có một index.html (đó là điểm khởi đầu của ứng dụng của bạn) và error.html và tất cả các tài sản công cộng (browserified ứng dụng reactJS và CSS, JS, các file img khác) một thư mục.
Đảm bảo bạn có tương tham chiếu đến tất cả công file này trong index.html.
Bây giờ, hãy điều hướng đến thuộc tính ->lưu trữ trang web tĩnh. Bật tùy chọn lưu trữ trang web. Thêm tương ứng index.html và error.html vào các trường. Khi lưu, bạn sẽ nhận được Điểm cuối.
Cuối cùng, ứng dụng phản ứng-redux được triển khai. Tất cả các tuyến đường phản ứng của bạn sẽ hoạt động bình thường. Nhưng khi bạn tải lại S3 sẽ chuyển hướng đến tuyến đường cụ thể đó. Vì không có tuyến đường nào đã được xác định, nó sẽ hiển thị lỗi .html
Chúng tôi cần thêm một số quy tắc chuyển hướng dưới lưu trữ web tĩnh. Vì vậy, khi 404 xảy ra, S3 cần chuyển hướng đến index.html, nhưng điều này có thể được thực hiện chỉ bằng cách thêm một số tiền tố như #!. Bây giờ, khi bạn tải lại trang với bất kỳ tuyến đường phản ứng nào, thay vì truy cập error.html, cùng một url sẽ được tải nhưng có tiền tố #!. Nhấn Sửa quy tắc chuyển hướng và thêm đoạn mã sau:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName> [YOUR_ENDPOINT] </HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
Trong phản ứng, chúng ta cần phải loại bỏ tiền tố đó và đẩy các tuyến đường đến tuyến đường ban đầu. Đây là thay đổi bạn cần thực hiện trong ứng dụng phản ứng. Tôi có tệp main.js, là điểm bắt đầu của ứng dụng phản ứng. Thêm một người biết lắng nghe để browserHistory như thế này:
browserHistory.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
history.replace(path);
}
});
Đoạn mã trên sẽ loại bỏ các tiền tố và đẩy lịch sử để con đường đúng (HTML 5 lịch sử trình duyệt). Ví dụ: một cái gì đó như thế này http://s3.hosting/#!/event sẽ thay đổi thành http://s3.hosting/event. Làm như vậy làm cho phản ứng-bộ định tuyến để hiểu và thay đổi tuyến đường cho phù hợp. Dưới đây là main.js tập tin của tôi để hiểu rõ hơn:
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, compose, applyMiddleware} from 'redux';
import {Provider} from 'react-redux'
import {Router, Route, IndexRoute, browserHistory, useRouterHistory} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
const logger = createLogger();
const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
const store = createStoreWithMiddleware(reducers);
const history = syncHistoryWithStore(browserHistory, store);
browserHistory.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
history.replace(path);
}
});
Vì vậy, tải lên browserified hoặc webpacked phản ứng ứng dụng (app.js tập tin) sẽ làm nhu cầu cần thiết. Vì tôi thấy khó thu thập tất cả mọi thứ, tôi đã tập hợp tất cả những thứ này thành các bước.
Ông có thể Pease giúp đỡ với browserHistory.listen phần cho Phản ứng 4/Router 4.1 phiên bản của thư viện? – syscreat