S3 Statik Web Sitesi Barındırma Tüm Yolları Index.html


250

HTML5 pushStates kullanacak bir javascript uygulaması barındırmak için S3 kullanıyorum. Sorun, kullanıcı URL'lerin herhangi birine yer işareti koyarsa, hiçbir şeye çözümlenmeyecektir. İhtiyacım olan şey, tam bir yönlendirme yapmak yerine, tüm URL isteklerini alma ve kök dizin.html'yi S3 grubumda sunma yeteneğidir. Sonra benim javascript uygulama URL ayrıştırma ve uygun sayfa hizmet verebilir.

S3'e, yönlendirme yapmak yerine tüm URL istekleri için index.html dosyasını sunmasını söylemenin bir yolu var mı? Bu, aşağıdaki örnekte olduğu gibi tek bir index.html sunarak gelen tüm istekleri işlemek için apache ayarlamaya benzer: https://stackoverflow.com/a/10647521/1762614 . Gerçekten sadece bu yolları işlemek için bir web sunucusu çalıştırmaktan kaçınmak istiyorum. S3'ten her şeyi yapmak çok çekici.


Buna bir çözüm buldunuz mu?
w2lame

Yanıtlar:


302

CloudFront yardımı ile url korsanları olmadan çözmek çok kolaydır.

  • S3 kovası oluşturun, örneğin: tepki
  • Aşağıdaki ayarlarla CloudFront dağıtımları oluşturun:
    • Varsayılan Kök Nesne : index.html
    • Kaynak Alan Adı : S3 grup alanı, örneğin: reakt.s3.amazonaws.com
  • Git Sayfalar Hata tıklayın sekmesini Özel Hata Yanıtı oluşturun :
    • HTTP Hata Kodu : 403: Yasak (404: Bulunamadı, S3 Statik Web Sitesi durumunda)
    • Hata Yanıtını Özelleştir : Evet
    • Yanıt Sayfası Yolu : /index.html
    • HTTP Yanıt Kodu : 200: Tamam
    • Oluştur'a tıklayın

8
Teşekkürler. Şimdiye kadarki en iyi cevap.
jgb

ve "doğal" yönlendirme yapabilmeniz için konumunuzu korumanız o kadar açık değildir.
Lukasz Marek Sielski

5
bu benim için bir cazibe gibi çalıştı, sadece ihtiyacım olan özel hata kodu 404, 403 değil
Jeremy S.

4
Biraz hack, ama harika çalışıyor :) CloudFront sadece bir yol çeşitli yol S3 dosyası (yönlendirme olmadan) bize izin verirseniz iyi olurdu.
Bob

3
Bu benim için çalışmıyor. Bu çözüm her zaman doğru sayfaya değil, ana sayfaya yönlendirir ...
Jim

201

Bunu işe alabilmemin yolu şöyledir:

In Düzenleme Yönlendirme Kuralları adınız için S3 Konsolu bölümünde, aşağıdaki kuralları ekleyin:

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

Bu, kök alanınıza yolun karma sürümünü içeren bir 404 bulunmasına neden olan tüm yolları yeniden yönlendirir. Yani http://yourdomainname.com/posts yönlendirme yapacağı http://yourdomainname.com/#!/posts / görev yerlerinde dosya olup sağladı.

Ancak HTML5 pushStates'i kullanmak için bu isteği almamız ve hash-bang yolunu temel alarak uygun pushState'i manuel olarak belirlememiz gerekir. Bunu index.html dosyanızın üstüne ekleyin:

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

Bu karmayı alır ve HTML5 pushState'e dönüştürür. Bu noktadan sonra, uygulamanızda karma olmayan yollara sahip olmak için pushStates'i kullanabilirsiniz.


4
Bu çözüm harika çalışıyor! Aslında html modu yapılandırılmışsa, angularjs otomatik olarak pushState geçmişini yapar.
wcandillon

1
URL'lerinizde GET parametreleri varsa, bu eski IE sürümünde başarısız olur, değil mi? Bu sorunu nasıl çözersiniz?
clexmond

3
Teşekkürler! Bu benim için küçük bir değişiklik ile omurga üzerinde iyi çalıştı. Eski tarayıcılar için bir çek ekledim: <script language="javascript"> if (typeof(window.history.pushState) == 'function') { window.history.pushState(null, "Site Name", window.location.hash.substring(2)); } else { window.location.hash = window.location.hash.substring(2); } </script>
AE Gray

10
react-routerHTML5 pushStates ve<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
Felix D.

5
Safari çalışmaz ve dağıtım stratejisinde büyük bir sorundur. Yönlendirmek için küçük bir js yazmak biraz perişan bir yaklaşımdır. Ayrıca, yönlendirme sayısı da bir sorundur. Tüm S3 URL'leri her zaman index.html işaret edecek bir yolu olup olmadığını anlamaya çalışıyorum.
moha297

129

Başkaları tarafından belirtilen S3 / Redirect tabanlı yaklaşımla ilgili çok az sorun vardır.

  1. Uygulamanızın yolları çözüldükçe, birden fazla yönlendirme gerçekleşir. Örneğin: www.myapp.com/path/for/test www.myapp.com/#/path/for/test olarak yönlendirilir
  2. '#' Geldiği ve SPA çerçevenizin işleminden dolayı URL çubuğunda bir titreşim var.
  3. Seo etkilendi çünkü - 'Hey! Google, yönlendirmelere elini zorluyor '
  4. Uygulamanız için Safari desteği atmaya gider.

Çözüm şudur:

  1. Web siteniz için dizin yolunun yapılandırıldığından emin olun. Çoğunlukla index.html
  2. S3 yapılandırmalarından yönlendirme kurallarını kaldırma
  3. S3 kovanızın önüne bir Cloudfront yerleştirin.
  4. Cloudfront örneğiniz için hata sayfası kurallarını yapılandırın. Hata kurallarında şunları belirtin:

    • Http hata kodu: 404 (ve 403 veya ihtiyaca göre diğer hatalar)
    • Minimum TTL Önbellekleme Hatası (saniye): 0
    • Yanıtı özelleştir: Evet
    • Yanıt Sayfası Yolu: /index.html
    • HTTP Yanıt Kodu: 200

      1. SEO ihtiyaçları + index.html dosyanızın önbelleğe alınmadığından emin olmak için aşağıdakileri yapın:
    • Bir EC2 yönetim ortamı yapılandırın ve bir nginx sunucusu kurun.

    • EC2 örneğinize herkese açık bir ip atayın.
    • Örnek olarak oluşturduğunuz EC2 örneğine sahip bir ELB oluşturma
    • ELB'yi DNS'nize atayabilmeniz gerekir.
    • Şimdi, nginx sunucunuzu aşağıdakileri yapacak şekilde yapılandırın: Proxy_CDN'nize tüm istekleri atlayın (yalnızca index.html için, diğer varlıklara doğrudan bulut önünüzden hizmet verin) ve arama botları için, trafiği Prerender.io gibi hizmetler tarafından yönlendirildiği şekilde yönlendirin

Nginx kurulumu ile ilgili daha fazla ayrıntıya yardımcı olabilirim, sadece bir not bırakın. Zor yoldan öğrendim.

Bir kez bulut ön dağıtım güncellemesi. Bozulmamış modda olmak için bulut önbelleğinizi bir kez geçersiz kılın. Tarayıcıdaki URL'ye basın ve her şey iyi olmalı.


6
bir dosya olmadığında S3 bir 403 Yasak ile yanıt verdiğinden, yukarıdaki 4. adımın Http hata kodu 403 için de çoğaltılması gerektiğini düşünüyorum
Andreas

4
Benim için beklenen (kabul edilen) bir davranışla sonuçlanan tek cevap bu
mabe.berlin

1
5 numaralı noktadaki @ moha297, sitenizi temel olarak nginx'ten getirecek şekilde yapılandırıyorsunuz, bu daha sonra CDN'den proxy'ler (index.html ve tarayıcı istekleri hariç)? Bu durumda, CDN edge sunucularının avantajlarını kaybetmez misiniz?
Rahul Patel

2
@ moha297 lütfen şu yorumu açıklayabilir misiniz: "Asla bir CDN'den index.html göndermemelisiniz?" CloudFront ile S3 gelen index.html hizmet ile ilgili bir sorun görmüyorum.
Carl G

1
0'ın bir TTL'sinin nasıl ele alındığı hakkında daha fazla bilgi için stackoverflow.com/a/10622078/4185989 adresine bakın (kısa sürüm: Cloudfront tarafından önbelleğe alınır, ancak If-Modified-Sincebaşlangıç ​​noktasına bir GET isteği gönderilir) - isteyenler için yararlı bir husus olabilir 5. adımda olduğu gibi bir sunucu nasıl
kurulur

18

Teğetsel, ancak burada Rackt'ın React Router kütüphanesini kullananlar için bir ipucu barındırmak isteyen (HTML5) tarayıcı geçmişine sahip .

Bir kullanıcının /foo/bearS3 tarafından barındırılan statik web sitenizi ziyaret ettiğini varsayalım . David'in daha önceki önerisi göz önüne alındığında , yönlendirme kuralları onları gönderecektir /#/foo/bear. Uygulamanız tarayıcı geçmişini kullanarak oluşturulduysa, bu pek işe yaramaz. Ancak uygulamanız bu noktada yüklenir ve artık geçmişi değiştirebilir.

Projemize Rackt geçmişini ekleyerek (ayrıca React Router projesinden Özel Geçmişleri Kullanma konusuna bakın ), karma geçmiş yollarından haberdar olan bir dinleyici ekleyebilir ve bu örnekte gösterildiği gibi yolu uygun şekilde değiştirebilirsiniz:

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

Özetlemek gerekirse:

  1. David'in S3 Yönlendirme kuralı yönlendirecektir /foo/beariçin/#/foo/bear .
  2. Uygulamanız yüklenecek.
  3. Geçmiş dinleyicisi #/foo/beargeçmiş gösterimini algılar .
  4. Ve geçmişi doğru yolla değiştirin.

Link etiketlertüm diğer tarayıcı geçmişi işlevleri gibi de beklendiği gibi çalışır. Fark ettiğim tek dezavantajı, ilk istekte gerçekleşen geçiş reklamı yönlendirmesidir.

Bu AngularJS için bir çözümden ilham aldı ve sanırım herhangi bir uygulamaya kolayca adapte edilebilir.


2
Bu bana yardımcı oldu Michael, Teşekkürler! Referansınızı geçmişten değiştirmek ve sadece BrowserHistory'yi kullanmak isteyebilirsiniz. iebrowserHistory.listen
Marshall Moutenot

Rica ederim! Yardımcı olduğuma sevindim. Ayrıca, kabul etti ve bu özel kullanım durumu için snippet'i React Router'ın kullanımdan kaldırma uyarısını çözmek için güncelledim.
Michael Ahlers

Reat-router v3.0.0 sürümü ile bu işe yaramaz, çünkü Reat-router v3.0.0 Geçmiş v3.0.0 kullanır
Varand Pezeshkian

History.listen sonsuz çağrı döngüsünü nasıl önleyeceğiniz hakkında bir fikriniz var mı? Sanırım yolu değiştirerek.
Mirko Flyktman

14

Bu soruna 4 çözüm görüyorum. İlk 3'ü zaten cevaplarla ilgiliydi ve sonuncusu benim katkım.

  1. Hata belgesini index.html olarak ayarlayın.
    Sorun : Yanıt gövdesi doğru olacak, ancak durum kodu SEO'ya zarar veren 404 olacak.

  2. Yeniden yönlendirme kurallarını ayarlayın.
    Sorun : URL ile kirlendi #!ve yüklendiğinde sayfa yanıp sönüyor.

  3. CloudFront'u yapılandırın.
    Sorun : Tüm sayfalar 404 kaynağından dönecek, bu nedenle hiçbir şeyi önbelleğe almamayı (önerilen TTL 0) veya siteyi güncellerken sorun yaşayıp yaşamamanızı seçmeniz gerekiyor.

  4. Tüm sayfaları önceden hazırlayın.
    Sorun : Ön sayfalara, özellikle sayfalar sık ​​sık değiştiğinde ek çalışma. Örneğin, bir haber sitesi.

Benim önerim 4 seçeneğini kullanmaktır. Tüm sayfaları önceden eklerseniz, beklenen sayfalar için 404 hatası olmaz. Sayfa düzgün yüklenir ve çerçeve kontrolü ele alır ve normalde bir SPA işlevi görür. Hata belgesini, genel bir error.html sayfası ve 404 hatalarını 404.html sayfasına (hashbang olmadan) yönlendirmek için yeniden yönlendirme kuralı görüntüleyecek şekilde de ayarlayabilirsiniz.

403 Yasak hataları ile ilgili olarak, onların olmasına izin vermem. Uygulamamda, ana bilgisayar grubundaki tüm dosyaların herkese açık olduğunu düşünüyorum ve bunu okuma izniyle herkes seçeneğiyle ayarlıyorum . Sitenizde özel sayfalar varsa, kullanıcının HTML düzenini görmesine izin vermek sorun olmamalıdır. Korumanız gereken verilerdir ve bu arka uçta yapılır.

Ayrıca, kullanıcı fotoğrafları gibi özel varlıklarınız varsa bunları başka bir gruba kaydedebilirsiniz . Özel varlıklar verilerle aynı bakıma ihtiyaç duyduğundan ve uygulamayı barındırmak için kullanılan varlık dosyalarıyla karşılaştırılamaz.


1
sitenizin tüm sayfalar için önceden yayınlamak için harika bir kullanım örneği vardır. zanon.io/posts/… .- Teşekkür ederim
frekele

Bu dördüncü yaklaşım, pushState URL'sini yeniden yükleyen kullanıcıyı ele alıyor mu? Gezinmeyi gayet iyi idare eder, ancak yeniden yüklemede yine de sunucuya ulaşır.
Alfa

@Alpha, sorunuzu doğru anladığımdan emin değilim, ancak yeniden yüklendiğinde yeni bir istek olarak işlev görür. S3 isteği alır ve önceden girilen sayfayı tekrar döndürür. Bu durumda sunucu yok.
Zanon

@Zanon Ah, sanırım anlıyorum. Önceden hazırlanmış sayfaları önbelleğe almanın ve S3 varolmayan kaynaklara gitmekten kaçınmanın amaçlandığını düşündüm. Bu, dinamik öğeleri olan rotaları dışarıda bırakır, değil mi?
Alpha

1
@Zonon sonunda anladım - teşekkürler! Evet, demek istediğim buydu. :)
Alfa

13

Bugün aynı problemle karşılaştım ama @ Mark-Nutter'ın çözümü hashbang'ı angularjs uygulamamdan kaldırmak için eksikti.

Aslında İzinleri Düzenle'ye gitmeniz , Daha fazla izin ekle'yi tıklamanız ve ardından grubunuza doğru Listeyi herkese eklemeniz gerekir. Bu yapılandırma ile, AWS S3 şimdi 404 hatası döndürebilecek ve yeniden yönlendirme kuralı durumu düzgün bir şekilde yakalayacaktır.

Aynen böyle : resim açıklamasını buraya girin

Ardından, Yeniden Yönlendirme Kurallarını Düzenle'ye gidip şu kuralı ekleyebilirsiniz:

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

Burada , SEO amacıyla hashbang yöntemini kullanmıyorsanız HostName subdomain.domain.fr adresini alan adınızla ve KeyPrefix #! /

Tabii ki, tüm bunlar sadece açısal uygulamanızda zaten kurulum html5mode varsa çalışır.

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

Bu benim tek sorunum bir nginx kuralı gibi bir şey yok hashbang bir flaş olmasıdır. Kullanıcı bir sayfada ve yeniliyor: / products / 1 -> #! /
Products

1
Herkese liste izinleri vermek yerine 403 hatası için bir kural eklemeniz gerektiğini düşünüyorum.
Hamish Moffatt

11

Angular 2+ uygulamasını Amazon S3'ten ve doğrudan URL'lerin çalışmasını sağlamak için en kolay çözüm, index.html dosyasını S3 grup yapılandırmasında Dizin ve Hata belgeleri olarak belirtmektir.

resim açıklamasını buraya girin


11
Bu, bu ağır indirilmiş cevabın cevabı ile aynı . İyi çalışıyor, ancak sadece bodyyanıt için. Durum kodu 404 olacak ve SEO'ya zarar verecek.
Zanon

Çünkü sadece web sitenizdeki alt rotalardan herhangi birine çarptığınızda işe yaramayacak bodyherhangi bir komut headdosyanız varsa çalışır
Mohamed Hajr

4

sorun hala orada olduğu için başka bir çözüm atmam da mümkün. Benim durumum, birleştirme işleminden önce tüm alan adı taleplerini s3'e otomatik olarak [alanım] / alan adı istekleri / [pr numarası] /
(ör. Www.example.com/pull-requests/822/) üzerinden erişilebilir kılmak istememdi . )

Bildiğim kadarıyla, s3 kuralları olmayan senaryolar, html5 yönlendirmesini kullanarak bir kovada birden fazla projeye izin verir, bu nedenle en çok oy alan öneri kök klasördeki bir proje için çalışır, ancak kendi alt klasörlerindeki birden fazla proje için geçerli değildir.

Bu yüzden etki alanımı sunucuma yönlendirdim ve aşağıdaki nginx config işini yaptı

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

dosyayı almaya çalışır ve bulunamazsa html5 yolu olduğunu varsayar ve bunu dener. Bulunmamış rotalar için 404 açısal sayfanız varsa, @not_found'a asla ulaşamazsınız ve @get_routes veya bir şeydeki if kuralıyla düzeltilebilecek dosyalar bulunamadı yerine açısal 404 sayfası döndürürsünüz.

Ben nginx yapılandırma alanında çok rahat hissetmiyorum ve bu konuda regex kullanarak söylemek zorundayım, bu biraz deneme yanılma ile çalıştım, bu yüzden bu çalışma sırasında iyileştirme için yer olduğundan eminim ve lütfen düşüncelerinizi paylaşın .

Not : S3 yapılandırmasında varsa s3 yeniden yönlendirme kurallarını kaldırın.

ve btw Safari'de çalışıyor


merhaba .. çözüm için teşekkürler ... nereye s3 dağıtım için bu nginx conf dosyasını koymak. .exextensions klasörü oluşturup proxy.config dosyasına koymam gereken elastik beanstalk ile aynı mı?
user3124360

@ user3124360 Elastik beantack hakkında emin değilim, ancak benim durumumda etki alanı adımı ec2 örneğine yönlendiriyorum ve orada nginx config var. Böylece istek İSTEMCİ -> DNS -> EC2 -> S3 -> İSTEMCİ gider.
Andrew Arnautov

evet ben çok benzer bir şey yapıyorum ... burada nginx yapılandırma ile github.com/davezuko/react-redux-starter-kit/issues/1099 ... conf dosyanızı gönderdiğiniz için teşekkürler .. nasıl bu EC2 geliştirmek görmek -> S3 Şimdi bağlantı
user3124360

3

Aynı tür bir sorun arıyordum. Yukarıda açıklanan önerilen çözeltilerin bir karışımını kullanarak sonuçlandırdım.

İlk olarak, birden fazla klasör içeren bir s3 kovam var, her klasör bir tepki / redux web sitesini temsil ediyor. Ayrıca önbelleği geçersiz kılmak için cloudfront kullanıyorum.

Bu yüzden 404'ü desteklemek ve bunları bir karma yapılandırmasına yönlendirmek için Yönlendirme Kurallarını kullanmak zorunda kaldım:

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

Benim js kodumda, baseNametepki yönlendirici için bir yapılandırma ile işlemek gerekiyordu . Her şeyden önce, bağımlılıklarınızın birlikte çalışabilir olduğundan emin olun, ben history==4.0.0uyumsuz olan yükledim react-router==3.0.1.

Bağımlılıklarım:

  • "geçmiş": "3.2.0",
  • "tepki": "15.4.1",
  • "tepki-redux": "4.4.6",
  • "tepki yönlendirici": "3.0.1",
  • "tepki-yönlendirici-redux": "4.0.7",

history.jsGeçmişi yüklemek için bir dosya oluşturdum :

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;

Bu kod parçası, sever tarafından gönderilen 404'ün bir karma ile işlenmesine ve rotalarımızı yüklemek için tarihte değiştirilmesine izin verir.

Artık bu dosyayı, mağazanızı ve Kök dosyanızı yapılandırmak için kullanabilirsiniz.

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;

Umarım yardımcı olur. Bu yapılandırmada, javascript'i yönlendirme yoluyla eşzamansız olarak yüklemek için redux enjektör ve homebrew sagas enjektör kullandığımı göreceksiniz. Bu çizgilere aldırmayın.


3

Artık yolları yeniden yazmak için Lambda @ Edge ile yapabilirsiniz

İşte çalışan bir lambda @ Edge işlevi:

  1. Yeni bir Lambda işlevi oluşturun, ancak boş bir işlev yerine önceden var olan Blueprints'ten birini kullanın.
  2. “Cloudfront” için arama yapın ve arama sonuçlarından cloudfront-yanıt üretmeyi seçin.
  3. İşlevi oluşturduktan sonra içeriği aşağıdaki ile değiştirin. Ayrıca, cloudfront yazma sırasında düğüm 12'yi desteklemediğinden, düğüm çalışma zamanını 10.x olarak değiştirmek zorunda kaldım.
'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);
};

Cloudfront davranışlarınızda, bunları "Görüntüleyici İsteği" nde lambda işlevine bir çağrı eklemek için düzenlersiniz resim açıklamasını buraya girin

Tam Eğitim: https://aws.amazon.com/blogs/compute/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/


1
Kod örneğiniz sadece bir satırı özlüyor:return callback(null, request);
Pherrymason

2

React Router ve AWS Amplify Console ile çalışan bir çözüm aramak için buraya geldiyseniz - Amplify Console, uygulama için CloudFront Dağıtımını göstermediğinden, CloudFront yeniden yönlendirme kurallarını doğrudan kullanamayacağınızı zaten biliyorsunuzdur.

Bununla birlikte, çözüm çok basittir - Amplify Console'a şu şekilde bir yönlendirme / yeniden yazma kuralı eklemeniz yeterlidir:

React Router için Konsolu Yeniden Yazma kuralını yükseltin

Daha fazla bilgi (ve ekran görüntüsünden kopya dostu kural) için aşağıdaki bağlantılara bakın:


0

Buna kendim bir cevap arıyordum. S3 yalnızca yönlendirmeleri destekliyor gibi görünüyor, URL'yi yeniden yazamaz ve sessizce farklı bir kaynak döndüremezsiniz. Gerekli tüm yol konumlarında benim index.html kopyalarını yapmak için benim derleme komut dosyası kullanmayı düşünüyorum. Belki bu senin için de işe yarar.


2
Her yol için dizin dosyaları oluşturmak da aklımdan geçti ama example.com/groups/5/show gibi dinamik yollara sahip olmak zor olurdu . Bu soruya verdiğim cevabı görürseniz, sorunun çoğunlukla çözüldüğüne inanıyorum. Biraz kesmek ama en azından işe yarıyor.
Mark Nutter

Bir nginx sunucusunun arkasına dağıtmak ve tüm gelen URL'ler için index.html döndürmek daha iyidir. Bunu kor uygulamalarının heroku dağıtımı ile başarıyla yaptım.
moha297

-3

Sadece son derece basit bir cevap koymak. S3'te barındırıyorsanız, yönlendirici için karma konum stratejisini kullanın.

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.