使用 Nginx 部署 Vue + SpringBoot 项目

本文详细介绍了如何使用 Nginx 部署 Vue 前端和 SpringBoot 后端项目。首先,通过在 Vue 项目中运行打包命令生成 dist 目录,然后将 dist 内容上传到 Nginx 的 html 目录。接着,使用 IDEA 和 Maven 将 SpringBoot 项目打包为 jar 文件并上传到 Linux 服务器运行。最后,配置 Nginx 配置文件,调整前端监听端口和后端转发设置,并启动 Nginx 服务,成功后可以通过浏览器访问应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一. Vue 项目的打包

在 Vue 项目路径下打开 cmd,输入以下命令:

npm run build

出现如下提示说明打包成功:

在这里插入图片描述
成功后会在项目目录下生成 dist 目录,将该目录下的 index.html 和 static 文件夹压缩后上传到 linux 下的 nginx 的 html 目录下:

在这里插入图片描述
解压缩生成 index.html 和 static 文件:

unzip dist.zip

二. SpringBoot 项目的打包

使用 IDEA 打开项目,使用 maven 将程序打成 jar 包:
在这里插入图片描述
打包命令:

mvn clean
mvn insta
### 部署 Vue 和 Spring Boot 项目到阿里云服务器 #### 准备工作 为了成功部署 Vue 前端应用和 Spring Boot 后端服务至阿里云环境,需先完成如下准备工作: - 获取并配置好阿里云 ECS 实例。 - 安装必要的软件包如 Java 运行环境用于支持 Spring Boot 应用;Node.js 及其构建工具链来处理 Vue 项目打包。 #### 构建与上传应用程序文件 对于前端部分即 Vue 应用程序而言,在本地开发完成后应执行生产模式下的编译命令 `npm run build` 或者 `yarn build` 来生成静态资源文件夹 dist/[^1]。接着通过 FTP/SFTP 协议或者其他方式把该目录内的所有内容传输给目标服务器上的 Web 根路径下。 至于后端方面也就是 Spring Boot 工程,则建议采用 jar 形式的可执行 JAR 文件形式发布。可以利用 Maven 插件 maven-jar-plugin 或 Gradle 的 shadowJar task 打包整个工程为独立运行的应用程序,并将其放置于远程主机指定位置以便后续启动操作。 #### 设置 Nginx 作为反向代理服务器 安装 Nginx 并编辑站点配置文件以实现前后端分离架构中的路由转发逻辑。具体来说就是当请求匹配特定前缀时交由对应的后端微服务实例响应;而其他情况下则默认返回 index.html 页面从而允许单页面应用程序 (SPA) 正常运作。 ```nginx server { listen 80; server_name localhost; location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root html/dist; # vue app built files path try_files $uri $uri/ /index.html; } } ``` #### 自动化运维管理方案 考虑到实际应用场景可能涉及到频繁更新迭代以及多版本共存等问题,推荐引入 CI/CD 流水线机制配合 Docker 容器技术简化日常维护成本。借助 Jenkins、GitLab Runner 等持续集成平台能够自动化触发测试验证流程直至最终制品推送入库环节;与此同时 Kubernetes 编排引擎加上 Helm 包管理工具更是让集群级别的调度变得轻而易举。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

春日安然

可以赏个鸡腿吃嘛~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值