J'ai créé un back-end en utilisant Node Express qui fonctionne sur port 5000 . Et mon front-end utilisant React Js qui fonctionne sur port 3000 . Et les deux sont dans différents dossiers du répertoire racine.
Je souhaite télécharger les deux et les déployer sur Digital Ocean Server. Je suis nouveau dans ce processus de département. Comment puis-je déployer les deux sur le serveur et les exécuter par une seule commande, s'il vous plaît
3 Réponses :
Si votre front-end est create react app, vous pouvez effectuer npm run build et diffuser des ressources statiques dans nodejs via nodejs sur le même serveur. Il servira les morceaux minifiés.
app.use (express.static (path.join (__ dirname, '../client/build')));
Actuellement, j'utilise npm start pour React. Seul npm run build est suffisant pour Node et React?
Vous pouvez rendre votre application react côté serveur à partir de votre Node.js / Express, je pense que vous utilisez actuellement webpack pour rendre votre application react sur le port 3000. Si vous pouvez télécharger votre code pour jeter un coup d'œil, il sera plus facile de aide
Comment utiliser webpack?
Je pense que vous utilisez déjà webpack, c'est un bundler d'actifs et a également des plugins l'un d'eux appelé dev server où vous pouvez servir votre application react, le plus simple est de vérifier si vous avez webpack.config.js et si vous avez webpack npm dépendance
Non, je n'ai pas utilisé webpack. Comment l'utiliser?
Je vous suggère donc de l'utiliser, surtout si vous prévoyez de le mettre en production, je pense que ce sera un autre sujet avec une longue réponse, donc je ferai de mon mieux ici pour vous aider à démarrer. Vous devrez installer webpack en tant que dépendance dev, puis créer webpack.config.js avec un objet de configuration qui correspond à votre application, comme par exemple module.exports = {mode: "production", // "production" | "développement" | "none" // Le mode choisi indique à Webpack d'utiliser ses optimisations intégrées en conséquence. entrée: "./app/entry", // chaîne | objet | array // par défaut à './src' // Ici l'application démarre
voici le fichier de configuration plus complet webpack.js.org/configuration
Alors, dois-je installer le module webpack ?
Voici une façon de le faire (en utilisant le serveur de nœuds pour servir d'API pour le site Web React servi par le serveur Apache).
Vous pouvez laisser nodejs en cours d'exécution sur le port 5000 (sur le serveur distant) mais assurez-vous que vous n'utilisent pas localhost mais 0.0.0.0.
ie. app.listen (5000, "0.0.0.0") ;
Maintenant, vous devriez pouvoir communiquer avec le serveur de nœud via le nom IP / DNS public sur ce port, c'est-à-dire. myPublicIpOrDNSname: 5000 . (en supposant que vous ayez installé nodejs ainsi que npm => faites attention à la version, apt-get install nodejs , par défaut, récupérera une version plus ancienne)
Si vous avez besoin d'une version plus récente de nodejs , vous pouvez la récupérer en suivant ces étapes (vous pouvez remplacer cette partie setup_8.x avec votre version préférée).
<Directory "/var/www/html">
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
Utilisez le serveur Apache2 pour servir vos fichiers statiques (React, css, ...) (vous n'avez pas besoin d'exécuter create -react-app server ).
sudo apt-get update sudo apt-get install apache2
Construisez votre projet React en utilisant npm run build , puis placez les fichiers qui ont été créés dans le dossier / build (dans le dossier React) vers / var / www / html (sur le serveur distant). Notez que vous devez y placer les fichiers et dossiers du dossier / build , pas du dossier / build lui-même.
Vous devriez maintenant pouvoir voir votre site Web réagit en cours d'exécution lorsque vous tapez l'adresse myPublicIpOrDNSname (en supposant qu'Apache exécute sudo systemctl start apache2 ).
Pour qu'Apache fonctionne correctement (si vous utilisez le routage frontal - c'est-à-dire react-router-dom ), vous devez aller dans /etc/apache2/sites-enabled/000-default.conf et placez cette configuration
cd ~ curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt-get install nodejs
sous la section de ce fichier. (Apache ne connaît pas vos routes React. Cela le fera pousser toutes les requêtes qu'il ne sait pas gérer à la racine et laisser React gérer le routage)
Ensuite, vous devez vous assurer que RewriteEngine est en cours d'exécution (sinon vous obtiendrez une erreur lors du redémarrage du serveur Apache).
sudo a2enmod rewrite
Enfin, redémarrez le serveur Apache
sudo /etc/init.d/apache2 restart
Maintenant, cela devrait fonctionner.
Notez que vous devez modifier vos appels ajax dans votre React avec la nouvelle adresse IP / DNS publique.
Le serveur utilise localhost . Comment le changer en 0.0.0.0
@testteam À l'endroit où vous démarrez votre serveur (ie. index.js), vous avez une ligne app.listen (5000, ...) ou server.listen (5000) < / code> ou server.listen (port, ...) ou quelque chose de similaire avec la méthode listen . Ajoutez simplement 0.0.0.0 comme deuxième argument à cette méthode ( ie. App.listen (5000, "0.0.0.0") )