S3 Static Website Hosting Route All Paths to Index.html

Używam S3 do hostowania aplikacji javascript, która będzie używać pushStates HTML5. Problem polega na tym, że jeśli użytkownik doda zakładkę do dowolnego adresu URL, nie rozwiąże niczego. To, czego potrzebuję, to możliwość przyjmowania wszystkich żądań adresu URL i podawania root index.html w moim segmencie S3, zamiast tylko pełnego przekierowania. Wtedy moja aplikacja javascript mogłaby przeanalizować adres URL i wyświetlić odpowiednią stronę.

Czy jest jakiś sposób, aby powiedzieć S3, aby wyświetlał plik index.html dla wszystkich żądań URL zamiast przekierowywać? Byłoby to podobne do konfigurowania apache do obsługi wszystkich przychodzących żądań przez serwowanie pojedynczego pliku index.html, jak w tym przykładzie: https://stackoverflow.com/a/10647521/1762614 . Naprawdę chciałbym uniknąć uruchamiania serwera WWW tylko do obsługi tych tras. Robienie wszystkiego z S3 jest bardzo atrakcyjne.

Bardzo łatwo go rozwiązać bez włamań do adresów URL, z pomocą CloudFront.

• Utwórz segment S3, na przykład: zareaguj
• Twórz dystrybucje CloudFront za pomocą tych ustawień:
  • Domyślny obiekt główny : index.html
  • Nazwa domeny pochodzenia : domena segmentu S3, na przykład: reag.s3.amazonaws.com
• Przejdź na kartę Strony błędów , kliknij Utwórz niestandardową odpowiedź na błąd :
  • Kod błędu HTTP : 403: Zabroniony (404: Nie znaleziono, w przypadku witryny S3 Static)
  • Dostosuj odpowiedź na błąd : Tak
  • Ścieżka strony odpowiedzi : /index.html
  • Kod odpowiedzi HTTP : 200: OK
  • Kliknij Utwórz

Sposób, w jaki udało mi się to uruchomić, jest następujący:

W sekcji Edytuj reguły przekierowania konsoli S3 dla swojej domeny dodaj następujące reguły:

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

Spowoduje to przekierowanie wszystkich ścieżek, w wyniku których 404 nie zostanie znalezione w domenie głównej za pomocą wersji mieszania ścieżki. Więc http://twojadomena.com.com/posts przekieruje na http://twojadomena.com.com/#!/posts pod warunkiem, że nie ma pliku w / posts.

Aby jednak użyć pushStates HTML5, musimy przyjąć to żądanie i ręcznie ustalić poprawne pushState na podstawie ścieżki hash-bang. Dodaj to na górze pliku index.html:

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

Pobiera to skrót i przekształca go w pushState HTML5. Od tego momentu możesz używać pushStates, aby mieć w aplikacji ścieżki nie-hash-bang.

Jest kilka problemów z podejściem opartym na S3 / Redirect wspomnianym przez innych.

1. Przekierowania przekierowujące zdarzają się w miarę rozwiązywania ścieżek aplikacji. Na przykład: www.myapp.com/path/for/test zostaje przekierowany jako www.myapp.com/#/path/for/test
2. Na pasku adresu pojawia się migotanie, gdy „#” przychodzi i odchodzi z powodu działania twojego środowiska SPA.
3. Ma to wpływ na SEO, ponieważ: „Hej! Google go zmusza do przekierowania ”
4. Obsługa Twojej aplikacji przez Safari jest bardzo prosta.

Rozwiązaniem jest:

1. Upewnij się, że masz skonfigurowaną trasę indeksu dla swojej witryny. Przeważnie jest to index.html
2. Usuń reguły routingu z konfiguracji S3
3. Umieść Cloudfront przed wiadrem S3.

4. Skonfiguruj reguły stron błędów dla instancji Cloudfront. W regułach błędów określ:

   • Kod błędu HTTP: 404 (i 403 lub inne błędy według potrzeb)
   • Błąd buforowania Minimalna wartość TTL (sekundy): 0
   • Dostosuj odpowiedź: Tak
   • Ścieżka strony odpowiedzi: /index.html

   • Kod odpowiedzi HTTP: 200

     5. Dla potrzeb SEO + upewnienia się, że index.html nie buforuje, wykonaj następujące czynności:

   • Skonfiguruj instancję EC2 i skonfiguruj serwer nginx.

   • Przypisz publiczny adres IP do instancji EC2.
   • Utwórz ELB, który ma instancję EC2 utworzoną jako instancja
   • Powinieneś być w stanie przypisać ELB do swojego DNS.
   • Teraz skonfiguruj serwer nginx, aby wykonywał następujące czynności: Proxy_pass wszystkie żądania do CDN (tylko dla index.html, obsługuj inne zasoby bezpośrednio z chmury) i dla botów wyszukiwania przekierowuj ruch zgodnie z usługami takimi jak Prerender.io

Mogę pomóc w bardziej szczegółowych szczegółach dotyczących konfiguracji nginx, po prostu zostaw notatkę. Nauczyłem się tego na własnej skórze.

Po zaktualizowaniu dystrybucji frontowej w chmurze. Unieważnij raz pamięć podręczną działającą w chmurze, aby być w nieskazitelnym trybie. Naciśnij adres URL w przeglądarce i wszystko powinno być dobre.

Jest to styczne, ale oto wskazówka dla tych, którzy używają biblioteki React Router Rackta z historią przeglądarki (HTML5), którzy chcą hostować na S3.

Załóżmy, że użytkownik odwiedza /foo/bearstatyczną witrynę hostowaną przez S3. Biorąc pod uwagę wcześniejszą sugestię Davida , reguły przekierowania wyślą je na adres . Jeśli twoja aplikacja jest zbudowana przy użyciu historii przeglądarki, nie przyniesie to wiele dobrego. Jednak aplikacja jest ładowana w tym momencie i może teraz manipulować historią./#/foo/bear

Uwzględniając historię Rackta w naszym projekcie (zobacz także Korzystanie z historii niestandardowych z projektu React Router), możesz dodać detektora, który jest świadomy ścieżek historii skrótów i odpowiednio zastąpić ścieżkę, jak pokazano w tym przykładzie:

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

Przypomnę:

1. Reguła przekierowania S3 Davida skieruje się /foo/beardo /#/foo/bear.
2. Twoja aplikacja zostanie załadowana.
3. Detektor historii wykryje #/foo/bearzapis historii.
4. I zastąp historię historią właściwą ścieżką.

Linktagi będą działać zgodnie z oczekiwaniami, podobnie jak wszystkie inne funkcje historii przeglądarki. Jedynym minusem, jaki zauważyłem, jest przekierowanie śródmiąższowe, które występuje na pierwsze żądanie.

Inspiracją było rozwiązanie dla AngularJS i podejrzewam, że można je łatwo dostosować do dowolnego zastosowania.

Widzę 4 rozwiązania tego problemu. Pierwsze 3 zostały już uwzględnione w odpowiedziach, a ostatni jest moim wkładem.

1. Ustaw dokument błędu na index.html.
   Problem : treść odpowiedzi będzie poprawna, ale kod stanu to 404, co boli SEO.

2. Ustaw reguły przekierowania.
   Problem : adres URL jest zanieczyszczony, #!a strona ładuje się po załadowaniu.

3. Skonfiguruj CloudFront.
   Problem : wszystkie strony zwrócą 404 od początku, więc musisz wybrać, jeśli nie będziesz niczego buforować (sugerowane TTL 0) lub jeśli będziesz buforować i będziesz mieć problemy z aktualizacją strony.

4. Wstępnie wyrenderuj wszystkie strony.
   Problem : dodatkowa praca w celu wstępnego renderowania stron, szczególnie gdy strony często się zmieniają. Na przykład witryna z wiadomościami.

Moją propozycją jest skorzystanie z opcji 4. Jeśli wstępnie wyrenderujesz wszystkie strony, nie będzie 404 błędów dla oczekiwanych stron. Strona ładuje się dobrze, a środowisko przejmuje kontrolę i działa normalnie jako SPA. Możesz także ustawić dokument błędu, aby wyświetlał ogólną stronę error.html oraz regułę przekierowania, aby przekierowywać błędy 404 na stronę 404.html (bez hashbanga).

Jeśli chodzi o 403 zabronione błędy, w ogóle ich nie dopuszczam. W mojej aplikacji uważam, że wszystkie pliki w segmencie hosta są publiczne i ustawiam to za pomocą opcji Wszyscy z uprawnieniem do odczytu . Jeśli Twoja witryna ma prywatne strony, pozwolenie użytkownikowi na zobaczenie układu HTML nie powinno stanowić problemu. To, czego potrzebujesz do ochrony, to dane, a odbywa się to w wewnętrznej bazie danych.

Ponadto, jeśli masz prywatne zasoby, takie jak zdjęcia użytkowników, możesz zapisać je w innym segmencie. Ponieważ zasoby prywatne wymagają takiej samej opieki jak dane i nie można ich porównywać z plikami zasobów używanymi do hostowania aplikacji.

Zetknąłem się dzisiaj z tym samym problemem, ale rozwiązanie @ Mark-Nutter było niekompletne, aby usunąć hashbang z mojej aplikacji angularjs.

W rzeczywistości musisz przejść do Edycji uprawnień , kliknąć Dodaj więcej uprawnień, a następnie dodać odpowiednią listę w wiadrze do wszystkich. Przy tej konfiguracji AWS S3 będzie mógł teraz zwrócić błąd 404, a następnie reguła przekierowania odpowiednio złapie sprawę.

Takie jak to :

Następnie możesz przejść do Edycji reguł przekierowania i dodać tę regułę:

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

Tutaj możesz zastąpić nazwę hosta subdomain.domain.fr swoją domeną i KeyPrefix #! / Jeśli nie używasz metody hashbang do celów SEO.

Oczywiście wszystko to zadziała tylko wtedy, gdy masz już konfigurację trybu html5 w aplikacji kątowej.

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

Najłatwiejszym rozwiązaniem, aby aplikacja Angular 2+ była obsługiwana z Amazon S3 i bezpośrednich adresów URL, jest określenie index.html zarówno jako dokumentów indeksu, jak i błędów w konfiguracji segmentu S3.

ponieważ problem nadal istnieje, pomyślałem, że wprowadzę inne rozwiązanie. Mój przypadek polegał na tym, że chciałem automatycznie wdrożyć wszystkie żądania ściągnięcia do s3 w celu przetestowania przed scaleniem, aby były dostępne na [mojadomena] / pull-request / [pr number] /
(np. Www.example.com/pull-requests/822/ )

Zgodnie z moją najlepszą wiedzą, scenariusze inne niż reguły s3 pozwoliłyby na posiadanie wielu projektów w jednym segmencie przy użyciu routingu HTML5, więc chociaż powyższa sugestia nad większością głosów działa dla projektu w folderze głównym, nie dotyczy wielu projektów we własnych podfolderach.

Wskazałem więc moją domenę na mój serwer, na którym wykonałem zadanie po konfiguracji 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;
}

próbuje pobrać plik, a jeśli nie zostanie znaleziony, zakłada, że ​​jest to trasa HTML5 i próbuje tego. Jeśli masz stronę kątową 404 dla nieodnalezionych tras, nigdy nie dostaniesz się do @not_found i otrzymasz zwrotną stronę 404 zamiast nieodnalezionych plików, co można naprawić za pomocą niektórych, jeśli reguła w @get_routes lub coś takiego.

Muszę powiedzieć, że nie czuję się zbyt komfortowo w zakresie konfiguracji nginx i używania wyrażeń regularnych w tej kwestii, dostałem to z pewną próbą i błędem, więc chociaż działa, jestem pewien, że jest miejsce na ulepszenia i proszę podziel się swoimi przemyśleniami .

Uwaga : usuń reguły przekierowania s3, jeśli masz je w konfiguracji S3.

a btw działa w Safari

Szukał tego samego rodzaju problemu. Skończyło się na użyciu kombinacji sugerowanych rozwiązań opisanych powyżej.

Po pierwsze, mam wiadro s3 z wieloma folderami, każdy folder reprezentuje stronę reagującą / reduxową. Używam również Cloudfront do unieważnienia pamięci podręcznej.

Musiałem więc użyć reguł routingu do obsługi 404 i przekierować je do konfiguracji skrótu:

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

W moim kodzie js musiałem obsługiwać go za pomocą baseNamekonfiguracji routera reagującego. Przede wszystkim upewnij się, że twoje zależności są interoperacyjne, mam zainstalowane, z którymi history==4.0.0był niezgodny react-router==3.0.1.

Moje zależności to:

• „historia”: „3.2.0”,
• „reagować”: „15.4.1”,
• „React-redux”: „4.4.6”,
• „Reaguj router”: „3.0.1”,
• „React-router-redux”: „4.0.7”,

Utworzyłem history.jsplik do ładowania historii:

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;

Ten fragment kodu pozwala obsłużyć 404 wysłany przez serwer z mieszaniem i zastąpić je w historii ładowaniem naszych tras.

Możesz teraz użyć tego pliku do skonfigurowania sklepu i pliku głównego.

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;

Mam nadzieję, że to pomoże. Zauważysz, że w tej konfiguracji używam wtryskiwacza redux i wtryskiwacza homebrew sagas do asynchronicznego ładowania javascript przez routing. Nie przejmuj się tymi liniami.

Możesz teraz to zrobić za pomocą Lambda @ Edge, aby przepisać ścieżki

Oto działająca funkcja lambda @ Edge:

1. Utwórz nową funkcję Lambda, ale zamiast jednej pustej funkcji użyj jednego z wcześniej istniejących schematów.
2. Wyszukaj „cloudfront” i wybierz generowanie odpowiedzi cloudfront z wyników wyszukiwania.
3. Po utworzeniu funkcji zamień zawartość na niższą. Musiałem także zmienić środowisko uruchomieniowe węzła na 10.x, ponieważ program Cloudfront nie obsługiwał węzła 12 w momencie pisania.

'use strict';
exports.handler = (event, context, callback) => {

    // Extract the request from the CloudFront event that is sent to Lambda@Edge 
    var request = event.Records[0].cf.request;

    // Extract the URI from the request
    var olduri = request.uri;

    // Match any '/' that occurs at the end of a URI. Replace it with a default index
    var newuri = olduri.replace(/\/$/, '\/index.html');

    // Log the URI as received by CloudFront and the new URI to be used to fetch from origin
    console.log("Old URI: " + olduri);
    console.log("New URI: " + newuri);

    // Replace the received URI with the URI that includes the index page
    request.uri = newuri;

    return callback(null, request);
};

W swoich zachowaniach w chmurze zmodyfikujesz je, aby dodać wywołanie do tej funkcji lambda w „Żądaniu przeglądarki”

Pełny samouczek: https://aws.amazon.com/blogs/compute/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/

Jeśli wylądowałeś tutaj, szukając rozwiązania współpracującego z React Router i konsolą AWS Amplify - już wiesz, że nie możesz bezpośrednio korzystać z reguł przekierowania CloudFront, ponieważ Amplify Console nie ujawnia dystrybucji CloudFront dla aplikacji.

Rozwiązanie jest jednak bardzo proste - wystarczy dodać regułę przekierowywania / przepisywania w konsoli Amplify w następujący sposób:

Zobacz poniższe linki, aby uzyskać więcej informacji (i regułę przyjazną dla kopiowania ze zrzutu ekranu):

• https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
• https://github.com/aws-amplify/amplify-console/issues/83

Sam szukałem odpowiedzi na to pytanie. S3 wydaje się obsługiwać tylko przekierowania, nie można po prostu przepisać adresu URL i po cichu zwrócić inny zasób. Zastanawiam się nad użyciem skryptu kompilacji do wykonania kopii mojego pliku index.html we wszystkich wymaganych lokalizacjach ścieżek. Może to też zadziała dla ciebie.

Żeby ująć niezwykle prostą odpowiedź. Wystarczy użyć strategii lokalizacji skrótu dla routera, jeśli hostujesz na S3.

export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot (trasy, {useHash: true, scrollPositionRestoration: 'enabled'});