当前位置：首页 > news >正文

全栈vue/react+node.js，云服务器windows部署全流程

news 2026/3/26 18:00:18

全栈vue/react+node.js，云服务器windows部署全流程

记录一下前端全栈项目部署云服务器全流程
- vue/react+node.js，云服务器windows需要安装什么环境和软件
- - 🔧 核心运行环境：Node.js
  - - 方案1，使用nvm管理node版本：（推荐）
    - 方案2，直接安装node.js：
  - 🌐 Web服务器：
  - ⚙️ 辅助工具：数据库与自定义脚本bat文件
  - 🔑 最后一步：安全组与防火墙配置
  - 💡 总结与建议

记录一下前端全栈项目部署云服务器全流程

这是我第一次使用部署云服务器，记录下文档，希望能帮助到屏幕前的你，也为了方便自己后期查阅。欢迎你评论区留言，我们一起讨论云服务器使用心得。

vue/react+node.js，云服务器windows需要安装什么环境和软件

在Windows云服务器上部署项目，需要安装和配置的环境与软件主要分为运行环境、Web服务器和辅助工具三大块。

类别	所需软件/环境	核心作用
运行环境	Node.js	核心运行时。负责运行你的Node.js后端代码和npm等工具。
Web服务器	Nginx或IIS	前端托管与反向代理。用于托管Vue.js打包后的静态文件，并将API请求转发给你的Node.js后端。
辅助工具	数据库(如Mongodb)	数据持久化。如果你的应用需要存储数据，就需要安装对应的数据库系统。
版本管理工具(如Git)	代码拉取与更新。方便从代码仓库拉取项目源码和后续更新。

🔧 核心运行环境：Node.js

这是整个部署的基石，所有操作都依赖于它。

方案1，使用nvm管理node版本：（推荐）

具体步骤请看文章：Windows上安装nvm

方案2，直接安装node.js：

安装方式：最简单的方式是访问 Node.js官网，下载Windows系统的LTS（长期支持版）安装包（.msi文件）。
关键步骤：在安装向导中，务必勾选“Add to PATH”选项，这会将Node.js和npm自动添加到系统环境变量中，让你可以在命令行直接使用node和npm命令。
验证方法：安装完成后，打开命令提示符（CMD）或PowerShell，输入以下命令，若能看到版本号，则表示安装成功：
```
node-vnpm-v
```

🌐 Web服务器：

你需要选择一个Web服务器来托管你的Vue.js前端项目。

Nginx
1.下载与安装：从Nginx官网下载Windows版本的压缩包，解压到你希望的目录（如C:\nginx）即可，无需执行安装程序。
2.配置Vue项目：将Vue项目打包生成的dist文件夹内容，复制到Nginx的html目录下（或你指定的任何目录）。然后，修改conf目录下的nginx.conf文件。
*关键配置：
*root：指向你的Vue项目文件路径。
*try_files：添加try_files $uri $uri/ /index.html;配置，以解决Vue单页应用路由刷新后404的问题。
*location /api/：配置反向代理，将对/api开头的请求转发给你的Node.js后端服务（例如http://localhost:3000）。
3.启动与管理：直接双击nginx.exe或在命令行进入Nginx目录执行start nginx即可启动。后续修改配置后，可用nginx -s reload命令重新加载。

⚙️ 辅助工具：数据库与自定义脚本bat文件

为了让你的Node.js后端稳定运行，数据库和服务自动启动至关重要。

安装数据库并配置自启动：
- 已数据库MongoDB举例，下载、安装，在“服务”管理器（services.msc）中，找到 MongoDB 服务，设置为启动方式为自动。具体安装教程您可以参考文章：Windows安装MongoDB
配置node接口服务自启动：
- 在node服务所在文件夹建一个自定义bat文件，例如start.bat，配置本地路径和启动命令
- 执行创建定时计划命令
  – 计划名称User Startup 和 bat文件路径，命令如下
```
schtasks /create /tn "User Startup" /tr "C:\Users\Administrator\Desktop\user-admin\start.bat" /sc onstart /ru "SYSTEM" /f
```
  – 运行即可看到成功创建计划提示

配置Nginx自启动：

和配置node服务自启动类似，开机自启

schtasks /create /tn "Nginx Startup" /tr "C:\nginx\start.bat" /sc onstart /ru SYSTEM

如果想查看运行状态
```
schtasks /query /tn "Nginx Startup"
```
手动运行任务
```
schtasks /run /tn "Nginx Startup"
```
如果想删除运行任务
```
schtasks /delete /tn "Nginx Startup" /f
```

🔑 最后一步：安全组与防火墙配置

无论你安装了什么软件，最后一步都是放行端口。

云服务商安全组：登录你的云服务器管理控制台，找到“安全组”或“防火墙”配置。添加入方向规则，放行你项目所需的端口。例如：Vue前端通过Nginx访问，需要放行80（HTTP）和443（HTTPS）端口；Node.js后端服务则需要放行其监听的自定义端口（如3000）。
Windows防火墙：在服务器内部，也可能需要添加入站规则来允许这些端口的访问。不过，配置了云服务商的安全组后，这一步通常可以省略。