रिएक्ट-राउटर और नगनेक्स

Question

मैं वेबपैक-देव-सर्वर से नगीनेक्स में अपनी प्रतिक्रिया ऐप को बदल रहा हूं।

जब मैं रूट url "लोकलहोस्ट: 8080 / लॉगिन" पर जाता हूं, तो मुझे बस एक 404 मिलता है और अपने nginx लॉग में मैं देखता हूं कि यह पाने की कोशिश कर रहा है:

my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080"
my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET /login HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-"

मुझे फ़िक्स कहाँ से देखना चाहिए?

प्रतिक्रिया में मेरा राउटर बिट इस तरह दिखता है:

render(

  <Provider store={store}>
    <MuiThemeProvider>
      <BrowserRouter history={history}>
        <div>
          Hello there p
          <Route path="/login" component={Login} />
          <App>

            <Route path="/albums" component={Albums}/>

            <Photos>
              <Route path="/photos" component={SearchPhotos}/>
            </Photos>
            <div></div>
            <Catalogs>
              <Route path="/catalogs/list" component={CatalogList}/>
              <Route path="/catalogs/new" component={NewCatalog}/>
              <Route path="/catalogs/:id/photos/" component={CatalogPhotos}/>
              <Route path="/catalogs/:id/photos/:photoId/card" component={PhotoCard}/>
            </Catalogs>
          </App>
        </div>
      </BrowserRouter>
    </MuiThemeProvider>
  </Provider>, app);

और इस तरह मेरी nginx फ़ाइल:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 8080;
        root /wwwroot;

        location / {
            root /wwwroot;
            index index.html;

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


    }
}

संपादित करें:

मुझे पता है कि अधिकांश सेटअप काम करता है क्योंकि जब मैं लोकलहोस्ट पर जाता हूं: 8080 बिना लॉग इन किए मुझे लॉगिन पेज मिलता है। यह लोकलहोस्ट के लिए पुनर्निर्देशित नहीं है: 8080 / लॉगिन - यह कुछ प्रतिक्रिया कोड है।

Comments

पैरामीटर try_filesयूआरआई होने चाहिए और पैथनेम नहीं। कोशिश करें:try_files $uri $uri/ /index.html;

— रिचर्ड स्मिथ

@RichardSmith ठीक है ... मैंने इसे index.html फ़ाइल के पथनाम के रूप में देखा। मैंने इसे बदलने का प्रयास किया है जो आपने सुझाया है - लेकिन एक ही परिणाम प्राप्त कर रहा है। ## / wwwroot / लॉगिन "में विफल रहा है (2: इस तरह के कोई फ़ाइल या निर्देशिका) ## आप अन्य सुझाव हैं में tonite मैं गोता होगा ...।

— मार्टिन

@ स्मार्टिन क्या आप इसे अभी तक हल कर पाए हैं? हम एक ही चीज देख रहे हैं, लेकिन पहले से ही वहाँ में try_files लाइन थी।

— बिली फर्ग्यूसन

Answer 1

आपके nginx config में स्थान ब्लॉक होना चाहिए:

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

समस्या यह है कि index.html फ़ाइल काम के लिए अनुरोध करता है, लेकिन आप वर्तमान में nginx को index.html फ़ाइल में अन्य अनुरोधों को अग्रेषित करने के लिए नहीं कह रहे हैं।

Comments

(लापता .js, .css फ़ाइलें, आदि के लिए कैशिंग, 404) और अधिक उन्नत विन्यास के लिए इसे देखें gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html

— गियानफ़्रैंको पी

ऐसा लगता है कि रिएक्ट राउटर सर्वर पर एक गोल यात्रा का कारण नहीं होना चाहिए ... क्या इसे स्थानीय रूप से दंग किया जा सकता है?

— स्कूटी एच

यदि nginx ने अनुरोध को index.html फ़ाइल में रूट नहीं किया है, तो प्रतिक्रिया रूटर के अंदर JS को भी अनुरोध के बारे में पता नहीं होगा। यह उत्तर सभी अनुरोधों को प्रतिक्रिया के लिए रूट करता है, सभी अनुरोधों को संभालने के लिए प्रतिक्रिया रूटर की अनुमति देता है।

— टॉबी

Package.json में डिफ़ॉल्ट होमपेज सेटिंग का उपयोग करना भी महत्वपूर्ण है, जो सर्वर रूट का उपयोग करता है। मैंने इसे '।', (सापेक्ष पथों का उपयोग करें) के लिए सेट किया था, लेकिन तब nginx ने /custompath/static/main.js की सेवा करने की कोशिश की, जो स्पष्ट रूप से विफल हो जाएगी, एक गैर-कार्यशील साइट दे रही है।

— बोअर्रे

बस एक सिर, सुनिश्चित करें कि आप वास्तव में कॉन्फ़िगर किया जा रहा है लोड हो रहा है, मेरा डिफ़ॉल्ट के साथ संघर्ष कर रहा था और बस छोड़ दिया जा रहा था। sigh

— 4c74356b41

Answer 2

यहाँ मेरे समाधान हैं

सरल कोशिश:

location / {
    root /var/www/mysite;
    try_files $uri /index.html;
}

गैर-html प्रकारों के लिए और अधिक प्रयास नहीं:

location / {
    root /var/www/mysite;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}

गैर-html प्रकार और निर्देशिका के लिए कोई अधिक प्रयास नहीं कर रहा है ( और / या try_filesके साथ संगत बनाना ):indexautoindex

location / {
    root /var/www/mysite;
    index index.html;
    autoindex on;
    set $fallback_file /index.html;
    if ($http_accept !~ text/html) {
        set $fallback_file /null;
    }
    if ($uri ~ /$) {
        set $fallback_file /null;
    }
    try_files $uri $fallback_file;
}

Answer 3

शायद यह यहाँ सटीक मामला नहीं है, लेकिन किसी के साथ dockerअपनी reactपरियोजना के लिए एक कंटेनर चल रहा है react-routerऔर webpack-dev-server, मेरे मामले में मेरे पास मेरी जरूरत का सब कुछ था nginx.conf:

server {
    listen 80;
    location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    } 
    error_page 404 /index.html;
    location = / {
      root /usr/share/nginx/html;
      internal;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }

लेकिन फिर भी nginx 404 erros को रूट पर नहीं भेजेगा /। कंटेनर में देखने के बाद मैंने देखा कि इसमें कुछ कॉन्फिग्स हैं, /etc/nginx/conf.d/default.confजो किसी तरह मेरे कॉन्फिगर को ओवरराइड करेंगे, इसलिए उस फाइल को मेरे dockerfileसॉल्व करने में प्रॉब्लम हो गई:

...
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf  # <= This line solved my issue
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Comments

आपने मेरा दिन बचाया!

— बिलाल हुसैन

Answer 4

यहाँ समाधान है कि लाइव सर्वर में मेरे लिए काम कर रहा है:

मैंने अभी-अभी इस ट्यूटोरियल को फॉलो किया है और बेसिक नग्नेक्स कॉन्फ़िगरेशन के साथ बस लोकेशन ब्लॉक को कॉन्फ़िगर किया है।

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

Answer 5

मेरे लिए कुछ भी काम नहीं किया जब तक मैंने एक जड़ निर्देश नहीं जोड़ा। यह मेरे लिए भी एक / / एपीआई / वेबसर्वर समापन बिंदु हिट करने के लिए एक रिवर्स प्रॉक्सी का उपयोग कर काम किया।

location / {
    root   /usr/share/nginx/html;
    try_files $uri /index.html;
}

Answer 6

मैं उसी समस्या से निपट रहा था और मुझे लगा कि यह एक त्रुटि थी, लेकिन नहीं। मैं गोपनीय फ़ाइल को /etc/nginx/conf.d/फ़ोल्डर में कॉपी कर रहा था । वह काम करता है dev में लेकिन बिल्ड वर्जन में वह समस्या पैदा करता है। जब मार्ग अनुक्रमणिका के लिए नगनेक्स फॉलबैक में विफल रहता है।

बस सही फ़ोल्डर में conf फाइल कॉपी करें: /etc/nginx/conf.d/default.conf

उदाहरण Dockerfile निर्देश: COPY .docker/prod/nginx.conf /etc/nginx/conf.d/default.conf

आशा करता हूँ की ये काम करेगा।

Answer 7

location / {
    root /path/to/root/directory/of/staticfiles;
    index index.html;
    try_files $uri /index.html;
}