Distribuzione dell’app react-redux in AWS S3

Ho passato molte domande simili nello stack overflow come questo. Ognuno ha una prospettiva diversa di distribuzione dell’app di reazione.

Ma questa domanda è per chi usa redux , react-router e react-router-redux . Mi ci è voluto molto tempo per capire i modi giusti per ospitare l’applicazione di una singola pagina. Sto aggregando tutti i passaggi qui.

Ho scritto la risposta seguente che contiene i passaggi per distribuire l’app react-redux su S3.

Esiste un’esercitazione video per la distribuzione dell’app di reazione a s3. Sarà facile implementare l’app in s3 su s3, ma è necessario apportare alcune modifiche alla nostra app di reazione. Dal momento che è difficile da seguire, sto riassumendo come passi. Eccolo:

  1. Amazon AWS -> s3 -> crea bucket .
  2. Aggiungi la politica del bucket, in modo che tutti possano accedere all’app di reazione. fare clic su bucket creato -> proprietà -> autorizzazioni . In quel clic Modifica criterio bucket . Ecco un esempio per la politica del bucket.

    { "Version": "2012-10-17", "Statement": [ { "Sid": "Allow Public Access to All Objects", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::/*" } ] } 
  3. Se vuoi i log, crea un altro bucket e imposta il nome del bucket nella sezione logs nelle proprietà .

  4. Devi avere un index.html (che è il punto di partenza della tua app) e error.html e tutte le risorse pubbliche (app reactJS browserified e altri file CSS, JS, img) in una cartella.

  5. Assicurati di avere un riferimento relativo a tutti questi file pubblici in index.html .

  6. Ora, vai alle proprietà -> hosting del sito web statico . Abilita l’opzione di hosting del sito web . Aggiungi rispettivamente index.html e error.html ai campi. Al momento del salvataggio, riceverai l’ Endpoint .

  7. Infine, viene distribuita l’app react-redux . Tutti i tuoi percorsi di reazione funzioneranno correttamente. Ma quando ricarichi lo S3, il reindirizzamento a quel percorso specifico. Poiché tali percorsi non sono già definiti, restituisce error.html

  8. Abbiamo bisogno di aggiungere alcune regole di reindirizzamento sotto hosting Web statico . Quindi, quando si verifica 404, S3 deve redirect a index.html , ma questo può essere fatto solo aggiungendo un prefisso come #! . Ora, quando ricarichi la pagina con un percorso di risposta, invece di andare a error.html , verrà caricato lo stesso url ma con un prefisso #! . Fai clic su Modifica le regole di reindirizzamento e aggiungi il seguente codice:

        404    [YOUR_ENDPOINT]  #!/    
  9. In risposta, dobbiamo rimuovere quel prefisso e spingere la rotta verso la rotta originale. Ecco la modifica che devi fare in risposta all’app. Ho il mio file main.js , che è il punto di partenza per reactjs all’app. Aggiungi un listener a browserHistory in questo modo:

     browserHistory.listen(location => { const path = (/#!(\/.*)$/.exec(location.hash) || [])[1]; if (path) { history.replace(path); } }); 
  10. Il codice sopra rimuoverà il prefisso e invierà la cronologia alla rotta corretta (cronologia del browser HTML 5). Ad esempio: qualcosa come questo http://s3.hosting/#!/event cambierà in http://s3.hosting/event . Ciò fa sì che react-router comprenda e cambi di conseguenza il percorso. Ecco il mio file main.js per una migliore comprensione:

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

Quindi caricare l’app retriggers browserified o webpacked (file app.js) farà il necessario. Dal momento che ho trovato difficile raccogliere tutte le cose, ho aggregato tutte queste cose come passi.

Puoi ignorare il 9 ° passaggio modificando l’8-esima configurazione come

  / 

e usa browserHistory nel react-router