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




amazon-web-services redirect (10)

दूसरों द्वारा उल्लिखित एस 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 सेटअप के संबंध में अधिक जानकारी में मदद कर सकता हूं, बस एक नोट छोड़ दें। इसे कठिन तरीका सीखा है।

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

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

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


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


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

{ 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 बाल्टी है, प्रत्येक फ़ोल्डर एक प्रतिक्रिया / 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 और काम करने वाले सीधा यूआरएल से कार्यरत कोणीय 2+ एप्लिकेशन को बनाने का सबसे आसान समाधान एस 3 बाल्टी कॉन्फ़िगरेशन में इंडेक्स और त्रुटि दस्तावेज़ दोनों के रूप में index.html निर्दिष्ट करना है।


चूंकि समस्या अभी भी वहां है, हालांकि मैं एक और समाधान में फेंक देता हूं। मेरा मामला यह था कि मैं [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 रीडायरेक्शन नियमों को हटा दें

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


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

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

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

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


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

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

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

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

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

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

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