S3 Static Website Hosting Route Alle Pfade zu Index.html

Dem Weg war ich in der Lage, diese zu arbeiten ist wie folgt:

In der Bearbeiten Umleitung Regeln Abschnitt der S3-Verwaltungskonsole für Ihre Domäne, fügen Sie den folgenden Regeln:

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

Dieser leitet alle Pfade, die im Ergebnis eine 404-nicht gefunden Sie Ihr root-domain mit einem hash-bang-version der Pfad. So http://yourdomainname.com/posts leiten zu http://yourdomainname.com/#!/Beiträge vorausgesetzt, es ist keine Datei unter /Beiträge.

Verwenden HTML5 pushStates jedoch, die wir brauchen, um diese Anforderung und manuell einrichten die richtige pushState basiert auf der hash-bang-Pfad. So fügen Sie diese an die Spitze der index.html Datei:

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

Dieser schnappt sich den hash und verwandelt es in einen HTML5 pushState. Von diesem Zeitpunkt an können Sie pushStates nicht-hash-bang-Pfade in Ihrem app.

InformationsquelleAutor der Antwort Mark Nutter

Gibt es einige Probleme mit dem S3/Redirect-basierten Ansatz von anderen erwähnt.

1. mehrere Weiterleitungen passieren, als dass die app-Pfade gelöst werden. Zum Beispiel: http://www.myapp.com/path/for/test wird umgeleitet, wie http://www.myapp.com/#/path/for/test
2. Es ist ein flimmern in der url-Leiste, da die '#' kommt und geht durch die Wirkung des WELLNESS-Rahmen.
3. Die seo ist betroffen, weil - " Hey! Google zwingt seine hand auf Umleitungen'
4. Safari support für Ihre app gilt für einen Wurf.

Die Lösung ist:

1. Stellen Sie sicher, dass die index-route konfiguriert für Ihre website. Meist ist es index.html
2. Entfernen von routing-Regeln aus dem S3-Konfigurationen
3. Legen Sie eine Cloudfront-vor Ihren S3-bucket.
4. Konfigurieren Fehlerseite Regeln für Ihre Cloudfront-Instanz. In der Fehlermeldung Regeln geben:
   • Http Fehlercode: 404 (403 oder anderen Fehler nach Bedarf)
   • Fehler Caching-Minimum-TTL (Sekunden) : 0
   • Anpassen Antwort: ja
   • Antwort-Seite-Pfad : /index.html
   • HTTP Response Code: 200

5.Für SEO muss + dafür, dass Ihre index.html nicht im cache, tun Sie den folgenden:

• Konfigurieren einer EC2-Instanz und setup eines nginx-server.
• Eine öffentliche ip zugewiesen die EC2-Instanz.
• Erstellen, ein ELB, hat die EC2-Instanz, die Sie erstellt, wie eine Instanz
• Sie in der Lage sein sollten, weisen Sie den ELB an Ihren DNS.
• Konfigurieren Sie jetzt Ihren nginx-server, um die folgenden Dinge: Proxy_pass alle Anforderungen an Ihre CDN (für index.html nur, anderen zu dienen Vermögen direkt von Ihrem cloudfront) und für such-bots, umleiten von Datenverkehr, wie vereinbart, durch Dienste wie Prerender.io

Ich helfen kann, die in mehr Einzelheiten mit Bezug auf nginx setup, nur eine Anmerkung hinterlassen. Gelernt haben die harte Tour.

Einmal der cloud-front-distribution aktualisieren. Erlöschen Ihrer cloudfront cache einmal in der unberührten Modus.
Schlagen Sie die url in den browser und alles sollte gut sein.

InformationsquelleAutor der Antwort moha297

Ich lief in das gleiche problem heute, aber die Lösung von @Mark-Nutter war unvollständig zu entfernen, die hashbang von meinem angularjs-Anwendung.

In der Tat, Sie haben zu gehen, um Berechtigungen Bearbeitenklicken Sie auf mehr Hinzufügen, Berechtigungen und dann fügen Sie die richtigen Liste auf dem Eimer für alle. Mit dieser Konfiguration AWS S3 wird nun in der Lage sein, um zurückzukehren, 404-Fehler und dann die Umleitungsregel wird richtig fangen, der Fall.

Genau wie dieser :

Und dann können Sie gehen, um Bearbeiten Umleitung Regeln und fügen Sie diese Regel :

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

Hier können Sie ersetzen die HostName subdomain.domain.fr mit Ihrer Domäne und dem KeyPrefix #!/wenn Sie nicht die hashbang-Methode für SEO-Zwecke.

Natürlich, all dies wird nur funktionieren, wenn Sie bereits setup-html5mode in Ihrem angular Anwendung.

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

InformationsquelleAutor der Antwort davidbonachera

Sehe ich 4 Lösungen für dieses problem. Die ersten 3 waren bereits in Antworten und der Letzte ist mein Beitrag.

1. Legen Sie die error-Dokument index.html.
   
   Problem: der response-body wird richtig sein, aber den status code 404, das tut weh SEO.

2. Legen Sie die Umleitung Regeln.
   
   Problem: URL verschmutzt mit #! Seite und blinkt, wenn geladen.

3. Konfigurieren CloudFront.
   
   Problem: alle Seiten return 404 von Herkunft, so müssen Sie wählen, wenn Sie nicht cache nichts (TTL 0 wie vorgeschlagen) oder ob Sie zwischengespeichert werden, und haben Probleme bei der Aktualisierung der Website.

4. Prerender allen Seiten.
   
   Problem: zusätzliche Arbeit zu prerender-Seiten, speziell wenn die Seiten sich Häufig ändern. Zum Beispiel eine news-website.

Mein Vorschlag ist, verwenden Sie die option 4. Wenn Sie prerender allen Seiten, es wird keine 404-Fehler für die erwarteten Seiten. Die Seite lädt gut und der Rahmen werden die Kontrolle und normal Verhalten, wie ein SPA. Sie können auch festlegen, dass die Fehler-Dokument anzeigen, um eine generische error.html Seite und eine Weiterleitungs-Regel zur Umleitung von 404-Fehlern auf eine 404.html Seite (ohne hashbang).

Bezüglich 403 Forbidden Fehler, ich lass Sie nicht überhaupt passieren. In meiner Anwendung, ich denke, dass alle - Dateien in die host-Eimer, öffentlich sind und ich diese mit der jeder option mit der Lesen Berechtigung. Wenn Ihre Website Seiten, die privat sind, sodass der Benutzer zu sehen, die HTML - layout sollte nicht das Thema sein. Was Sie brauchen, um zu schützen, ist die Daten und dies geschieht im backend.

Auch, wenn Sie haben, private Vermögenswerte, wie user-Fotos können Sie speichern Sie Sie in anderen Eimer. Weil die privaten Vermögenswerte müssen der gleichen Sorgfalt wie Daten und kann nicht verglichen werden, um die asset-Dateien, die verwendet werden, um host-app.

InformationsquelleAutor der Antwort Zanon

War auf der Suche für die gleiche Art von problem.
Ich landete mit einer Mischung aus den vorgeschlagenen Lösungen oben beschrieben.

Zuerst habe ich eine s3-bucket mit mehrere Ordner, jeder Ordner stellt einen reagieren/redux website.
Ich benutze auch cloudfront für die cache-Invalidierung.

So hatte ich die Verwendung von Routing-Regeln für die Unterstützung 404 und redirect Sie zu einem hash-config:

<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>

In mein js-code, brauchte ich Griff ihn mit einer baseName config für reagieren-router.
Zunächst stellen Sie sicher, dass Ihre Abhängigkeiten sind interoperabel, die ich installiert hatte history==4.0.0 wich war unvereinbar mit react-router==3.0.1.

Meine Abhängigkeiten sind:

• "Geschichte": "3.2.0",
• "reagieren": "15.4.1",
• "reagieren-redux": "4.4.6",
• "reagieren-router": "3.0.1",
• "reagieren-router-redux": "4.0.7",

Habe ich einen history.js - Datei zum laden-Geschichte:

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;

Dieses Stück code können Sie behandeln das 404 gesendet durch den Server mit einem hash, und ersetzen Sie Sie in der Geschichte für das laden von Routen.

Sie können nun diese Datei für die Konfiguration Ihres Shop und Ihrer Root-Datei.

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;

Hoffe, es hilft.
Sie werden bemerken, mit dieser Konfiguration, die ich redux-Injektor und ein homebrew-sagas Injektor für das laden von javascript-asynchrounously via-routing.
Nicht dagegen, mit diesen Linien.

InformationsquelleAutor der Antwort Guillaume Cisco

Dies ist die eleganteste Lösungdie ich finden - mit der app-router-Modul mit einer wildcard umleiten.

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

Dann, wie erwähnt, in unzähligen posts oben, stellen Sie sicher, dass die Umleitung 404/403 Fehler index.html mit 200-status. Das problem ist, dass diese Ergebnisse in einem browser-refresh-laden der base-href-als (href + bisherige route). Wenn Sie wurden anzeigen von der router-Ansicht zur

www.my-app.com/home dann der refresh wird sich zeigen

www.my-app.com/home/home

Streifen die doppelte Strecke, um den Pfad APP_BASE_HREF Modul weisen Sie die browser-base-href - genau wie dieser

Wenn Sie brauchen, um zu bewahren, die erste url-parameter, fügen Sie mehrere Ergebnisse '/' split.

Browser trifft Ihren SPA-redirect für www.your-app.com/home/home wird nun ersetzen Sie die URL mit www.your-app.com/home und die app verhält sich wie erwartet von Ihrem in-app-routing-config

InformationsquelleAutor der Antwort Chris Concannon