So stellen Sie eine React-App auf dem Apache-Webserver bereit

Ich habe eine grundlegende React App erstellt https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm Hier möchte ich diesen Testcode auf einem Apache-basierten Server ausführen. Ich weiß, dass ich einen verteilbaren Build erstellen muss, aber ich kann nicht herausfinden, wie das geht, und konnte keine klaren Anweisungen finden.

Ich habe diesen Beitrag React,js auf dem Apache-Server gesehen, aber er enthält nicht mehr als ein paar Richtlinien

Gehen Sie zunächst in Ihrem Reaktionsprojekt zu your Paket.json und passen Sie diese Codezeile an Ihre Zieldomänenadresse + Ordner an:

"homepage": "https://yourwebsite.com/your_folder_name/",

Zweitens gehen Sie zu Terminal in Ihrem Reaktionsprojekt und geben Sie Folgendes ein:

npm run build

Jetzt, alle Dateien nehmen daraus neu geschaffen bauen Ordner und lade sie dort hoch
your_folder_namemit Filezilla im Unterordner wie folgt:

public_html/your_folder_name

Im Browser prüfen!

Letztendlich konnte ich es herausfinden, ich hoffe nur, es wird jemandem wie mir helfen.
Im Folgenden sehen Sie, wie die Konfigurationsdatei des Webpakets aussehen sollte. Überprüfen Sie das angegebene dist-Verzeichnis und die angegebene Ausgabedatei. Mir fehlte die Möglichkeit, den Pfad des dist-Verzeichnisses anzugeben

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

Dann die Paket-json-Datei

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

Beachten Sie den Skriptabschnitt und den Produktionsabschnitt, der Produktionsabschnitt gibt Ihnen die endgültige bereitstellbare index.js-Datei (der Name kann beliebig sein).

Ruhen Sie sich aus, die Dinge hängen von Ihrem Code und Ihren Komponenten ab

Führen Sie die folgende Befehlsfolge aus

npm installieren

Dies sollte Ihnen alle Abhängigkeiten bringen (Knotenmodule)

dann

npm-Produktion ausführen

Dies sollte Ihnen das Finale bringen index.js Datei, die den gesamten gebündelten Code enthält

Einmal erledigt index.html und index.js Dateien unter www/html oder dem Stammverzeichnis der Web-App und das ist alles.

1. Gehen Sie in Ihr Projekt-Root-Verzeichnis, zB: cd /home/ubuntu/react-js.
2. Erstellen Sie zuerst Ihr Projekt: npm run build.
3. Überprüfen Sie Ihr Build-Verzeichnis, alle folgenden Dateien sind im Build-Ordner verfügbar:

   asset-manifest.json
   favicon.ico
   manifest.json
   robots.txt
   static 
   assets
   index.html
   precache-manifest.ddafca92870314adfea99542e1331500.js 
   service-worker.js 

4. Kopieren Sie den Build-Ordner auf Ihren Apache-Server, dh /var/www/html:

   sudo cp -rf build /var/www/html

5. Gehen Sie zum Verzeichnis der verfügbaren Websites:

   cd /etc/apache2/sites-available/

6. Öffne das 000-default.conf Datei:

sudo vi 000-default.conf und ändern Sie den DocumentRoot-Pfad in /var/www/html/build.

7. Gehen Sie nun zur Apache-Konfiguration.

cd /etc/apache2

sudo vi apache2.conf

Fügen Sie den folgenden Ausschnitt hinzu:

<Directory /var/www/html>

       Options Indexes FollowSymLinks

       AllowOverride All

       Require all granted

</Directory>

8. Machen Sie eine Datei darin /var/www/html/build:

   sudo vi .htaccess

Options -MultiViews
    
RewriteEngine On
    
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

9. Apache-Server neu starten:

   sudo service apache2 restart

Bevor Sie den npm-Build erstellen,
1) Gehen Sie zum Stammordner Ihres React-Projekts und öffnen Sie es package.json.
2) Fügen Sie das Attribut “Homepage” hinzu package.json

• wenn Sie liefern möchten absolut Weg

  "homepage": "http://hostName.com/appLocation",
  "name": "react-app",
  "version": "1.1.0",
  

• wenn Sie liefern möchten relativ Weg

  "homepage": "./",
  "name": "react-app",
  

  Die Verwendung der relativen Pfadmethode kann einen Syntaxvalidierungsfehler in Ihrer IDE anzeigen. Aber der Build wird ohne Fehler während der Kompilierung erstellt.

3) Speichern Sie die package.json und im Terminallauf npm run-script build

4) Kopieren Sie den Inhalt von build/ Ordner in Ihr Serververzeichnis.

PS: Es ist einfach, die relative Pfadmethode zu verwenden, wenn Sie den Speicherort der Build-Datei auf Ihrem Server häufig ändern möchten.

Wie im Beitrag erwähnt, ist React eine browserbasierte Technologie. Es rendert nur eine Ansicht in einem HTML-Dokument.

Um auf Ihre „React App“ zugreifen zu können, müssen Sie:

1. Bündeln Sie Ihre React-App in einem Bundle
2. Lassen Sie Apache auf Ihre HTML-Datei auf Ihrem Server verweisen und den Zugriff von außen zulassen.

Vielleicht hast du hier alle Infos: https://httpd.apache.org/docs/trunk/getting-started.html für den Apache-Server und hier, um Ihr Javascript-Bundle zu erstellen https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

Sie können es über den Apache-Proxy ausführen, aber es müsste in einem virtuellen Verzeichnis (z http://mysite.something/myreactapp ).

Dies mag etwas überflüssig erscheinen, aber wenn Sie andere Seiten haben, die nicht Teil Ihrer React-App sind (z. B. PHP-Seiten), können Sie alles über Port 80 bereitstellen und den Eindruck erwecken, dass das Ganze eine zusammenhängende Website ist.

1.) Starten Sie Ihre React-App mit npm run oder einem beliebigen Befehl, den Sie zum Starten des Node-Servers verwenden. Vorausgesetzt es läuft weiter http://127.0.0.1:8080

2.) Bearbeiten Sie httpd-proxy.conf und fügen Sie hinzu:

ProxyRequests On
ProxyVia On
<Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

ProxyPass /myreactapp http://127.0.0.1:8080/
ProxyPassReverse /myreactapp  http://127.0.0.1:8080/

3.) Starten Sie Apache neu

Wie auch in React’s Official beschrieben DokumenteWenn Sie Router verwenden, die HTML5 verwenden pushState History-API unter der Haube, Sie müssen nur den folgenden Inhalt hinzufügen .htaccess Datei in public Verzeichnis Ihrer React-App.

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

Und wenn Sie den relativen Pfad verwenden, aktualisieren Sie die package.json so was:

"homepage": ".",

Notiz: Wenn Sie verwenden react-router@^4du kannst rooten <Link> Verwendung der basename stützen Sie auf alle <Router>.

import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>