2016-03-30 10 views
4

Arka uçta cherrypy ile nginx ve ön uç için ReactJS ile çalışan bir web uygulamasına sahibim.Nginx/cherrypy ve şu andaki reactjs uygulamasında tepki-yönlendiriciyi nasıl yapılandırabilirim?

Uygulama büyüdü, bu yüzden URL'lere sahip sayfalara hızlı erişim sağlamak için reaktif yönlendirici kullanmak istiyorum. Örneğin, benim alanımın/alan adının, uygulamayı yöneten ve kullanıcıyı yöneten kısmı almasını istiyorum.

Benim tek index.html js böyle paket içerir: <script src="/js/bundle.js"></script>

Şimdiye kadar benim app AppMain render başladı. Şimdi, bir nomatch sınıfını yarattı ve böyle bir tepki-yönlendirici içine hem koyduk:

ReactDOM.render((
    <Router history={browserHistory}> 
     <Route path="/" component={AppMain}> 
      <Route path="*" component={NoMatch}/> 
     </Route> 
    </Router> 
), document.getElementById('main-central')); 

o güzel çalıştı bu çalışırken. http://my.domain.name'u kullanarak uygulamayı daha önce olduğu gibi yaptım. Ama şimdi http://my.domain.name/whatever denemeyi denemek, NoMatch'in oluşturduğu her şeyi oluşturmuş olmalıdır. Ama bunun yerine nginx 404 sayfasını aldım.

Bu yüzden nginx tarafındaki bir yapılandırmaya ihtiyaç duyulduğuna inanıyorum, ancak belki de sadece (bu yüzden de tüm hikayeyi yukarıda anlattım). (Http parçası)

Nginx yapılandırma şuna benzer:

upstream app_servers { 
    server 127.0.0.1:9988; 
} 

# Configuration for Nginx 
server { 

    location/{ 
     root /var/www; 
     index index.html; 
    } 

    # Proxy connections to the application servers 
    # app_servers 
    location /api { 
     proxy_pass   http://app_servers/api; 
     proxy_redirect  off; 
     proxy_set_header Host $host; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header X-Forwarded-Host $server_name; 
    } 
} 

Eğer cherrypy tüm/API/* yollarını oluyor görebileceğiniz gibi.

/css,/img vb. Altında düzgün bir şekilde sunulmak istediğim statik içerikler var.

yüzden js gitmek statik değildir ve her şeyi değil/API gerek/bundle.js

nasıl nginx bu yapılandırırım? Kiraz veya javascript içinde farklı bir şey yapmam gerekir mi?

Şimdiden teşekkürler.

cevap

24

İşte edilir ... kendi cevap Bulunan: Gerektiğinde

Temelde nginx yapılandırma (tabii ki, benim bundle.js kadar) URL'lerin /index.html yönlendirme try_files ait

ekleme nginx Konfigürasyon o ilgilenir:

:
location/{ 
    root /var/www; 
    index index.html; 

    try_files $uri $uri/ /index.html; 
} 

Ayrıca ben yönlendiricinin ana rednering modifiye

Ve AppMainNewNav render() Böyle bir şey için navigasyon modifiye:

<nav> 
    <ul role="nav"> 
     <li><Link to="/videos">Videos</Link></li> 
     <li><Link to="/about">About</Link></li> 
    </ul> 
</nav> 
+0

endeks index.html ve try_files index.html benim için çalıştı! – Fritex

+0

bu düzgün try_files yönlendirici hilesi bir nginx web sunucusu olmadan bir Google Depolama Kovasında kullanılabilir :) https://www.ackee.cz/blog/en/how-to-host-static-react-apps-in-google- depolama-kova-arkası cloudflare cdn / – bartimar

İlgili konular