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

王林
Libérer: 2023-05-08 10:27:07
original
1179 Les gens l'ont consulté

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal