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

相关推荐
Exquisite.6 小时前
企业高性能web服务器---Nginx(2)
服务器·前端·nginx
怪兽毕设6 小时前
基于SpringBoot的选课调查系统
java·vue.js·spring boot·后端·node.js·选课调查系统
Amumu121386 小时前
Vue Router(一)
前端·javascript·vue.js
学IT的周星星6 小时前
Spring Boot Web 开发实战:第二天,从零搭个“会卖萌”的小项目
spring boot·后端·tomcat
笨蛋不要掉眼泪7 小时前
Spring Boot + RedisTemplate 数据结构的基础操作
java·数据结构·spring boot·redis·wpf
啟明起鸣7 小时前
【Nginx 网关开发】从源码分析 Nginx 的多进程启动原理
运维·nginx
切糕师学AI7 小时前
VSCode 下如何检查 Vue 项目中未使用的依赖?
vue.js·vscode
啟明起鸣7 小时前
【Nginx 网关开发】上手 Nginx,简简单单启动一个静态 html 页面
运维·c语言·前端·nginx·html
我是伪码农7 小时前
Vue 1.30
前端·javascript·vue.js
MACKEI7 小时前
服务器流式传输接口问题排查与解决方案
python·nginx·流式