Java后端与Vue前端项目部署全流程:从环境配置到Nginx反向代理
文章目录
- 1. 准备项目所需的环境
- 2. 后端项目打包
- 步骤 1:使用 Maven 打包
- 步骤 2:定位生成的 JAR 包
- 步骤 3:上传 JAR 包到 Linux 系统
- 步骤 4:验证 Java 环境
- 步骤 5:启动 JAR 包
- 3. 前端项目打包
- 步骤 1:执行 Build 命令
- 步骤 2:生成 Dist 文件
- 4. 部署到 Nginx
- 步骤 1:安装 Nginx
- 步骤 2:复制前端文件
- 步骤 3:修改 Nginx 配置
- 5. 最终验证
1. 准备项目所需的环境
所需环境:Docker、Nginx、MySQL、Redis、JDK(根据项目需求选择)
2. 后端项目打包
步骤 1:使用 Maven 打包
打开项目并执行 Maven 的 package
命令进行打包:
步骤 2:定位生成的 JAR 包
打包完成后,JAR 包会生成在以下位置:
步骤 3:上传 JAR 包到 Linux 系统
将 JAR 包复制到 Linux 服务器的指定文件夹中:
步骤 4:验证 Java 环境
确保服务器已安装 Java 环境,执行以下命令检查:
java -version
步骤 5:启动 JAR 包
进入 JAR 包所在目录,执行以下命令启动服务:
java -jar dkd-admin.jar
(确保数据库和环境配置无误后,服务将成功启动)
3. 前端项目打包
步骤 1:执行 Build 命令
打开前端项目(如 Trae CN 或 VS Code),根据 package.json
中的 scripts
配置执行 build
命令:
"scripts": {"build": "vue-cli-service build"
}
步骤 2:生成 Dist 文件
执行 npm run build
后,项目根目录会生成 dist/
文件夹:
4. 部署到 Nginx
步骤 1:安装 Nginx
在 Linux 系统中安装 Nginx,或通过 Docker 容器部署。
步骤 2:复制前端文件
将 dist/
文件夹内容复制到 Nginx 的默认 HTML 目录下:
步骤 3:修改 Nginx 配置
编辑 Nginx 配置文件,确保静态资源路径和反向代理配置正确:
5. 最终验证
- 启动后端服务:确保 JAR 包已运行。
- 启动 Nginx:执行
nginx -s reload
重载配置。 - 浏览器访问:在浏览器中输入虚拟机 IP 地址,验证部署结果。