Comment empaqueter et déployer des projets Web à l'aide de Node.js

Node.js est une plate-forme open source dynamique qui fournit de nombreuses bibliothèques et outils utiles, ce qui en fait l'un des environnements préférés pour les applications Web modernes. Cet article explique comment utiliser Node.js pour empaqueter et déployer des projets Web.

1. Présentation

Avant d'emballer et de déployer des projets Web, nous devons d'abord comprendre certains concepts et outils de base. Node.js est un environnement d'exécution JavaScript côté serveur. Il utilise le moteur V8 pour interpréter et exécuter du code JavaScript. Vous pouvez l'utiliser pour créer des applications Web hautes performances et évolutives.

npm (Node Package Manager) est un gestionnaire de packages Node.js. Il nous aide à trouver, installer et gérer diverses dépendances pour développer des applications Web.

Webpack est un outil d'empaquetage puissant qui peut regrouper JavaScript, CSS, des images et d'autres fichiers pour le déploiement d'applications Web.

2. Installez Node.js et npm

Avant de commencer, vous devez installer Node.js et npm. Téléchargez le programme d'installation de Node.js sur le site officiel (https://nodejs.org) et suivez les instructions pour l'installer. npm est déjà fourni avec Node.js, pas besoin de l'installer séparément.

Une fois l'installation terminée, ouvrez l'outil de ligne de commande et entrez la commande suivante pour vérifier si Node.js et npm sont correctement installés.

$ node -v
$ npm -v

Si le numéro de version s'affiche correctement, cela signifie qu'il a été installé avec succès.

3. Créer un projet Web

Avant de commencer à emballer et à déployer le projet Web, nous devons d'abord créer un projet Web. Vous pouvez utiliser n'importe quel framework que vous connaissez, tel que React, Angular, Vue, etc.

Dans cet article, nous utiliserons le framework React comme exemple. Sur la ligne de commande, entrez la commande suivante pour créer un nouveau projet React.

$ npx create-react-app my-app

Parmi eux, "my-app" est le nom du projet, vous pouvez choisir votre propre nom en conséquence.

Une fois le projet React créé, entrez dans le répertoire du projet.

$ cd my-app

Dans le répertoire du projet, vous pouvez voir de nombreux fichiers et dossiers, notamment le fichier package.json, le dossier src et le dossier public. Parmi eux, le fichier package.json est le fichier de configuration du projet. Le dossier src contient le code source et les composants du projet. Le dossier public contient certaines ressources publiques, telles que des icônes et des modèles HTML.

4. Conditionner le projet React

Avant de commencer à déployer le projet React, nous devons le conditionner dans un package déployable. Webpack peut être utilisé pour accomplir cette tâche. Webpack peut regrouper JavaScript, CSS, des images et d'autres fichiers pour faciliter le déploiement d'applications Web.

Dans la ligne de commande, entrez la commande suivante pour installer Webpack.

$ npm install webpack webpack-cli --save-dev

Une fois l'installation terminée, créez un nouveau fichier de configuration Webpack. Dans le répertoire racine du projet, créez un fichier appelé webpack.config.js et ajoutez le code suivant.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

Ce fichier de configuration indique à Webpack que le fichier d'entrée est src/index.js et que le fichier emballé sera sorti vers dist/bundle.js.

Ensuite, dans la ligne de commande, entrez la commande suivante pour empaqueter le projet React.

$ npx webpack

Une fois l'empaquetage terminé, le bundle.js généré se trouve dans le dossier dist du répertoire racine du projet.

5. Déployer le projet React

Avant de déployer le projet React dans l'environnement de production, nous devons d'abord le tester. Vous pouvez utiliser Express.js comme serveur Web pour créer un serveur simple permettant de tester l'application React packagée.

Dans la ligne de commande, entrez la commande suivante pour installer Express.js.

$ npm install express --save

Une fois l'installation terminée, créez un fichier nommé server.js dans le répertoire racine du projet et ajoutez le code suivant.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(8080);

Ce code créera une application Express et servira l'application React packagée en tant que fichier statique. Accédez à http://localhost:8080 dans votre navigateur et vous devriez pouvoir voir l'application React en cours d'exécution.

6. Libérer le projet React

Après avoir testé avec succès le projet React, nous pouvons le déployer dans l'environnement de production. À ce stade, nous devons télécharger le projet sur le serveur Web afin qu'il soit accessible au public.

À ce stade, vous pouvez utiliser n'importe quel serveur Web pour héberger votre application React. Fusionnez simplement le dossier dist généré après l'empaquetage avec le répertoire racine Web du serveur.

7. Résumé

Dans cet article, nous avons expliqué comment empaqueter et déployer des projets React à l'aide de Node.js. Nous avons appris quelques concepts et outils de base tels que Node.js, npm, Webpack et Express.js. En suivant cet article, vous devriez pouvoir facilement empaqueter et déployer votre application React en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!