SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

前言

给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5

有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到。我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成

最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看



提示:以下是本篇文章正文内容,下面案例可供参考

一、Vue 打包的项目如何部署?

1.1 Vue 项目打包

温馨提示:如果你的电脑上没有装 vue 环境的话,请先安装好 node,下面使用 Express(一个 http 框架,提供了快速搭建服务器的功能) 也是基于 node 的。具体安装方法请自行百度,我这里就不介绍如何安装了

我的项目是使用 vue cli4 搭建的,使用脚手架搭建的项目,如果不知道自己的 vue cli 是什么版本的,可以输入如下命令进行查看

vue -V

使用脚手架搭建好处,就是什么都是可视化的,一键启动项目,一键编译项目,安装依赖也会变的非常非常的方便。效果图如下

我们 点击 build ,然后运行,等待项目构建完成之后,就可以在项目根路径生成一个dist 文件夹,这个文件就存放着我们 vue 项目打包好的所有内容

1.2 使用 Express 代理静态资源文件

当然代理静态资源还有很多种方法,这是一种我认为比较轻松的方案,那么要如何来做呢?

提示:无论是 Linux 环境还是 Windows 环境,以下方案是通用的(前提是你已经安装好了 node 以及 npm,我们要用npm 包安装环境)

  • 创建一个新的文件夹比如 :myapp mkdir myapp然后进入该文件夹 :cd myapp
  • 然后初始化 node 环境:npm init
  • 然后它会让你自己选择配置一些 JSON 信息
  • 然后安装 Express 环境:npm install express --save ,-- save 表示仅在当前环境使用。这里也会提示你创建一个 js 文件,你可以忽略,也可以创建
  • 然后创建 app.js 文件:touch app.js ,和 dist 文件夹在同一个目录哦
  • 编写 Express 代理静态资源的代码,windows 环境用文本编辑器,Linux 环境用 vim 编辑器
const express = require('express')
const app = express()

// 代理静态资源
app.use(express.static('./dist'))

// 监听 4000 端口作为资源的访问路径
app.listen(4000, () => {
 console.log('server running at http://127.0.0.1:4000')
})

编辑完毕,保存代码我们使用一个项目管理的工具包 pm2

windows 同理

安装这个我们可以实时查看项目的情况

使用这个,我们就不必用 node app.js 运行项目了,这样直接运行的弊端就是当你关闭 shell 或者 Linux shell 项目也会自动关闭。这样项目管理就会非常的方便哦

二、SpringBoot 项目如何部署?

2.1 数据库部署可能出现的问题

  • 首先要确保我们的服务器上安装了 mysql 数据库
  • 然后就是数据库的相关配置,设置远程访问等等
  • 数据库默认是不支持远程连接的,如果需要请放开,设置 % 就代表运行外部用户访问
mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> FLUSH PRIVILEGES;

// 如果上面不起效果,请输入这条命令,应该就可以解决远程访问的问题了
mysql> grant all privileges on *.* to root@'%' identified by '你的数据库登录密码';

2.2 SpringBoot 项目打包上传

通过在网上查找,我们得知 SpringBoot 项目打包有两种方式。

  • 使用内嵌 Tomcat 直接运行
  • 不使用内嵌 Tomcat,将项目打包成 war 包,部署到 Tomcat 运行

第二种方案我在 Java EE 阶段使用过,现在使用第一种

打包项目我们要在 maven 的 pom 依赖种添加如下插件

<build>
 <plugins>
  <plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  </plugin>
 </plugins>
 </build>

打开你的 Idea,点击右边的 package 即可完成打包,生成的文件在 target 目录里面

然后我们可以通过命令,直接在命令行运行项目。

java -jar xxx.jar 

java -jar xxxx.war

三、服务器配置

3.1 SpringBoot 项目在 Linux 环境启动与停止

在这里将我们打包好的 SpringBoot 项目和 vue 项目上传到服务器中。

vue 项目就按照上面的步骤, windows 平台和 Linux 平台是通用的。

我们知道 java -jar 运行项目很方便,但是同样会遇到一个问题,那就是 Linux Shell 关闭时,服务也关闭了,因此我们要使用脚本保证我们的这个进程(SpringBoot 服务)在后台也能保持运行。

我们编写一段 bash 脚本,我们只需要将 demo-0.0.1-SNAPSHOT 替换成你自己导出的 jar 包即可

#!/bin/sh
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

这里的&不能省略 ,表示守护进程的意思,及这个进程可以运行在后台。

保存,运行脚本

sh startup.sh

ps: 如果这里执行不了命令,需要给这个文件夹赋予读写的权限 chmod 777 *

查看进程是否在运行

ps -ef | grep java

找到项目名称的,第一列就是你的 pid
输入 kill -9 pid 即可停止你的java 项目

3.2 Nginx 反向代理 SpringBoot 服务

鉴于一些业务需要使用 https 服务,所以我们需要将我们的后端服务反向代理成 https 服务。

前提是,我们假设你已经配置好了下面的环境,如果不会请移步Nginx 的安装及 SSL 配置

  • 你已经在装了 Nginx 服务器
  • 你已经配置好了 SSL 证书,并实现了 https 服务,如果你不会,可以i查看这篇文章

在 http 里面配置后端服务的代称,SpringBoot 项目的代称不可以使用 ‘_'

upstream tikuApiServer {
 	server 127.0.0.1:9999;
 }

然后在 server 为 443 的服务中这样配置

 server {
  listen  443 ssl http2 default_server;
  listen  [::]:443 ssl http2 default_server;
  server_name 你的域名;
  root   https 项目的路径;
  index index.html index.htm;
#
  ssl_certificate "证书.crt";
  ssl_certificate_key "证书.key";
  ssl_session_cache shared:SSL:1m;
  ssl_session_timeout 10m;
  ssl_ciphers HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers on;

  # Load configuration files for the default server block.
  include /etc/nginx/default.d/*.conf;
  include mime.types;
		default_type application/octet-stream;

		// ================== 在这里 =====================
  location /tiku/ {
  	proxy_pass http://tikuApiServer/api/v1/;
  }

  error_page 404 /404.html;
   location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
   location = /50x.html {
  }
 }

这样我们的后端 API 就可以直接访问 https://域名/tiku/xxxx 就好了

总结

提示:这里对文章进行总结:

  1. 前后端分离 SpirngBoot + Vue 集成部署
  2. bash 脚本编写(守护进程运行项目)
  3. mysql 远程访问

到此这篇关于SpringBoot + Vue 项目部署上线到Linux 服务器的文章就介绍到这了,更多相关SpringBoot + Vue 部署Linux 服务器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码

    本人野生程序员一名,了解了一些微服务架构.前后端分离.SPA的知识后就想试试做点什么东西.之前一直做后端,前端只是有基础知识.之前学习过angularjs,但当时就是一脸懵逼(完全看不懂是啥)就放弃了.最近又学了Vue,这次感觉总算明白了一些,但其中也跳过很多坑(应该还会更多),在这里写下来记录一下吧. 说回主题,之前传统登录认证的方法基本是由服务器端提供一个登录页面,页面中的一个form输入username和password后POST给服务器,服务器将这些信息与DB或Ldap中的用户信息对比,

  • springboot整合vue项目(小试牛刀)

    序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> 新建springboot的web工程,默认会在resources目录下生成static以及templates文件夹 temp

  • 解决Vue调用springboot接口403跨域问题

    最近在做一个前后端分离的项目, 前端用的是Vue后端使用的是springboot, 在项目整合的时候发现前端调用后端接口报错403跨域请求问题 前端跨域请求已解决, 那么问题就出在后端了, 找了一些资料找到了很多种方法, 这里说两个简单粗暴的. 注意:"@CrossOrigin"注解要求jdk1.8及以上版本, SpringMVC 4.2及以上版本 1. 在controller层上添加@Configuration注解, 如果没有效果请制定RequestMapping总的method类型

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解

    前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成 最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

  • Spring boot项目部署到云服务器小白教程详解

    本篇文章主要介绍了Spring boot项目部署到云服务器小白教程详解,分享给大家,具体如下: 测试地址:47.94.154.205:8084 一.Linux下应用Shell通过SSH连接云服务器 //ssh 用户名@公网IP ssh josiah@ip // 输入密码 二.开始搭建SpringBoot的运行环境 1.安装JDK并配置环境变量 1) 打开JDK官网 www.oracle.com 2) 找面最新对应的JDK版本,下载 这里要注意的一个问题是:云服务器下载JDK时一定要在本地去ora

  • 在idea中将创建的java web项目部署到Tomcat中的过程图文详解

    在idea中将创建的java web项目部署到Tomcat中 采用的工具idea 2018.3.6 Tomcat7 1.先创建第一个新项目secondweb(注意勾选JavaEE下的web Application(4.0),窗口下的version对应为4.0,并且保证create web.xml已经被勾选) 2.在创建好的web项目的web/WEB-INF目录下创建两个文件夹:classes和lib.classes用来存放编译后输出的class文件,lib用来存放第三方jar包(下图显示的是创建

  • vue项目网站全局置灰功能实现示例详解

    目录 1.前端独立实现 2.通过后台管理控制设置网站的整体置灰样式 1.前端独立实现 两种不同的逻辑,一种是前端自己实现,一种是结合后台管理系统来控制,网站是正常还是置灰. 直接在public文件夹下的index.html文件的html标签里加上style="filter:grayscale(100%)",总的就是<html style="filter:grayscale(100%)"> 2.通过后台管理控制设置网站的整体置灰样式 1.先给public文

  • Vue项目的网络请求代理到封装步骤详解

    目录 1.创建vue项目 2.安装axios 3.进行config.js配置 4.main.js里引入 5.src目录下新建Utils文件夹,在内封装request.js 6.以login路由为示例 src文件下新建api文件,在api内新建login.js 7.在页面内引入方法,并使用 1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 devS

  • React为 Vue 引入容器组件和展示组件的教程详解

    如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment

  • SpringBoot生产环境和测试环境配置分离的教程详解

    第一步:项目中资源配置文件夹(resources文件夹)下先新增测试环境application-dev.yml和application-prod.yml两个配置文件,分别代表测试环境配置和生产环境配置 第二步:在application.yml配置文件中设置如下配置(PS:active后定义的名字要和配置文件-后的名字一致,如下则系统执行application-dev.yml) spring: profiles: active: dev 第三步:启动项目 启动方式一:idea中 springboo

  • ubuntu 安装openssh服务器的教程详解

    1.安装openssh 首先得安装 openssl 和zlib 安装openssl ---下载openssl-1.0.1j.tar.gz,解压到/usr/openssl/目录下进入解压目录 执行./config -fPIC 如下图 安装zlib---下载zlib-1.2.8.tar.gz解压到/usr/zlib/目录下 执行./configure make 和 make install命令 ok 2.下载openssh.tar.gz包解压放在/usr/openssh/目录下 解压 如图 执行 .

  • 使用userdel命令删除Linux用户的教程详解

    serdel是什么 userdel 是一个底层用于删除用户的工具.在 Debian 上,我们通常会使用 deluser 命令.userdel 会查询系统账户文件,例如 /etc/password 和 /etc/group.那么它会删除所有和用户名相关的条目.在我们删除它之前,用户名必须存在. 如何使用userdel 由于 userdel 会修改系统账户文件,那么我们需要root特权来运行它.不然我们会遇到一个报错信息"只有root权限才能执行这项操作"或者类似的信息.在我们得到特权后,

随机推荐