使用node部署多个前端项目并实现后端接口转发

在 Node.js 服务器中部署前端文件,并且需要转发后端接口请求的情况下,可以使用代理服务器或中间件来实现接口的转发。可以使用 http-proxy-middleware 中间件来转发接口请求.

1. 安装 express:

复制代码
npm install express

2.安装 http-proxy-middleware

复制代码
npm install http-proxy-middleware

3.创建一个 Node.js 服务器,使用 express 框架和 http-proxy-middleware 中间件

php 复制代码
const express = require('express');
const path = require('path');
const { createProxyMiddleware } = require('http-proxy-middleware');
​
const app = express();
const port = 3000;
​
// 静态文件目录,假设前端代码构建后的文件在 "dist" 目录中
app.use(express.static(path.join(__dirname, 'dist')));
​
// 设置代理,将以 "/api" 开头的请求转发到后端服务器
app.use('/api', createProxyMiddleware({ target: 'http://backend-api-server', changeOrigin: true }));
​
// 所有路由都返回 index.html,交由前端路由处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
​
// 启动服务器
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});
​
  • express.static 中间件用于提供静态文件服务。
  • createProxyMiddleware 用于设置代理,将以 "/api" 开头的请求转发到后端 API 服务器。你需要将 'http://backend-api-server' 替换为实际的后端 API 地址。
  • 对于其他路由,都返回前端的 index.html,由前端路由处理。

4.部署多个前端工程

javascript 复制代码
const express = require('express');
const path = require('path');
const { createProxyMiddleware } = require('http-proxy-middleware');
​
const app1 = express();
const app2 = express();
const port = 3000;
​
// 静态文件目录,假设前端代码构建后的文件在各自的 "dist" 目录中
app1.use(express.static(path.join(__dirname, 'frontend1', 'dist')));
app2.use(express.static(path.join(__dirname, 'frontend2', 'dist')));
​
// 路由配置
app1.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend1', 'dist', 'index.html'));
});
​
app2.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend2', 'dist', 'index.html'));
});
​
// 设置代理,将以 "/api" 开头的请求转发到后端服务器
app.use('/api', createProxyMiddleware({ target: 'http://backend-api-server', changeOrigin: true }));
​
// 启动服务器
app1.listen(port + 1, () => {
  console.log(`Frontend 1 is running at http://localhost:${port + 1}`);
});
​
app2.listen(port + 2, () => {
  console.log(`Frontend 2 is running at http://localhost:${port + 2}`);
});
​

确保你的前端工程文件结构类似如下:

lua 复制代码
project-root
|-- frontend1
|   `-- dist
|       |-- index.html
|       |-- ...
|-- frontend2
|   `-- dist
|       |-- index.html
|       |-- ...
|-- server.js

5.在后台运行node服务

在 Linux 中,你可以使用 nohup 命令将 Node.js 服务在后台运行。

5.1 打开终端,进入到你的 Node.js 项目目录

5.2 运行以下命令

bash 复制代码
nohup node your_server_file.js &
  • your_server_file.js 是你的 Node.js 服务器入口文件。
  • nohup 是一个命令,用于使命令在后台运行,并忽略挂断信号。
  • & 表示将命令放到后台运行。

5.3 检查是否成功启动,可以查看 nohup.out 文件

bash 复制代码
cat nohup.out

这个文件会包含 Node.js 服务器的输出日志.

如果你希望后台运行的同时保存日志,可以使用 nohup 的输出重定向

bash 复制代码
nohup node your_server_file.js > your_log_file.log 2>&1 &

your_log_file.log 是你想要保存日志的文件名。

在生产环境中,可能需要使用更高级的工具来管理 Node.js 进程,例如 pm2。 pm2 提供了更多的功能,如进程守护、自动重启、性能监控等,可以更方便地管理 Node.js 应用。

6. 使用pm2来管理node应用

pm2 是一个强大的 Node.js 进程管理工具,它提供了许多有用的功能,如进程守护、自动重启、性能监控等.

6.1 安装 pm2

复制代码
npm install -g pm2

6.2 启动 Node.js 应用

sql 复制代码
pm2 start your_server_file.js

6.3 查看运行中的进程列表

复制代码
pm2 list

6.4 停止应用

arduino 复制代码
pm2 stop your_app_name_or_id

your_app_name_or_id 是你启动的应用的名称或 ID,可以在 pm2 list 中查看。

6.5 重启应用

复制代码
pm2 restart your_app_name_or_id

6.6 删除应用

arduino 复制代码
pm2 delete your_app_name_or_id

6.7 查看日志

复制代码
pm2 logs your_app_name_or_id

6.8 监控应用性能

复制代码
pm2 monit

这将打开一个监控界面,显示应用的 CPU 和内存使用情况。

6.9 自动启动

复制代码
pm2 startup

使用命令将应用设置为系统启动时自动启动

相关推荐
沉默小管1 天前
我用 NestJS + Nuxt 3 做了个导航站,聊几个踩过的坑
node.js·seo
非优秀程序员2 天前
第02章 杭电的英语老师与一台服务器|《互联网产品恩仇录》
数据库·node.js·代码规范
Hone2 天前
juejin-skills 系列 ②:我把「看掘金热榜」也做成了 Agent 技能
开源·node.js·ai编程
w16632 天前
零 Root 无 PC:我让 AI 在手机上把鸿蒙 HDC 协议的底裤扒了下来
node.js
严肃小白兔4 天前
TanStack Router 更新构建工具链:Node.js 兼容性、路由分割与前端工程实践
前端·node.js·状态模式
一缕82年的清风4 天前
用了 3 年 Notion 和 Obsidian 后,为什么我最终把所有身家搬到了思源笔记?
node.js
Dumbness4 天前
一份 JSON 生成增删改查接口,入参清洗漏了什么:Number(" ") 是 0,搜 100% 把 1000 元券也搜出来
node.js·express
FungLeo6 天前
成为全栈·基础补充·Node.js 运行时:事件循环与异步
javascript·node.js·事件循环·后端开发·异步编程·成为全栈
用户087308654876 天前
用 GUI 自动化写了一个群聊 AI:5 个真实事故,和 7 条让 AI 不像机器人的设计
node.js
Dumbness7 天前
毕设后台导出 CSV 的 4 个坑:date 字段漏了公式防护,搜索框输入 % 能扫全表
node.js·express