服务器 部署 前端应用 nginx/node.js

Node.js 是一个应用运行时环境，用于构建和运行应用程序（尤其是服务器端 JavaScript 应用）。

Nginx 是一个 Web 服务器和反向代理，用于服务静态内容、负载均衡和管理连接。

 

特性维度	Node.js	Nginx
本质	应用平台/运行时环境	Web 服务器 / 反向代理 / 负载均衡器
主要角色	动态内容生成者 (执行业务逻辑、连接数据库、API)	静态内容服务者 和 流量调度员 (反向代理、负载均衡)
编程语言	JavaScript	C
并发模型	事件驱动、异步非阻塞 I/O (单线程)	事件驱动 (多进程/多线程工作池，高效处理大量并发连接)
擅长处理	I/O 密集型应用 (实时应用、API、微服务)	高并发、静态内容、SSL 终结、缓存
不擅长处理	CPU 密集型任务 (会阻塞主线程)	执行业务逻辑 (它本身不运行应用代码)
配置方式	通过 JavaScript 代码 编写应用逻辑	通过 文本配置文件 (nginx.conf) 定义服务器行为

 

第一步：本地构建 Vue 项目

在你的本地开发环境中，打开终端，进入你的 Vue 项目根目录（包含 package.json 文件的目录）。

1. 安装依赖（如果你之前没安装过）：

   bash

   npm install

2. 构建项目，生成用于生产环境的静态文件：

   bash

   npm run build

   或者，如果你使用的是 Vue CLI 创建的项目，它通常也是：

   bash

   npm run build

   对于 Vite 项目，命令同样是：

   bash

   npm run build

3. 构建完成后，项目根目录下会生成一个 dist 文件夹。这个文件夹里的所有内容就是你需要上传到服务器的静态文件。

关键点：dist 目录通常包含：

• index.html：入口文件

• js 目录：存放编译后的 JavaScript 文件

• css 目录：存放编译后的 CSS 文件

• assets 目录：存放静态资源（如图片、字体）

 

第二步：上传文件到服务器

将两个项目的 dist 文件夹内容上传到服务器不同的目录。

bash

# 创建目录
sudo mkdir -p /var/www/project-a
sudo mkdir -p /var/www/project-b

# 上传文件 (从本地机器执行 SCP 命令)
# scp -r ./project-a/dist/* user@server_ip:/var/www/project-a/
# scp -r ./project-b/dist/* user@server_ip:/var/www/project-b/

第三步：配置 Nginx

编辑一个新的配置文件，例如 /etc/nginx/sites-available/vue-projects。

# 第一个项目 (监听默认的 80 端口)
server {
    listen 80;
    server_name your_server_ip; # 或你的域名 projectA.com

    root /var/www/project-a;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 第二个项目 (监听 8080 端口)
server {
    listen 8080;
    server_name your_server_ip; # 同上，因为是不同端口，server_name 可以一样

    root /var/www/project-b;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

启用配置并重启 Nginx：

bash

sudo ln -s /etc/nginx/sites-available/vue-projects /etc/nginx/sites-enabled/
sudo nginx -t # 测试配置
sudo systemctl restart nginx

1. 访问：

   • 项目A: http://your_server_ip:80 (或直接 http://your_server_ip)

   • 项目B: http://your_server_ip:8080