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

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

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

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

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,输入以下命令,若能看到版本号,则表示安装成功:

    bash 复制代码
    node -v
    npm -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)。

  1. 启动与管理 :直接双击 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防火墙:在服务器内部,也可能需要添加入站规则来允许这些端口的访问。不过,配置了云服务商的安全组后,这一步通常可以省略。

💡 总结与建议

一个清晰的部署流程大致是这样的:

  1. 环境准备:远程连接到Windows云服务器。
  2. 安装核心:安装Node.js并验证。
  3. 部署后端 :上传Node.js代码 -> 安装依赖(或上传 node_modules)-> 使用PM2启动并注册为服务。
  4. 部署前端 :本地打包Vue项目(npm run build)-> 上传 dist 文件夹 -> 配置Nginx/IIS指向该文件夹并设置反向代理。
  5. 配置安全组:放行80和你的后端API端口。
  6. 验证 :通过浏览器访问你的公网IP,查看应用是否正常运行。

相关推荐
A黄俊辉A3 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
honkun63 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19913 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net
雪芽蓝域zzs3 天前
第26章:ECharts 自定义主题 + 页面一键切换主题(深色 / 浅色两套)
vue.js·echars
雪芽蓝域zzs3 天前
第22章:ECharts 图表联动(多图表交互联动)
vue.js·echars
daols883 天前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载
vue.js·vxe-table
雪芽蓝域zzs3 天前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip
vue.js·echars
雪芽蓝域zzs3 天前
第24章:ECharts 地图组件(基础行政区地图,若依 Vue3)
vue.js·echars
计算机毕设定制辅导-无忧学长3 天前
《基于Vue的流浪动物救助中心管理系统的设计与实现》
java·vue.js·spring boot·流浪动物救助中心管理系统