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前后端分离项目的本地部署,希望能对您有所帮助!

相关推荐
英俊潇洒美少年1 小时前
Vue3 深入响应式系统
前端·javascript·vue.js
zihao_tom1 小时前
Spring Boot(快速上手)
java·spring boot·后端
chehaoman2 小时前
Failed to restart nginx.service Unit nginx.service not found
运维·nginx
jessecyj3 小时前
SpringBoot详解
java·spring boot·后端
qqty12173 小时前
Spring Boot管理用户数据
java·spring boot·后端
bearpping4 小时前
SpringBoot最佳实践之 - 使用AOP记录操作日志
java·spring boot·后端
今晚务必早点睡4 小时前
Nginx 从入门到精通:一篇讲透原理、功能、配置与实战场景
运维·nginx·负载均衡
givemeacar5 小时前
Nginx如何实现 TCP和UDP代理?
tcp/ip·nginx·udp
angerdream5 小时前
最新版vue3+TypeScript开发入门到实战教程之路由详解三
前端·javascript·vue.js
Zzxy5 小时前
快速搭建SpringBoot项目并整合MyBatis-Plus
java·spring boot