Windows 部署 Vue + Spring Boot 项目指南

环境准备

1. 系统要求

  • Windows Server 2012/2016/2019 或 Windows 10/11
  • 至少 4GB RAM(推荐 8GB+)
  • 至少 20GB 可用磁盘空间

2. 软件安装

Java 环境
# 下载并安装 JDK 17(LTS版本)
# 官方下载地址:https://www.oracle.com/java/technologies/downloads/
# 设置环境变量:
JAVA_HOME = C:\Program Files\Java\jdk-17.x.x
PATH = %JAVA_HOME%\bin;...
Node.js 环境
# 下载并安装 Node.js 16+ 和 npm
# 官方下载地址:https://nodejs.org/
# 验证安装:
node -v
npm -v
数据库(按需安装)
  • MySQL: https://dev.mysql.com/downloads/mysql/
  • PostgreSQL: https://www.postgresql.org/download/windows/
  • 或使用现有数据库服务器
Web 服务器(可选)
  • Nginx: https://nginx.org/en/download.html
  • Apache: https://httpd.apache.org/download.cgi

项目打包

1. 前端 Vue 项目打包

# 进入项目目录
cd frontend-project

# 安装依赖
npm install

# 生产环境打包
npm run build

# 打包后文件在 dist/ 目录下

2. 后端 Spring Boot 项目打包

# 进入项目目录
cd backend-project

# Maven 打包(跳过测试)
mvn clean package -DskipTests

# 打包后文件在 target/ 目录下,一般为 *.jar 文件

部署配置

1. 前端部署

使用 Nginx 部署(推荐)
  1. dist 目录内容复制到 Nginx 的 html 目录
  2. 配置 Nginx (conf/nginx.conf):
server {
    listen       80;
    server_name  your-domain.com;
    
    location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    # 代理 API 请求到后端
    location /api/ {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
直接部署(不使用 Web 服务器)
  • 可将 dist 目录内容直接放在后端项目的 static 目录中,由 Spring Boot 服务静态资源

2. 后端部署

运行 Jar 包
# 直接运行(前台运行)
java -jar your-application.jar

# 后台运行(使用批处理文件)
# 创建 run.bat 文件内容:
@echo off
java -jar your-application.jar > app.log 2>&1
echo %date% %time%: Application started >> service.log

# 如需配置启动参数,可添加:
java -Xms256m -Xmx1024m -jar your-application.jar --spring.profiles.active=prod
作为 Windows 服务运行(推荐)
  1. 使用 WinSW 工具
  2. 下载 WinSW 工具,重命名为 myapp.exe
  3. 创建同名 XML 配置文件 myapp.xml:
<service>
    <id>myapp</id>
    <name>My Application</name>
    <description>My Spring Boot Application</description>
    <executable>java</executable>
    <arguments>-jar "C:\app\your-application.jar"</arguments>
    <logmode>rotate</logmode>
</service>
  1. 安装服务:
myapp.exe install
myapp.exe start

防火墙配置

开放端口

# 开放 80 端口(HTTP)
netsh advfirewall firewall add rule name="HTTP" dir=in action=allow protocol=TCP localport=80

# 开放 443 端口(HTTPS)
netsh advfirewall firewall add rule name="HTTPS" dir=in action=allow protocol=TCP localport=443

# 开放后端应用端口(如 8080)
netsh advfirewall firewall add rule name="App8080" dir=in action=allow protocol=TCP localport=8080

# 查看已开放端口
netsh advfirewall firewall show rule name=all

关闭端口(如需)

netsh advfirewall firewall delete rule name="HTTP"

数据库配置

1. 创建生产数据库

CREATE DATABASE app_prod;
CREATE USER 'app_user'@'localhost' IDENTIFIED BY 'secure_password';
GRANT ALL PRIVILEGES ON app_prod.* TO 'app_user'@'localhost';
FLUSH PRIVILEGES;

2. 应用数据库配置

application-prod.properties 中配置:

spring.datasource.url=jdbc:mysql://localhost:3306/app_prod
spring.datasource.username=app_user
spring.datasource.password=secure_password
spring.jpa.hibernate.ddl-auto=update

日志配置

1. 后端日志

application-prod.properties 中配置:

logging.file.path=./logs
logging.file.name=app.log
logging.level.com.yourpackage=INFO

2. 前端日志

  • 使用浏览器开发者工具查看前端错误
  • 可集成 Sentry 或其他前端监控工具

安全配置

1. 使用 HTTPS(推荐)

  1. 申请 SSL 证书(可使用 Let’s Encrypt)
  2. 配置 Nginx 或 Spring Boot 使用 HTTPS

2. 禁用不必要的服务

  • 关闭未使用的端口和服务
  • 定期更新系统和软件

自动化脚本示例

部署脚本 deploy.bat

@echo off
echo Starting deployment...

REM 停止服务
net stop myapp

REM 备份旧版本
xcopy /Y "C:\app\your-application.jar" "C:\backup\your-application-%date:~0,4%-%date:~5,2%-%date:~8,2%.jar"

REM 复制新版本
xcopy /Y "target\your-application.jar" "C:\app\"

REM 启动服务
net start myapp

echo Deployment completed at %date% %time%

监控与维护

1. 进程监控

  • 使用 Windows 任务管理器
  • 使用 netstat -ano 查看端口占用

2. 日志监控

  • 定期检查应用日志
  • 设置日志轮转,避免磁盘空间不足

3. 定期备份

  • 备份数据库:使用 mysqldump 或数据库管理工具
  • 备份应用和配置文件

故障排除

常见问题

  1. 端口占用:使用 netstat -ano | findstr :8080 查找占用进程
  2. 内存不足:调整 JVM 参数 -Xms-Xmx
  3. 权限问题:确保服务账户有足够权限访问所需资源

日志查看

# 查看应用日志
tail -f logs/app.log

# 查看 Windows 事件日志
eventvwr.msc
### 设置 Windows 系统上的 VueSpring Boot 开发环境 #### 安装 Java Development Kit (JDK) 为了运行和开发基于 Spring Boot 的应用程序,安装 JDK 是必要的。可以从 Oracle 或者 OpenJDK 下载页面获取最新版本的 JDK 并按照官方指南完成安装过程。 #### 配置 Maven 构建工具 Maven 是管理项目构建、依赖关系以及文档生成的重要工具之一,在 `pom.xml` 文件中继承来自 Spring Boot 的父级 POM 可简化项目的配置工作[^2]: ```xml <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.4.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies> ``` 通过上述方式可以轻松集成 Web 功能模块到应用之中。 #### 创建新的 Spring Boot 应用程序 利用 Spring Initializr 初始化器创建一个新的 Spring Boot 项目,选择所需的依赖项(如 RESTful API 支持),然后下载 ZIP 文件解压至本地磁盘位置准备进一步操作。 #### 安装 Node.js 和 npm Node.js 是 JavaScript 运行时环境,npm 则是其包管理器;两者对于前端框架 Vue 来说不可或缺。前往官方网站下载适合 Windows 版本的安装包并遵循提示逐步执行直至结束即可。 #### 使用 Vue CLI 脚手架搭建单页应用(SPA) 一旦有了 Node.js/npm 后台支持之后就可以考虑采用 Vue 提供的命令行界面(CLI)来快速建立 SPA 结构了: ```bash npm install -g @vue/cli vue create my-vue-app cd my-vue-app npm run serve ``` 这组指令会引导开发者一步步定制化自己的 Vue 工程模板,并最终启动一个热重载服务器用于实时预览效果变化。 #### 整合前后端工程结构 考虑到实际应用场景下往往需要将二者结合起来共同部署发布出去,因此建议采取如下措施实现无缝衔接: - 将前端资源文件夹放置于后端源码树下的特定路径内; - 修改打包后的静态网页输出目标为可被 Spring Boot 访问得到的位置; - 编写自定义控制器映射根 URL 请求转发给 index.html 页面加载显示出来。 综上所述即完成了整个流程介绍,具体实施过程中可能还会遇到其他细节问题等待解决,不过总体思路就是这样子[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值