amazon web services - एस 3 स्टेटिक वेबसाइट होस्टिंग रूट इंडेक्स.html के सभी पथ




amazon-web-services redirect (8)

मैं एक जावास्क्रिप्ट ऐप होस्ट करने के लिए S3 का उपयोग कर रहा हूं जो HTML5 pushStates का उपयोग करेगा। समस्या यह है कि यदि उपयोगकर्ता किसी भी यूआरएल को बुकमार्क करता है, तो यह किसी भी चीज़ का समाधान नहीं करेगा। मुझे केवल एक पूर्ण रीडायरेक्ट करने की बजाय, सभी यूआरएल अनुरोधों को लेने और मेरी एस 3 बाल्टी में रूट index.html की सेवा करने की क्षमता है। फिर मेरा जावास्क्रिप्ट एप्लिकेशन यूआरएल को पार्स कर सकता है और उचित पेज परोस सकता है।

क्या रीडायरेक्ट करने के बजाय सभी यूआरएल अनुरोधों के लिए index.html की सेवा करने के लिए S3 को बताने का कोई तरीका है? यह एक उदाहरण index.html की सेवा करके सभी आने वाले अनुरोधों को संभालने के लिए अपाचे सेट अप करने के समान होगा: https://stackoverflow.com/a/10647521/1762614 । मैं वास्तव में इन मार्गों को संभालने के लिए एक वेब सर्वर चलाने से बचना चाहूंगा। एस 3 से सबकुछ करना बहुत आकर्षक है।


अमेज़ॅन एस 3 और काम करने वाले सीधा यूआरएल से कार्यरत कोणीय 2+ एप्लिकेशन को बनाने का सबसे आसान समाधान एस 3 बाल्टी कॉन्फ़िगरेशन में इंडेक्स और त्रुटि दस्तावेज़ दोनों के रूप में index.html निर्दिष्ट करना है।


एक ही तरह की समस्या की तलाश में था। मैं ऊपर वर्णित सुझाए गए समाधानों के मिश्रण का उपयोग कर समाप्त हुआ।

सबसे पहले, मेरे पास एकाधिक फ़ोल्डर्स के साथ एक एस 3 बाल्टी है, प्रत्येक फ़ोल्डर एक प्रतिक्रिया / redux वेबसाइट का प्रतिनिधित्व करता है। मैं कैश अमान्यता के लिए क्लाउडफ़्रंट का भी उपयोग करता हूं।

इसलिए मुझे 404 का समर्थन करने के लिए रूटिंग नियमों का उपयोग करना पड़ा और उन्हें हैश कॉन्फ़िगरेशन पर रीडायरेक्ट करना पड़ा:

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>website1/</KeyPrefixEquals>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <Protocol>https</Protocol>
            <HostName>my.host.com</HostName>
            <ReplaceKeyPrefixWith>website1#</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>website2/</KeyPrefixEquals>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <Protocol>https</Protocol>
            <HostName>my.host.com</HostName>
            <ReplaceKeyPrefixWith>website2#</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>website3/</KeyPrefixEquals>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <Protocol>https</Protocol>
            <HostName>my.host.com</HostName>
            <ReplaceKeyPrefixWith>website3#</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

मेरे जेएस कोड में, मुझे प्रतिक्रिया-राउटर के लिए baseName कॉन्फ़िगरेशन के साथ इसे संभालने की आवश्यकता थी। सबसे पहले, सुनिश्चित करें कि आपकी निर्भरताएं अंतःक्रियाशील हैं, मैंने history==4.0.0 स्थापित किया history==4.0.0 जो react-router==3.0.1 साथ असंगत था।

मेरी निर्भरताएं हैं:

  • "इतिहास": "3.2.0",
  • "प्रतिक्रिया": "15.4.1",
  • "प्रतिक्रिया-redux": "4.4.6",
  • "प्रतिक्रिया-राउटर": "3.0.1",
  • "प्रतिक्रिया-राउटर-रेडक्स": "4.0.7",

मैंने इतिहास लोड करने के लिए एक history.js फ़ाइल बनाई है:

import {useRouterHistory} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

export const browserHistory = useRouterHistory(createBrowserHistory)({
    basename: '/website1/',
});

browserHistory.listen((location) => {
    const path = (/#(.*)$/.exec(location.hash) || [])[1];
    if (path) {
        browserHistory.replace(path);
    }
});

export default browserHistory;

कोड का यह टुकड़ा एक हैश के साथ सेवर द्वारा भेजे गए 404 को संभालने की अनुमति देता है, और हमारे मार्गों को लोड करने के लिए इतिहास में उन्हें प्रतिस्थापित करता है।

अब आप अपनी फ़ाइल को अपनी रूट फ़ाइल को उत्तर देने के लिए इस फ़ाइल का उपयोग कर सकते हैं।

import {routerMiddleware} from 'react-router-redux';
import {applyMiddleware, compose} from 'redux';

import rootSaga from '../sagas';
import rootReducer from '../reducers';

import {createInjectSagasStore, sagaMiddleware} from './redux-sagas-injector';

import {browserHistory} from '../history';

export default function configureStore(initialState) {
    const enhancers = [
        applyMiddleware(
            sagaMiddleware,
            routerMiddleware(browserHistory),
        )];

    return createInjectSagasStore(rootReducer, rootSaga, initialState, compose(...enhancers));
}
import React, {PropTypes} from 'react';
import {Provider} from 'react-redux';
import {Router} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import variables from '!!sass-variable-loader!../../../css/variables/variables.prod.scss';
import routesFactory from '../routes';
import {browserHistory} from '../history';

const muiTheme = getMuiTheme({
    palette: {
        primary1Color: variables.baseColor,
    },
});

const Root = ({store}) => {
    const history = syncHistoryWithStore(browserHistory, store);
    const routes = routesFactory(store);

    return (
        <Provider {...{store}}>
            <MuiThemeProvider muiTheme={muiTheme}>
                <Router {...{history, routes}} />
            </MuiThemeProvider>
        </Provider>
    );
};

Root.propTypes = {
    store: PropTypes.shape({}).isRequired,
};

export default Root;

आशा करता हूँ की ये काम करेगा। आप इस कॉन्फ़िगरेशन के साथ नोटिस करेंगे, मैं रूटिंग के माध्यम से जावास्क्रिप्ट को अनन्य रूप से लोड करने के लिए रेडक्स इंजेक्टर और होमब्री सागा इंजेक्टर का उपयोग करता हूं। सिद्धांतों के साथ ध्यान मत करो।


चूंकि समस्या अभी भी वहां है, हालांकि मैं एक और समाधान में फेंक देता हूं। मेरा मामला यह था कि मैं [mydomain] / pull-request / [pr number] पर पहुंचने में विलय करने से पहले परीक्षण के लिए सभी पुल अनुरोधों को एस 3 पर तैनात करना चाहता था /
(उदा। www.example.com/pull-requests/822/)

मेरे सबसे अच्छे ज्ञान के लिए एस 3 नियम परिदृश्यों में से एक को एचटीएमएल 5 रूटिंग का उपयोग करके एक बाल्टी में कई परियोजनाएं करने की इजाजत नहीं दी जाएगी, जबकि अधिकतर वोट किए गए सुझाव रूट फ़ोल्डर में किसी प्रोजेक्ट के लिए काम करते हैं, यह अपने उपफोल्डर में कई परियोजनाओं के लिए नहीं है।

इसलिए मैंने अपने डोमेन को अपने सर्वर पर इंगित किया जहां nginx कॉन्फ़िगरेशन ने नौकरी की

location /pull-requests/ {
    try_files $uri @get_files;
}
location @get_files {
    rewrite ^\/pull-requests\/(.*) /$1 break;
    proxy_pass http://<your-amazon-bucket-url>;
    proxy_intercept_errors on;
    recursive_error_pages on;
    error_page 404 = @get_routes;
}

location @get_routes {
    rewrite ^\/(\w+)\/(.+) /$1/ break;
    proxy_pass http://<your-amazon-bucket-url>;
    proxy_intercept_errors on;
    recursive_error_pages on;
    error_page 404 = @not_found;
}

location @not_found {
    return 404;
}

यह फ़ाइल प्राप्त करने का प्रयास करता है और यदि नहीं मिला तो यह मानता है कि यह html5 मार्ग है और कोशिश करता है। यदि आपके पास मार्गों के लिए 404 कोणीय पृष्ठ नहीं है, तो आप कभी भी @not_found पर नहीं पहुंच पाएंगे और आपको फ़ाइलों को नहीं ढूंढने के बजाय 404 पृष्ठ लौटाएंगे, जिन्हें @get_routes या कुछ में नियमों के साथ तय किया जा सकता है।

मुझे कहना है कि मैं nginx कॉन्फ़िगरेशन के क्षेत्र में बहुत सहज महसूस नहीं कर रहा हूं और उस मामले के लिए रेगेक्स का उपयोग कर रहा हूं, मुझे यह कुछ परीक्षण और त्रुटि के साथ काम कर रहा है, जबकि यह काम करता है मुझे यकीन है कि सुधार के लिए जगह है और कृपया अपने विचार साझा करें ।

नोट : यदि आप उन्हें S3 कॉन्फ़िगरेशन में रखते हैं तो एस 3 रीडायरेक्शन नियमों को हटा दें

और सफारी में बीटीडब्ल्यू काम करता है


जिस तरह से मैं इसे काम करने में सक्षम था, इस प्रकार है:

अपने डोमेन के लिए S3 कंसोल के पुनर्निर्देशन नियम अनुभाग में, निम्न नियम जोड़ें:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>yourdomainname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

यह उन सभी पथों को पुनर्निर्देशित करेगा जिसके परिणामस्वरूप पथ के हैश-बैंग संस्करण के साथ आपके रूट डोमेन में 404 नहीं मिलेगा। तो http://yourdomainname.com/posts पर रीडायरेक्ट किए जाएंगे बशर्ते कोई पोस्ट / पोस्ट न हो।

हालांकि, एचटीएमएल 5 पुशस्टेट्स का उपयोग करने के लिए, हमें इस अनुरोध को लेने और हैश-बैंग पथ के आधार पर उचित पुशस्टेट को मैन्युअल रूप से स्थापित करने की आवश्यकता है। तो इसे अपनी index.html फ़ाइल के शीर्ष पर जोड़ें:

<script>
  history.pushState({}, "entry page", location.hash.substring(1));
</script>

यह हैश पकड़ लेता है और इसे एचटीएमएल 5 पुशस्टेट में बदल देता है। इस बिंदु से आप अपने ऐप में गैर-हैश-बैंग पथ रखने के लिए पुशस्टेट्स का उपयोग कर सकते हैं।


मार्क समाधान खराब नहीं है लेकिन इसके लिए एक आसान समाधान भी है। त्रुटि दस्तावेज़ में अपनी बाल्टी गुणों में केवल उसी फ़ाइल का उपयोग इंडेक्स दस्तावेज़ के रूप में करें। बैकबोन, एंगुलरजेएस इत्यादि जैसी जावास्क्रिप्ट ढांचे, इस तरह से बॉक्स से बाहर काम करेंगे और पेज रीफ्रेश पूरी तरह से समर्थित होगा।


मैं आज भी एक ही समस्या में भाग गया लेकिन @ मार्क-न्यूटर का समाधान मेरे कोणीय अनुप्रयोग से हैशबैंग को हटाने के लिए अपूर्ण था।

वास्तव में आपको संपादन अनुमतियों पर जाना होगा, और अनुमतियां जोड़ें पर क्लिक करें और फिर अपनी बाल्टी पर सही सूची जोड़ें। इस कॉन्फ़िगरेशन के साथ, एडब्ल्यूएस एस 3 अब 404 त्रुटि वापस करने में सक्षम होगा और फिर पुनर्निर्देशन नियम मामले को ठीक से पकड़ लेगा।

सिर्फ इस तरह :

और फिर आप पुनर्निर्देशन नियम संपादित करने के लिए जा सकते हैं और यह नियम जोड़ सकते हैं:

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>subdomain.domain.fr</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

यहां आप अपने डोमेन और KeyPrefix # के साथ HostName subdomain.domain.fr को प्रतिस्थापित कर सकते हैं! / यदि आप एसईओ उद्देश्य के लिए हैशबैंग विधि का उपयोग नहीं करते हैं।

बेशक, यह सब केवल तभी काम करेगा यदि आप पहले से ही अपने कोणीय अनुप्रयोग में html5mode सेटअप कर चुके हैं।

$locationProvider.html5Mode(true).hashPrefix('!');

मैं इसे खुद का जवाब ढूंढ रहा था। एस 3 केवल रीडायरेक्ट का समर्थन करता प्रतीत होता है, आप केवल यूआरएल को फिर से लिख नहीं सकते हैं और चुपचाप एक अलग संसाधन वापस कर सकते हैं। मैं अपने सभी आवश्यक पथ स्थानों में बस मेरी index.html की प्रतियां बनाने के लिए अपनी बिल्ड स्क्रिप्ट का उपयोग करने पर विचार कर रहा हूं। शायद यह आपके लिए भी काम करेगा।


यह Rackt's , लेकिन Rackt's रिएक्ट राउटर लाइब्रेरी (एचटीएमएल 5) ब्राउज़र इतिहास के साथ उन लोगों के लिए एक टिप है जो एस 3 पर होस्ट करना चाहते हैं।

मान लीजिए कि उपयोगकर्ता आपकी एस 3-होस्टेड स्थैतिक वेबसाइट पर विज़िट /foo/bear । David's पहले के सुझाव को देखते हुए, नियमों को पुनर्निर्देशित करने के लिए उन्हें /#/foo/bear भेज दिया जाएगा। यदि आपका एप्लिकेशन ब्राउज़र इतिहास का उपयोग करके बनाया गया है, तो यह बहुत अच्छा नहीं होगा। हालांकि इस समय आपका आवेदन लोड हो गया है और अब यह इतिहास में हेरफेर कर सकता है।

हमारी परियोजना में रैकेट history सहित (रिएक्ट राउटर प्रोजेक्ट से कस्टम इतिहास का उपयोग भी देखें), आप एक श्रोता जोड़ सकते हैं जो हैश इतिहास पथ से अवगत है और पथ को यथासंभव उचित रूप से प्रतिस्थापित करें, जैसा कि इस उदाहरण में दिखाया गया है:

import ReactDOM from 'react-dom';

/* Application-specific details. */
const route = {};

import { Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';

const history = useRouterHistory(createHistory)();

history.listen(function (location) {
  const path = (/#(\/.*)$/.exec(location.hash) || [])[1];
  if (path) history.replace(path);
});

ReactDOM.render(
  <Router history={history} routes={route}/>,
  document.body.appendChild(document.createElement('div'))
);

संक्षेप में दुहराना:

  1. डेविड का एस 3 रीडायरेक्ट नियम प्रत्यक्ष /foo/bear को /#/foo/bear
  2. आपका आवेदन लोड हो जाएगा।
  3. इतिहास श्रोता #/foo/bear इतिहास नोटेशन का पता लगाएगा।
  4. और सही पथ के साथ इतिहास को प्रतिस्थापित करें।

Link टैग अपेक्षित काम करेंगे, जैसा कि अन्य सभी ब्राउज़र इतिहास कार्य करेगा। मैंने देखा है कि एकमात्र नकारात्मक पक्ष प्रारंभिक अनुरोध पर होता है जो इंटरस्टिशियल रीडायरेक्ट है।

यह AngularJS के समाधान से प्रेरित था, और मुझे संदेह है कि किसी भी एप्लिकेशन को आसानी से अनुकूलित किया जा सकता है।





pushstate