Nodejs stellt Front-End-Projekte auf dem Server bereit

In der Front-End-Entwicklung ist Node.js zu einer sehr wichtigen Rolle geworden. Es hilft uns nicht nur bei der Verwaltung von Abhängigkeiten, sondern hilft uns auch beim Aufbau eines praktischen und benutzerfreundlichen Servers zum Debuggen bei der lokalen Entwicklung. Aber wenn wir das Front-End-Projekt in die Produktionsumgebung stellen, müssen wir den Node.js-Server bereitstellen, um sicherzustellen, dass unser Projekt reibungslos auf dem Server laufen kann.

In diesem Artikel wird erklärt, wie Sie Node.js verwenden, um Front-End-Projekte auf dem Server bereitzustellen. Es umfasst hauptsächlich die folgenden Schritte:

1. Bestätigen Sie die Serverumgebung

Vor der Bereitstellung müssen wir bestätigen, ob die Node.js-Umgebung auf dem Server installiert wurde. Wenn es nicht installiert ist, können Sie die folgenden Schritte ausführen, um es zu installieren:

• Öffnen Sie das Terminal und geben Sie den folgenden Befehl ein, um Node.js zu installieren:

sudo apt install nodejs

• Bestätigen Sie, ob die Installation erfolgreich war, geben Sie den folgenden Befehl ein Überprüfen Sie die Node.js-Version:

node -v

Wenn die Node.js-Versionsnummer angezeigt wird, bedeutet dies, dass sie erfolgreich installiert wurde.

2. Front-End-Projektabhängigkeiten bestätigen

Um ein Front-End-Projekt bereitzustellen, müssen Sie bestätigen, ob alle Bibliotheken oder Plug-Ins, von denen das Projekt abhängt, installiert wurden. Sie können alle Abhängigkeiten anzeigen, indem Sie den folgenden Befehl in Ihrer lokalen Entwicklungsumgebung ausführen:

npm list

Dieser Befehl listet alle Bibliotheken und ihre Abhängigkeiten im Ordner node_modules auf. Wenn sich die Abhängigkeiten ändern, müssen Sie sie mit dem folgenden Befehl aktualisieren: node_modules 文件夹中所有的库及其依赖关系。如果依赖关系有变化，你需要通过以下命令进行更新：

npm install

3. 编写服务器脚本

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

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

app.use(express.static('public'))

app.listen(3000, () => {
  console.log('App listening on port 3000!')
})

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

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

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

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

4. 部署项目到服务器

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

• 在服务器上通过 SSH 连接到 Git 仓库，首先需要安装 Git：

sudo apt-get install 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 ./

5. 使用 PM2 管理服务器

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

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

sudo npm install pm2 -g

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

pm2 start server.js --name=<app_name>

其中 app_name

pm2 list

Schreiben Sie ein Serverskript

Nachdem die Serverumgebung und die Front-End-Projektabhängigkeiten bestätigt wurden, müssen wir schreiben ein Skript zum Starten des Servers. Das Folgende ist ein einfaches Codebeispiel für ein Node.js-Serverskript:

pm2 stop <app_name>

Nach dem Login kopieren

Dieser Beispielcode verwendet das Express-Framework, um statische Dateien (wie HTML, CSS und JavaScript) im Ordner public für den Server verfügbar zu machen Vorgesetzter. Besuchen Sie localhost:3000 im Browser, um die statischen Dateien anzuzeigen.

🎜Wenn es sich bei Ihrer Front-End-Anwendung um eine Single-Page-Anwendung (SPA) handelt, müssen Sie möglicherweise dafür sorgen, dass alle Routen auf index.html verweisen, anstatt zu versuchen, die der Route entsprechende HTML-Datei zu laden. Hier ist ein Codebeispiel für die Konfiguration der Routenzuordnung über Node.js: 🎜

pm2 restart <app_name>

Nach dem Login kopieren
🎜Das obige Code-Snippet konfiguriert die gleiche Antwort für alle Anfragen, d. h. suchen Sie nach index.html im Verzeichnis <code>public code> code> und geben Sie ihn als Antwort zurück. 🎜<ol start="4">🎜Stellen Sie das Projekt auf dem Server bereit🎜🎜🎜Der beste Weg, den Code auf dem Server bereitzustellen, ist die Verwendung von Git. Im Folgenden finden Sie Beispielschritte: 🎜🎜🎜 Stellen Sie über SSH eine Verbindung zum Git-Repository auf dem Server her. Zuerst müssen Sie Git installieren: 🎜🎜rrreee🎜🎜Erstellen Sie den Projektordner: 🎜🎜rrreee🎜🎜Klonen Sie das Projekt: 🎜🎜rrreee🎜 🎜Installieren Sie abhängige Bibliotheken: 🎜🎜rrreee🎜🎜Kopieren Sie das Serverskript in den Projektordner: 🎜🎜rrreee<ol start="5">🎜Verwenden Sie PM2, um den Server zu verwalten🎜🎜🎜Nach Abschluss der obigen Schritte können Sie Node verwenden .js, um die Anwendung auf dem Server auszuführen. Wenn jedoch der Server abstürzt oder sich die Anwendung ungewöhnlich verhält, müssen Sie möglicherweise den Server und die Anwendung manuell neu starten. Daher müssen wir einen Prozessmanager einsetzen, und PM2 ist eine gute Wahl. 🎜🎜Zuerst müssen Sie PM2 auf dem Server installieren:🎜rrreee🎜Als nächstes verwenden wir den PM2-Befehl, um den Server im Hintergrund auszuführen:🎜rrreee🎜wobei <code>app_name der Name ist, den Sie dem Projekt gegeben haben. Sie können den folgenden Befehl verwenden, um die Liste der Anwendungen anzuzeigen, die auf PM2 ausgeführt werden: 🎜rrreee🎜Verwenden Sie den folgenden Befehl, um die Anwendung zu schließen: 🎜rrreee🎜Verwenden Sie den folgenden Befehl, um die Anwendung neu zu starten: 🎜rrreee🎜In diesem Artikel erklären wir, wie um ein Front-End-Projekt mit Node.js auf dem Server bereitzustellen. Mit diesem Wissen sollten Sie in der Lage sein, Ihr Front-End-Projekt reibungslos in einer Produktionsumgebung bereitzustellen und den Prozess über PM2 zu verwalten. 🎜

Das obige ist der detaillierte Inhalt vonNodejs stellt Front-End-Projekte auf dem Server bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!