


Nodejs déploie des projets front-end sur le serveur
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 :
- 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
- #🎜🎜 #Confirmez si l'installation a réussi, entrez la commande suivante pour vérifier la version de Node.js :
node -v
- Confirmer les dépendances du projet front-end
npm list
node_modules
. Si les dépendances changent, vous devez mettre à jour via la commande suivante :
npm install
- 编写服务器脚本
- 部署项目到服务器
node_modules
文件夹中所有的库及其依赖关系。如果依赖关系有变化,你需要通过以下命令进行更新:const express = require('express') const app = express() app.use(express.static('public')) app.listen(3000, () => { console.log('App listening on port 3000!') })
当服务器环境和前端项目依赖关系都确认好后,我们需要编写一个脚本来启动服务器。以下是一个简单的 Node.js 服务器脚本代码示例:
app.get('*', function(req, res) { res.sendFile(path.join(__dirname, 'public/index.html')) })
该示例代码使用了 Express 框架,将 public
文件夹中的静态文件(例如 HTML、CSS 和 JavaScript)暴露在服务器上。在浏览器中访问 localhost:3000
,即可查看静态文件。
如果你的前端应用是单页面应用(SPA),你可能需要让所有路由都指向 index.html
,而不是尝试加载路由对应的 HTML 文件。下面是通过 Node.js 配置路由映射的代码示例:
sudo apt-get install git
上面这个代码片段将为所有请求配置相同的响应,即在目录 public
中查找 index.html
并将其作为响应返回。
将代码部署到服务器上,最好的方式就是使用 Git。以下是示例步骤:
- 在服务器上通过 SSH 连接到 Git 仓库,首先需要安装 Git:
mkdir project_name && cd project_name
- 创建项目文件夹:
git clone git@github.com:<your_username>/<your_repository_name>.git ./
- 克隆项目:
npm install
- 安装依赖库:
cp /path/to/server.js ./
- 将服务器脚本拷贝到项目文件夹:
sudo npm install pm2 -g
- 使用 PM2 管理服务器
在完成以上步骤后,就可以使用 Node.js 在服务器上运行应用了。但是,如果服务器发生崩溃或者应用出现异常,你可能需要手动重启服务器和应用。因此,我们需要使用一个进程管理器,PM2 就是一个很好的选择。
首先需要在服务器上安装 PM2:
pm2 start server.js --name=<app_name>
接下来,我们使用 PM2 命令在后台运行服务器:
pm2 list
其中 app_name
Write server script
pm2 stop <app_name>
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>
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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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.

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.

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.

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

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

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.

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é.

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.
