8

में प्रतिक्रिया-रेडक्स ऐप को तैनात करना मैं इस one जैसे स्टैक ओवरफ़्लो में बहुत सारे प्रश्नों से गुजर चुका हूं। प्रत्येक व्यक्ति को प्रतिक्रिया ऐप को तैनात करने के अलग-अलग परिप्रेक्ष्य होते हैं।एडब्ल्यूएस एस 3

लेकिन इस सवाल का जो लोग redux, का उपयोग के लिए है प्रतिक्रिया रूटर और प्रतिक्रिया रूटर-redux। सिंगल पेज एप्लिकेशन होस्ट करने के उचित तरीकों को समझने में मुझे काफी समय लगा। मैं यहां सभी चरणों को जोड़ रहा हूं।

मैंने नीचे दिया गया उत्तर लिखा है जिसमें S3 पर प्रतिक्रिया-रेडक्स ऐप को तैनात करने के चरण शामिल हैं।

उत्तर

16

एस 3 पर प्रतिक्रिया ऐप को तैनात करने के लिए video ट्यूटोरियल है। एस 3 पर ऐप को तैनात करने के लिए यह आसान होगा लेकिन हमें हमारे प्रतिक्रिया ऐप में कुछ बदलाव करने की ज़रूरत है। चूंकि इसका पालन करना मुश्किल है, इसलिए मैं चरणों के रूप में संक्षेप में हूं। यहाँ यह जाता है:

  1. अमेज़न एडब्ल्यूएस ->S3 ->बाल्टी पैदा करते हैं।
  2. बाल्टी नीति जोड़ें, ताकि हर कोई प्रतिक्रिया ऐप एक्सेस कर सके। बनाया गया बाल्टी ->गुण ->अनुमतियां। उस पर क्लिक करें बाल्टी नीति संपादित करें। बाल्टी नीति के लिए यहां एक उदाहरण दिया गया है।

    { 
        "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>/*" 
         } 
        ] 
    } 
    
  3. आप लॉग, एक और बाल्टी बना सकते हैं और गुण में लॉग धारा के तहत बाल्टी नाम सेट करें।

  4. आप की जरूरत है एक index.html और error.html और सभी सार्वजनिक संपत्ति (browserified reactJS एप्लिकेशन और अन्य सीएसएस, जे एस, img फ़ाइलें) (जो अपने अनुप्रयोग के शुरुआती बिंदु है) एक फोल्डर।

  5. सुनिश्चित करें कि आप रिश्तेदारindex.html में सभी इन सार्वजनिक फ़ाइलों के संदर्भ में किया है। >स्थिर वेबसाइट होस्टिंग -

  6. अब, गुण पर जाएँ। वेबसाइट होस्टिंग विकल्प सक्षम करें। index.html और त्रुटि.html क्रमशः फ़ील्ड में जोड़ें। बचत पर, आपको एंडपॉइंट प्राप्त होगा।

  7. अंत में, आपके प्रतिक्रिया-redux ऐप तैनात किया गया है। आपके सभी प्रतिक्रिया मार्ग ठीक से काम करेंगे। लेकिन जब आप पुनः लोड एस 3 उस विशिष्ट मार्ग पर रीडायरेक्ट करेगा। चूंकि ऐसे कोई मार्ग पहले ही परिभाषित नहीं हैं, यह त्रुटि प्रदान करता है।एचटीएमएल

  8. हम स्थिर वेब होस्टिंग के तहत कुछ पुनर्निर्देशन नियम जोड़ने की जरूरत है। इसलिए, जब 404 होता है, तो S3 को index.html पर रीडायरेक्ट करने की आवश्यकता होती है, लेकिन यह केवल # जैसे कुछ उपसर्ग जोड़कर किया जा सकता है!। अब, जब आप त्रुटि.html पर जाने के बजाय किसी भी प्रतिक्रिया मार्ग के साथ पृष्ठ को फिर से लोड करते हैं, तो वही यूआरएल लोड हो जाएगा लेकिन उपसर्ग # के साथ!संपादित पुनर्निर्देशन नियम क्लिक करें और निम्न कोड जोड़ें:

    <RoutingRules> 
        <RoutingRule> 
         <Condition> 
          <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals> 
         </Condition> 
         <Redirect> 
          <HostName> [YOUR_ENDPOINT] </HostName>  
          <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith> 
         </Redirect> 
        </RoutingRule> 
    </RoutingRules> 
    
  9. में प्रतिक्रिया, हम उस उपसर्ग को हटाने और मूल मार्ग के मार्ग पुश करने के लिए की जरूरत है। प्रतिक्रिया ऐप में आपको जो बदलाव करना है, वह यहां है। मेरे पास main.js फ़ाइल है, जो प्रतिक्रिया ऐप का प्रारंभिक बिंदु है। इस तरह browserHistory करने के लिए एक श्रोता जोड़ें:

    browserHistory.listen(location => { 
        const path = (/#!(\/.*)$/.exec(location.hash) || [])[1]; 
        if (path) { 
         history.replace(path); 
        } 
    }); 
    
  10. ऊपर कोड उपसर्ग को हटा दें और सही मार्ग (एचटीएमएल 5 ब्राउज़र इतिहास) के लिए इतिहास हो जाएंगे। उदाहरण के लिए: इस तरह की कुछ http://s3.hosting/#!/eventhttp://s3.hosting/event में बदल जाएगी। ऐसा करने से प्रतिक्रिया-राउटर तदनुसार मार्ग को समझने और बदलने के लिए बनाता है। यहाँ बेहतर समझ के लिए मेरी main.js फ़ाइल है:

    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); 
        } 
    }); 
    

तो अपलोड करने browserified या webpacked एप्लिकेशन (app.js फ़ाइल) प्रतिक्रिया की आवश्यकता की जरूरत करेंगे। चूंकि मुझे सभी चीजों को इकट्ठा करना मुश्किल लगता है, इसलिए मैंने इन सभी को चरणों के रूप में एकत्रित किया है।

+1

आप मदद मटर सका सकते हैं प्रतिक्रिया के लिए 4/रूटर 4.1 पुस्तकालयों का संस्करण? – syscreat

-1

आप संपादन

<ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith> 

के रूप में 8 वें विन्यास से 9 वें चरण को अनदेखा और प्रतिक्रिया रूटर में browserHistory का उपयोग browserHistory.listen भाग के साथ

+1

यह मेरे लिए काम नहीं करता है, अनंत रीडायरेक्ट का कारण बनता है (उदाहरण के लिए hostname.com///////////////path/to/thing –

संबंधित मुद्दे