SpringBoot + Vue + Nginx前后端分离项目本地部署(Win)

SpringBoot + Vue + Nginx前后端分离项目本地部署步骤

本地部署所需步骤

  1. 将后端打包好的jar文件和前端生成的静态资源文件放入同一目录
  2. 启动Spring Boot应用
  3. 配置Nginx并重启
  4. 访问 http://your_domain 查看部署效果

前端Vue项目部署

  • 将写好的vue代码的目录下运行 npm run build 命令生成静态资源文件
  • 在前端项目中的bulid目录下面找到这两个文件

Nginx下载并配置

  1. 安装Nginx并启动
    Nginx下载地址:https://nginx.org/en/download.html
  • 下载后如下内容:
  • 双击这个nginx.exe后呈现如下界面
  • (重要)将前端vue打包好的文件放到Nginx的html文件夹里


  1. 配置Nginx反向代理(重要):

    nginx 复制代码
    server {
        listen 80;
        server_name your_domain;
    
        location / {
            root   html;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
    }
  2. 可以(非必须)修改 /etc/hosts 文件,将域名映射到本地

后端SpringBoot项目部署

  1. 在IDEA里面进行打包

    打包好的文件在项目的target目录下

  2. 运行SprinBoot应用,确保后端服务正常启动

    使用特定版本的jdk

    "D:\Env\JDK\jdk-11.0.0.1\bin\java.exe" -jar car.jar > application.log 2>&1

    使用系统变量的jdk

    java -jar car.jar > application.log 2>&1

    使用 start 命令以新窗口启动 Java 进程,并且关闭命令行窗口后进程仍会继续运行

    start java -jar car.jar > application.log 2>&1

这样就完成了Spring Boot + Vue + Nginx前后端分离项目的本地部署,希望能对您有所帮助!

相关推荐
ん贤7 分钟前
nginx语法
nginx
小信丶24 分钟前
@EnableTransactionManagement注解介绍、应用场景和示例代码
java·spring boot·后端
-孤存-44 分钟前
SpringBoot核心注解与配置详解
java·spring boot·后端
Hi_kenyon2 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
小王不爱笑1322 小时前
SpringBoot 整合 Ollama + 本地 DeepSeek 模型
java·spring boot·后端
萧曵 丶3 小时前
Nginx 高频面试题(含答案)
运维·nginx
人道领域3 小时前
SSM框架从入门到入土(SpringFrameWork)
java·spring boot·tomcat
键盘帽子3 小时前
多线程情况下长连接中的session并发问题
java·开发语言·spring boot·spring·spring cloud
zhougl9964 小时前
Vue 中使用 WebSocket
前端·vue.js·websocket
无名的小白4 小时前
openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决
java·前端·nginx