首页 > 其他分享 >记录一次SpringBoot + Vue前后分离项目的部署流程

记录一次SpringBoot + Vue前后分离项目的部署流程

时间:2024-03-22 20:11:37浏览次数:23  
标签:Vue SpringBoot 项目 jar 流程 端口 nginx location big

前言

本教程使用黑马 SpringBoot3+Vue3全套视频教程 大事件项目作为前后端代码。

前置需要:

  • mysql
  • jdk
  • redis
  • nginx
  • linux环境

打包

前端

构建项目命令

npm run build

会在项目根路径下生成dist文件夹,这里存放了我们打包好的前端代码。可以使用zip进行全部的压缩等下好上传到服务器上。

后端

使用maven把项目打成jar包,可以在配置文件中把需要的端口改成需要的,我是默认的8080

环境准备

mysql,redis,nginx不再多言。

代码上传到指定路径下

结构如下:

nginx配置

/etc/nginx/conf.d/default.conf

    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root /data/big-event/front-end;
        index index.html;
        try_files $uri $uri/ /index.html;

    }

    # 后端API代理配置
    location /api/ {
        proxy_pass http://localhost:8080/; # SpringBoot应用的地址和端口
    }
  • location /: 配置前端项目的代码位置

  • location /api/: 配置后端项目地址和端口

启动测试

nginx:

# 启动nginx
nginx
# 修改配置的话可以重启
nginx -s reload

后端java

cd /data/big-event/back-end
nohup java -jar big-event-0.0.1-SNAPSHOT.jar &

没问题的话就可以访问服务器的地址 http://地址:端口 测试了。

标签:Vue,SpringBoot,项目,jar,流程,端口,nginx,location,big
From: https://www.cnblogs.com/zjw-blog/p/18090352

相关文章

  • Springboot的启动类名(引导类),一直爆红解决方式
    可以看到上图,无论起什么名称都爆红,也不能启动,原因是不能(引导类)启动类不能直接放java文件下,要放到你新建立的包下,它扫描的是包改放到com.itheima内,问题解决(小编范了两次这种低级错误)放到包内,最上面的packagecom.itheima;是扫描的包范围,切记不要大意......
  • Vue框架学习(二)
    一、指令修饰符通过"."指明一些指令后缀,不同后缀封装了不同的处理操作,目的是为了简化代码。1、按键修饰符@keyup.enter 键盘回车监听,一旦回车就对文本框里的数据进行处理。2、v-model修饰符v-model.trim       去除首尾空格v-model.number   ......
  • Vue 的父组件和子组件生命周期钩子函数执行顺序?
    Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdat......
  • Vue和SpringBoot实现的通用商城系统,高质量毕业论文范例,附送源码、数据库脚本,项目导入
    1.项目技术栈前端必学三个基础:“HTML、CSS、JS”,基本每个B/S架构项目都要用到,基础中的基础。此外项目页面使用Vue等前端框架技术。后端使用Java主流的框架 SpringBoot,使用MySQL数据库,是一个JavaWEB进阶学习的好资源。2.适合对象Java初学者、Java课题设计、Java毕业设......
  • vue或react项目上线刷新出现404的原因以及解决办法
    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个index.html文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,其它的路由都是通......
  • 2023-6-20-springboot中使用es
    依赖、配置、定义索引对象、操作、其他依赖<!--Maven--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency>配置spring:elasticsearch:......
  • vue2.0是如何监听双向绑定的?
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><style>.contanier{width:300px;height:300px;......
  • 操作系统综合题之“请填写信号量值并说明操作结果(正常、阻塞或唤醒。如阻塞或者唤醒,需
    1.问题:题36表是两个同步进程的模拟执行,生产者将物品放入共享缓冲区供消费者使用,缓冲区可放2件物品,使用2个信号量,并置初值为S1=2,S2=0.现已知操作情况,请填写信号量值并说明操作结果(正常、阻塞或唤醒。如阻塞或者唤醒,需说明阻塞或者被唤醒的是P1还是P2)。(提示:缓冲区满,不许放物品;缓......
  • 一、SpringBoot基础搭建
    本教程主要给初学SpringBoot的开发者,通过idea搭建单体服务提供手把手教学例程,主要目的在于理解环境的搭建,以及maven模块之间的整合与调用源码:jun/learn-springboot以商城项目为搭建例子,首先计划建1个父模块,3个子模块:父模块(你可以理解为共用模块,约定共用参数以及公用jar等)s......
  • Vue学习笔记57--vue默认插槽 +
    vue默认插槽示例一:不使用插槽Category.vue<template><divclass="category"><h3>{{title}}</h3><ul><liv-for="(item,index)inlistData":key="index">{{item}}</li>......