webentwicklung-frage-antwort-db.com.de

Der Apache-Webserver erlaubt mir keine Aktualisierung auf/über, aber auf localhost funktioniert das einwandfrei

Ich habe eines meiner Projekte gebündelt und es funktioniert gut. Wenn Sie jedoch die Aktualisierung auf einer Route/About ausführen, wird die angeforderte URL/About auf diesem Server nicht gefunden. Wenn ich jedoch auf meinem localhost einen Webserver anstelle, funktioniert es problemlos mit den Tasten Refresh und Forward/Back. Ich benutze den reakt-Router für mein clientseitiges Routing. 

Hier ist das clientseitige Routing, aber ich bezweifle, dass es das Problem ist 

 Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(<Handler/>, app);
 });

Und meine Routen sind einfach da:

let routes = (
<Route>
  <Route name = "App" path="/" handler = {App}>
    <Route name="About" path="/about" handler = {About}/>
    <DefaultRoute name="Projects" handler = {Projects}/>
  </Route>
</Route>
        );

Hier ist der Apache, von dem ich glaube, dass ich ihn gebrochen habe: 

<Directory /var/www/>
                # This directive allows us to have Apache2's default start page
                # in /Apache2-default/, but still have / go to the right place
Require all granted
                #RedirectMatch ^/$ /Apache2-default/
        </Directory>

kkotwal.me.conf: 

<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual Host. For the default virtual Host (this file) this
        # value is not decisive as it is used as a last resort Host regardless.
        # However, you must set it for any further virtual Host explicitly.
        #
        ServerName kkotwal.me
        ServerAlias www.kkotwal.me
        ServerAdmin [email protected]
        DocumentRoot /var/www/kkotwal.me/public_html

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${Apache_LOG_DIR}/error.log
        CustomLog ${Apache_LOG_DIR}/access.log combined
</VirtualHost>
apache.htaccessreactjsdigital-oceanreact-router
21
Karan

Hey, das ist eigentlich eine ziemlich gewöhnliche Sache. 

Sie müssen Ihren Apache-Server dazu veranlassen, verschachtelte Pfade zu ignorieren und stattdessen alle Anforderungen /* an root zu senden. Auf diese Weise kann Ihr Front-End-Javascript die Route auf der Clientseite abrufen und die korrekte Ansicht anzeigen.

Dies wird in verschiedenen Webservern manchmal als "HTML5-Modus" bezeichnet.

In Apache fügen Sie eine Regel wie die folgende hinzu:

  RewriteEngine On  
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  RewriteRule ^ /index.html [L]

Dies bedeutet, dass Apache angewiesen wird, vorhandene Dateien bereitzustellen. Wenn sie jedoch nicht vorhanden sind, muss nur /index.html und nicht 404 nicht gefunden werden. 

57
Mike Driver

Im Falle von Laravel müssen Sie dieselbe Ansicht rendern, in der alle Routen für die Reaktyldatei geschrieben sind. Laravel Route wird geschrieben als:

Route :: get ('{url}') function () { Return view ('welcome');}) -> where (['url' => '. *']);

die Willkommensklinge ist:

<!doctype html> 
<html lang="{{ app()->getLocale() }}">
    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Laravel</title>
         <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
         <div id="root"></div>
         <script src="{{asset('js/app.js')}}" ></script>
    </body> 
</html>

app.js-Datei für die Route

 <Route>
     <Route name = "App" path="/" handler = {App}>
     <Route name="About" path="/about" handler = {About}/>
     <DefaultRoute name="Projects" handler = {Projects}/>
   </Route>

jedes Mal, wenn Sie Ihre Info-Route aktualisieren, wird das Willkommens-Blade und die entsprechenden Routen in der Datei app.js angezeigt

0
Abhijeet Verma