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



Answers

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

अपने डोमेन के लिए 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 पुशस्टेट में बदल देता है। इस बिंदु से आप अपने ऐप में गैर-हैश-बैंग पथ रखने के लिए पुशस्टेट्स का उपयोग कर सकते हैं।

Question

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

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




मैं इस समस्या के 4 समाधान देखता हूं। पहले 3 पहले ही जवाब में शामिल थे और आखिरी मेरा योगदान है।

  1. Index.html को त्रुटि दस्तावेज़ सेट करें।
    समस्या : प्रतिक्रिया निकाय सही होगा, लेकिन स्थिति कोड 404 होगा, जो एसईओ को नुकसान पहुंचाता है।

  2. पुनर्निर्देशन नियम सेट करें।
    समस्या : यूआरएल #! साथ प्रदूषित #! और लोड होने पर पेज चमकता है।

  3. क्लाउडफ्रंट कॉन्फ़िगर करें।
    समस्या : सभी पृष्ठ मूल से 404 वापस आ जाएंगे, इसलिए आपको यह चुनने की ज़रूरत है कि क्या आप कुछ भी कैश नहीं करेंगे (सुझाए गए टीटीएल 0) या यदि साइट को अपडेट करते समय आप कैश करेंगे और समस्याएं होंगी।

  4. सभी पृष्ठों को प्रस्तुत करें।
    समस्या : पृष्ठों को प्रीरेंडर करने के लिए अतिरिक्त कार्य, विशेष रूप से जब पृष्ठ अक्सर बदलते हैं। उदाहरण के लिए, एक समाचार वेबसाइट।

मेरा सुझाव विकल्प 4 का उपयोग करना है। यदि आप सभी पृष्ठों को प्रीरेंडर करते हैं, तो अपेक्षित पृष्ठों के लिए 404 त्रुटियां नहीं होंगी। पृष्ठ ठीक लोड होगा और ढांचा सामान्य रूप से एक एसपीए के रूप में नियंत्रण करेगा और कार्य करेगा। आप 404.html पृष्ठ (हैशबैंग के बिना) 404 त्रुटियों को पुनर्निर्देशित करने के लिए एक सामान्य त्रुटि.html पृष्ठ और एक पुनर्निर्देशन नियम प्रदर्शित करने के लिए त्रुटि दस्तावेज़ भी सेट कर सकते हैं।

403 निषिद्ध त्रुटियों के बारे में, मैं उन्हें बिल्कुल भी नहीं होने देता हूं। मेरे आवेदन में, मुझे लगता है कि मेजबान बाल्टी के भीतर सभी फाइलें सार्वजनिक हैं और मैंने इसे पढ़ने की अनुमति के साथ हर किसी विकल्प के साथ सेट किया है। यदि आपकी साइट में निजी पृष्ठ हैं, तो उपयोगकर्ता को 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;

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




दूसरों द्वारा उल्लिखित एस 3 / रीडायरेक्ट आधारित दृष्टिकोण के साथ कुछ समस्याएं हैं।

  1. mutliple रीडायरेक्ट होते हैं क्योंकि आपके ऐप के पथ हल हो जाते हैं। उदाहरण के लिए: www.myapp.com/path/for/test को www.myapp.com/#/path/for/test के रूप में रीडायरेक्ट किया जाता है
  2. यूआरएल बार में एक झिलमिलाहट है क्योंकि '#' आता है और आपके एसपीए ढांचे की कार्रवाई के कारण चला जाता है।
  3. एसईओ प्रभावित है क्योंकि - 'अरे! इसके गूगल ने रीडायरेक्ट पर अपना हाथ मजबूर किया '
  4. आपके ऐप के लिए सफारी समर्थन टॉस के लिए जाता है।

समाधान है:

  1. सुनिश्चित करें कि आपके पास अपनी वेबसाइट के लिए कॉन्फ़िगर किया गया इंडेक्स रूट है। ज्यादातर यह index.html है
  2. एस 3 विन्यास से रूटिंग नियम निकालें
  3. अपने एस 3 बाल्टी के सामने एक क्लाउडफ़्रंट रखें।
  4. अपने क्लाउडफ़्रंट उदाहरण के लिए त्रुटि पृष्ठ नियम कॉन्फ़िगर करें। त्रुटि नियमों में निर्दिष्ट करें:
    • एचटीपी त्रुटि कोड: 404 (और 403 या आवश्यकता के अनुसार अन्य त्रुटियां)
    • त्रुटि कैशिंग न्यूनतम टीटीएल (सेकंड): 0
    • प्रतिक्रिया अनुकूलित करें: हां
    • प्रतिक्रिया पृष्ठ पथ: /index.html
    • HTTP प्रतिक्रिया कोड: 200

5. एसईओ की आवश्यकता है + सुनिश्चित करें कि आपका index.html कैश नहीं करता है, निम्न कार्य करें:

  • एक ईसी 2 उदाहरण कॉन्फ़िगर करें और एक nginx सर्वर सेटअप करें।
  • अपने ईसी 2 उदाहरण में एक सार्वजनिक आईपी असाइन करें।
  • एक ईएलबी बनाएं जिसमें आपके द्वारा बनाई गई ईसी 2 इंस्टेंस है
  • आपको ईएलबी को अपने DNS में असाइन करने में सक्षम होना चाहिए।
  • अब, निम्न कार्य करने के लिए अपने nginx सर्वर को कॉन्फ़िगर करें: अपने सीडीएन के सभी अनुरोधों को प्रॉक्सी_पास करें (केवल index.html के लिए, सीधे अपने क्लाउडफ़्रंट से अन्य संपत्तियां प्रदान करें) और खोज बॉट के लिए, Prerender.io जैसी सेवाओं द्वारा निर्धारित ट्रैफ़िक को रीडायरेक्ट करें

मैं nginx सेटअप के संबंध में अधिक जानकारी में मदद कर सकता हूं, बस एक नोट छोड़ दें। इसे कठिन तरीका सीखा है।

एक बार क्लाउड फ्रंट वितरण अद्यतन। एक बार प्राचीन मोड में होने के लिए अपने क्लाउडफ़्रंट कैश को अमान्य करें। ब्राउज़र में यूआरएल मारा और सभी अच्छे होना चाहिए।




यह सबसे सुंदर समाधान है जो मैंने पाया - एक वाइल्डकार्ड रीडायरेक्ट के साथ ऐप राउटर मॉड्यूल का उपयोग करें।

{ path: '**', redirectTo: '' }

फिर, जैसा ऊपर उल्लिखित अनगिनत पदों में बताया गया है, सुनिश्चित करें कि आप 200 स्थिति के साथ index.html में 404/403 त्रुटियों को पुनर्निर्देशित कर रहे हैं। समस्या यह है कि इसका परिणाम ब्राउज़र में बेस href को लोड करने के लिए रीफ्रेश होता है (href + पिछला मार्ग)। यदि आप राउटर व्यू को देख रहे थे

www.my-app.com/home तो रीफ्रेश दिखाएगा

www.my-app.com/home/home

डुप्लिकेट रूट पथ को पट्टी करने के लिए, ब्राउज़र बेस href को पुन: असाइन करने के लिए APP_BASE_HREF मॉड्यूल का उपयोग करें

यदि आपको पहले यूआरएल पैरामीटर को संरक्षित करने की आवश्यकता है, तो '/' विभाजन से कई परिणाम संलग्न करें।

ब्राउज़र www.your-app.com/home/home लिए आपके एसपीए रीडायरेक्ट पर हिट करता है अब यूआरएल को www.your-app.com/home साथ बदल देगा और ऐप आपके इन-ऐप रूटिंग कॉन्फ़िगरेशन से अपेक्षित व्यवहार करेगा




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

वास्तव में आपको संपादन अनुमतियों पर जाना होगा, और अनुमतियां जोड़ें पर क्लिक करें और फिर अपनी बाल्टी पर सही सूची जोड़ें। इस कॉन्फ़िगरेशन के साथ, एडब्ल्यूएस एस 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('!');



Links