web-dev-qa-db-fra.com

Comment déployer une application React sur un serveur Web Apache

J'ai créé une application React de base à partir de https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm ici, je souhaite exécuter ce code de test sur un serveur basé sur Apache, Je sais que je dois créer une version distribuable, mais je ne suis pas en mesure de comprendre comment faire cela et je ne trouve pas d'instructions claires.

J'ai vu ce post React, js sur le serveur Apache mais il n'a rien de plus que quelques directives

Si on peut guider avec des indications ou des instructions claires, je vous en serai reconnaissant. P.S. Je sais comment fonctionne Apache en tant que développeur PHP

javascriptapachereactjs
29
vishal dharankar

En fin de compte, j'ai pu comprendre, j'espère juste que cela aidera quelqu'un comme moi.
Voici comment le fichier de configuration du pack Web devrait ressembler à vérifier le répertoire de dist et le fichier de sortie spécifiés. Je manquais le moyen de spécifier le chemin du répertoire dist

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;

Puis le paquet json

{
  "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"
  }
}

Notez la section script et la section production, la section production est ce qui vous donne le fichier index.js déployable final (le nom peut être n'importe quoi)

Le reste dépendra de votre code et de vos composants

Exécuter la séquence de commandes suivante

npm installer

cela devrait vous donner toute la dépendance (modules de noeud)

ensuite

npm run production

cela devrait vous donner le fichier final index.js qui contiendra tout le code fourni

Une fois cela fait, placez les fichiers index.html et index.js sous le répertoire www/html ou le répertoire racine de l'application Web, et c'est tout.

30
vishal dharankar

Tout d’abord, allez dans votre dossier packages.json et mettez cette ligne de code pour correspondre à votre adresse de domaine réelle:

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

Deuxièmement, allez au terminal dans le dossier de votre projet et tapez:

npm run build

vous verrez maintenant que dans les structures de dossiers du projet, il existe un dossier build.

Seul celui que vous transférez sur votre serveur à l’aide de filezilla.

24
aldobsom

Comme indiqué dans le post, React est une technologie basée sur un navigateur. Il ne rend qu'une vue dans un document HTML.

Pour pouvoir accéder à votre "application React", vous devez:

  1. Regroupez votre application React dans un ensemble
  2. Faites en sorte qu'Apache pointe votre fichier html sur votre serveur et autorise l'accès en externe.

Vous pouvez avoir toutes les informations ici: https://httpd.Apache.org/docs/trunk/getting-started.html pour le serveur Apache, et ici pour faire votre paquet javascript https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

6
Remi Marenco

Avant de construire le npm,
1) Allez dans le dossier racine de votre projet React et ouvrez package.json.
2) Ajouter l'attribut "homepage" à package.json

  • si vous voulez fournir absolu chemin

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

  • si vous voulez fournir relatif chemin

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

    L'utilisation de la méthode de chemin relatif peut avertir une erreur de validation de la syntaxe dans votre IDE. Mais la compilation est faite sans aucune erreur lors de la compilation.

3) Enregistrez le package.json et, dans le terminal, exécutez npm run-script build
4) Copiez le contenu du dossier build/ dans votre répertoire de serveur.

PS: Il est facile d’utiliser la méthode du chemin relatif si vous souhaitez modifier fréquemment l’emplacement du fichier de construction sur votre serveur.

3
kavinda

Vous pouvez l'exécuter via le proxy Apache, mais il devrait s'exécuter dans un répertoire virtuel (par exemple, http: //mysite.something/myreactapp ).

Cela peut sembler un peu redondant, mais si vous avez d'autres pages qui ne font pas partie de votre application React (par exemple, PHP pages), vous pouvez tout servir via le port 80 et le faire apparaître le tout est un site Web cohérent.

1.) Lancez votre application de réaction avec npm run ou la commande que vous utilisez pour démarrer le serveur de noeud. En supposant qu'il fonctionne sur http://127.0.0.1:808

2.) Éditez httpd-proxy.conf et ajoutez:

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.) Redémarrez Apache

2
Peter Drinnan