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

相关推荐
wuqingshun31415920 分钟前
如何理解Spring Boot中的starter?
java·spring boot·后端
wuqingshun31415929 分钟前
SpringBoot是如何实现自动配置的
java·spring boot·后端
Cobyte32 分钟前
使用 JavaScript 实现有限状态机的经典问题
前端·javascript·vue.js
zhouhui00134 分钟前
AI帮我写了个Spring Boot校验,线上漏掉了这组边界条件
java·spring boot·redis·ai编程
acheding42 分钟前
File System Access API 实战:让网页真正读写本地文件
前端·javascript·vue.js·编辑器·markdown
hdsoft_huge1 小时前
SpringBoot系列17:日志体系Logback配置,日志分割、脱敏、异常堆栈收集规范(生产级落地)
java·spring boot·logback
吃饱了得干活1 小时前
扫码登录如何实现?从原理到实战
java·spring boot·redis
acheding1 小时前
把 CodeMirror 6 调教成 Markdown 编辑器:扩展、装饰与门面
javascript·vue.js·编辑器·markdown
凤山老林2 小时前
数据库连接池深度调优:Spring Boot + HikariCP 泄漏检测、参数调优与慢 SQL 拦截体系
数据库·spring boot·sql
虚惊一场17 小时前
在浏览器里跑 Prettier:格式化 Markdown 的四个难点
前端·javascript·vue.js