Maison interface Web Questions et réponses frontales Nodejs déploie des projets front-end sur le serveur

Nodejs déploie des projets front-end sur le serveur

May 08, 2023 am 10:27 AM

Dans le développement front-end, Node.js est devenu un rôle très important. Cela nous aide non seulement à gérer les dépendances, mais nous aide également à créer un serveur pratique et facile à utiliser pour le débogage lors du développement local. Mais lors de la mise en place du projet front-end dans l'environnement de production, nous devons déployer le serveur Node.js pour garantir que notre projet puisse fonctionner correctement sur le serveur.

Cet article expliquera comment utiliser Node.js pour déployer des projets front-end sur le serveur. Il comprend principalement les étapes suivantes :

  1. Confirmer l'environnement du serveur

Avant le déploiement, nous devons confirmer si le serveur a installé le Node. environnement js. S'il n'est pas installé, vous pouvez suivre les étapes ci-dessous pour l'installer :

  • Ouvrez le terminal et entrez la commande suivante pour installer Node.js :
sudo apt install nodejs
Copier après la connexion
    #🎜🎜 #Confirmez si l'installation a réussi, entrez la commande suivante pour vérifier la version de Node.js :
node -v
Copier après la connexion
Si le numéro de version de Node.js apparaît, cela signifie qu'il a été installé avec succès.

    Confirmer les dépendances du projet front-end
Pour déployer un projet front-end, vous devez confirmer si toutes les bibliothèques ou plug-ins dont dépend le projet ont été installés. Vous pouvez afficher toutes les dépendances en exécutant la commande suivante dans votre environnement de développement local :

npm list
Copier après la connexion
Cette commande listera toutes les bibliothèques et leurs dépendances dans le dossier node_modules. Si les dépendances changent, vous devez mettre à jour via la commande suivante :

npm install
Copier après la connexion
Copier après la connexion
    node_modules 文件夹中所有的库及其依赖关系。如果依赖关系有变化,你需要通过以下命令进行更新:
    const express = require('express')
    const app = express()
    
    app.use(express.static('public'))
    
    app.listen(3000, () => {
      console.log('App listening on port 3000!')
    })
    Copier après la connexion
    1. 编写服务器脚本

    当服务器环境和前端项目依赖关系都确认好后,我们需要编写一个脚本来启动服务器。以下是一个简单的 Node.js 服务器脚本代码示例:

    app.get('*', function(req, res) {
      res.sendFile(path.join(__dirname, 'public/index.html'))
    })
    Copier après la connexion

    该示例代码使用了 Express 框架,将 public 文件夹中的静态文件(例如 HTML、CSS 和 JavaScript)暴露在服务器上。在浏览器中访问 localhost:3000,即可查看静态文件。

    如果你的前端应用是单页面应用(SPA),你可能需要让所有路由都指向 index.html,而不是尝试加载路由对应的 HTML 文件。下面是通过 Node.js 配置路由映射的代码示例:

    sudo apt-get install git
    Copier après la connexion

    上面这个代码片段将为所有请求配置相同的响应,即在目录 public 中查找 index.html 并将其作为响应返回。

    1. 部署项目到服务器

    将代码部署到服务器上,最好的方式就是使用 Git。以下是示例步骤:

  • 在服务器上通过 SSH 连接到 Git 仓库,首先需要安装 Git:
mkdir project_name && cd project_name
Copier après la connexion
  • 创建项目文件夹:
git clone git@github.com:<your_username>/<your_repository_name>.git ./
Copier après la connexion
  • 克隆项目:
npm install
Copier après la connexion
Copier après la connexion
  • 安装依赖库:
cp /path/to/server.js ./
Copier après la connexion
  • 将服务器脚本拷贝到项目文件夹:
sudo npm install pm2 -g
Copier après la connexion
  1. 使用 PM2 管理服务器

在完成以上步骤后,就可以使用 Node.js 在服务器上运行应用了。但是,如果服务器发生崩溃或者应用出现异常,你可能需要手动重启服务器和应用。因此,我们需要使用一个进程管理器,PM2 就是一个很好的选择。

首先需要在服务器上安装 PM2:

pm2 start server.js --name=<app_name>
Copier après la connexion

接下来,我们使用 PM2 命令在后台运行服务器:

pm2 list
Copier après la connexion

其中 app_nameWrite server script

When l'environnement du serveur et Une fois les dépendances du projet front-end confirmées, nous devons écrire un script pour démarrer le serveur. Voici un exemple simple de code de script de serveur Node.js :

pm2 stop <app_name>
Copier après la connexion
Cet exemple de code utilise le framework Express pour convertir des fichiers statiques (tels que HTML, CSS) dans le format public. dossier et JavaScript) sont exposés sur le serveur. Visitez localhost:3000 dans le navigateur pour afficher les fichiers statiques.

Si votre application frontale est une application monopage (SPA), vous devrez peut-être que toutes les routes pointent vers index.html au lieu d'essayer de charger le fichier HTML correspondant à l'itinéraire. Ce qui suit est un exemple de code pour configurer le mappage d'itinéraire via Node.js : #🎜🎜#
pm2 restart <app_name>
Copier après la connexion
#🎜🎜#L'extrait de code ci-dessus configurera la même réponse pour toutes les requêtes, c'est-à-dire qu'il recherchera public >index.html et renvoyez-le comme réponse. #🎜🎜#
    #🎜🎜#Déployer le projet sur le serveur#🎜🎜##🎜🎜##🎜🎜#La meilleure façon de déployer le code sur le serveur est d'utiliser Git. Voici quelques exemples d'étapes : #🎜🎜##🎜🎜##🎜🎜# Connectez-vous au référentiel Git via SSH sur le serveur Vous devez d'abord installer Git : #🎜🎜##🎜🎜#rrreee#🎜🎜##. 🎜🎜#Créer un dossier de projet : #🎜🎜##🎜🎜#rrreee#🎜🎜##🎜🎜#Cloner le projet : #🎜🎜##🎜🎜#rrreee#🎜🎜##🎜🎜#Installer les bibliothèques dépendantes : #🎜 🎜## 🎜🎜#rrreee#🎜🎜##🎜🎜#Copiez le script du serveur dans le dossier du projet : #🎜🎜##🎜🎜#rrreee
      #🎜🎜#Utilisez PM2 pour gérer le serveur#🎜🎜# #🎜🎜##🎜🎜#Après avoir terminé les étapes ci-dessus, vous pouvez utiliser Node.js pour exécuter l'application sur le serveur. Toutefois, si le serveur tombe en panne ou si l'application se comporte anormalement, vous devrez peut-être redémarrer manuellement le serveur et l'application. Par conséquent, nous devons utiliser un gestionnaire de processus, et PM2 est un bon choix. #🎜🎜##🎜🎜#Vous devez d'abord installer PM2 sur le serveur : #🎜🎜#rrreee#🎜🎜#Ensuite, nous utilisons la commande PM2 pour exécuter le serveur en arrière-plan : #🎜🎜#rrreee#🎜🎜 #où app_name est le nom que vous donnez à votre projet. Vous pouvez consulter la liste des applications exécutées par PM2 à l'aide de la commande suivante : #🎜🎜#rrreee#🎜🎜#Fermez l'application à l'aide de la commande suivante : #🎜🎜#rrreee#🎜🎜#Redémarrez l'application à l'aide de la commande suivante : # 🎜🎜#rrreee#🎜 🎜#Dans cet article, nous expliquons comment utiliser Node.js pour déployer des projets front-end sur le serveur. Armé de ces connaissances, vous devriez être en mesure de déployer en douceur votre projet front-end dans un environnement de production et de gérer le processus via PM2. #🎜🎜#

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Expliquez le concept de chargement paresseux. Expliquez le concept de chargement paresseux. Mar 13, 2025 pm 07:47 PM

Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Mar 19, 2025 pm 04:16 PM

L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.

See all articles