Linux | 将SpringBoot+Vue项目部署到服务器上

这篇具有很好参考价值的文章主要介绍了Linux | 将SpringBoot+Vue项目部署到服务器上。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Linux | 将SpringBoot+Vue项目部署到服务器上

Linux | 将SpringBoot+Vue项目部署到服务器上

一、写在前面

大家好,我是初心,咱们又见面了!今天想跟大家分享的内容是如何部署 SpringBoot+Vue的前后端分离项目到服务器上。

本篇文章收录于 初心 的 Linux教程 专栏。

🏠 个人主页:初心%个人主页
🧑 个人简介:大家好,我是初心,和大家共同努力
💕 座右铭:理想主义的花,终究会盛开在浪漫主义的土壤里!🍺🍺🍺
💕欢迎大家:这里是CSDN,我记录知识的地方,喜欢的话请三连,有问题请私信😘

首先,这里的项目是一个前后端分离项目,前端采用的主要技术栈是Vue,后端采用主要技术栈是SSM。

前端采用 npm 进行打包后部署到 nginx 服务器上,后端采用 maven 打包后直接使用 java -jar 运行项目。

二、后端部署

2.1 项目打包

在部署项目之前,我们要做的第一件事就是将我们编译好的代码上传到服务器上去,下面详细介绍步骤。

  • 1.使用maven打包

我们通过 Maven 提供的打包工具,对我们的SpringBoot项目进行打包。

Linux | 将SpringBoot+Vue项目部署到服务器上

等待打包完成,idea的Run界面就会提示打包成功。

Linux | 将SpringBoot+Vue项目部署到服务器上

如果打包出错了,也就是 BUILD FAILED,就要先排查问题,将问题解决之后再进行打包。

  • 2.使用Xshell和Xftp上传 jar 包

打包成功后,我们的项目 jar 包生成在了项目的 target 目录下。

Linux | 将SpringBoot+Vue项目部署到服务器上

将 jar 包通过 XFTP 上传到服务器上即可。

Linux | 将SpringBoot+Vue项目部署到服务器上

2.2 项目运行

要运行任何和Java项目,JDK都是必不可少的,因此我们的第一件事就是安装JDK。

  • 1.安装JDK

关于JDK的安装,我已经安装过无数遍,大家可以参考我的这篇文章完成JDK的安装(很简单的,几步就好)Hadoop集群搭建(含JDK安装)。

  • 2.运行项目

执行Java的 jar 包最简单的命令就是:

java -jar xxx.jar(jar包)

下面以我的 jar 包为例执行演示,可以看到使用这个命令已经成功启动SpringBoot项目了。

Linux | 将SpringBoot+Vue项目部署到服务器上

细心的朋友会发现,使用这个命令运行项目会存在一个问题,那就是我们不能再输入命令了,它占用了我们这个连接,如果通过Ctrl+C退出,那么项目也会结束运行。

有没有什么办法,可以让我们既可以运行项目,也可以继续输入其他命令完成其他工作呢?

答案是有,那就是使用 nohup 命令:

nohup java -jar xxx.jar(jar包名) &> xxx.log(日志文件) &

这个命令的意思就是,将 java -jar 执行后启动的进程挂起,不占用当前窗口,并将该进程产生的日志文件放在 xxx.log 文件当中去。

  • 3.停止项目

对于使用 java -jar 启动项目,我们使用 Ctrl + C就可以停止了!那么对于悬挂项目,我们该如何停止项目?

首先使用如下命令查找进程号:

ps -ef | grep java

可以看到如下的进程,其中圆圈内的就是我们项目运行的进程号:

Linux | 将SpringBoot+Vue项目部署到服务器上

接下来杀死进程,如果没有任何输出,就证明杀死进程了,也就是停止了项目:

kill -9 进程号

Linux | 将SpringBoot+Vue项目部署到服务器上

如果使用 kill -9 无法杀死进程,还可以使用 kill -15 结束进程。

三、通过Shell脚本自动部署项目

使用Shell脚本自动部署项目的思想是:在Linux执行脚本后,系统结束已经进行的 java -jar 进程,然后自动从远程仓库拉取代码,并使用Maven进行打包,在执行 java -jar 命令将项目运行起来。

下面是具体的环境准备与执行步骤。

3.1 安装Git和Maven

由于篇幅原因,博主专门出了一期关于 如何在Linux上安装Git和Maven的教程 ,大家可以参考我的这篇文章:Linux安装Git和Maven。

3.2 编写Shell脚本

下面是编写好的Shell脚本代码,文件名为RunProject.sh,大家不要盲目复制,需要修改的地方认真修改:

echo ==================

echo 停止原来的工程

APP_NAME = 要运行的项目名

tpid = `ps -ef | grep $APP_NAME | grep -v grep | grep -v kill | awk '{print $2}'`


if [ ${tpid} ] ; then
	echo 'Stop Process!'
	kill -15 $tpid
fi
sleep 2

tpid = `ps -ef | grep $APP_NAME | grep -v grep | grep -v kill | awk '{print $2}'`
if [ ${tpid} ] ; then
	echo 'Kill Process!'
	kill -9 $tpid
else 
	echo 'Stop Process!'
fi

echo 准备从Git仓库拉取最新代码
cd /opt/module/yuling

echo 开始从Git仓库拉取最新代码
git pull

echo 开始打包
output=`mvn clean package -Dmaven.test.skip=true`

cd target

echo 启动项目
nohup java -jar 项目名-1.0-SNAPSHOT.jar &> 日志文件名.log &

echo 项目启动完成

3.2 执行脚本

  • 1.为用户授予执行Shell脚本的权限

使用 chmod 为普通用户授予执行Shell脚本的权限:

chmod 777 RunProject.sh
  • 2.执行Shell脚本

因为仓库中的依赖很少,Maven会去下载相关的依赖,所以初次启动会比较慢,使用如下命令执行Shell脚本:

./runproject

至此,使用脚本进行后端SpringBoot项目部署成功。

四、前端部署

我们的前端项目部署,是将使用 npm 打包好的项目放在 nginx 服务器上运行,通过访问 nginx 对外暴露的端口即可访问到前端页面。

4.1 安装NGINX

Linux | 将SpringBoot+Vue项目部署到服务器上

Nginx 是是一个开源的,支持高性能、高并发的 Web 服务和代理服务软件。

在传统的Web项目中,并发量小,用户使用的少。所以在低并发的情况下,用户可以直接访问tomcat服务器,然后tomcat服务器返回消息给用户。

nginx特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。

下面介绍如何在Centos中安装NGINX。

  • 1.官网下载 nginx 并通过XFTP上传到Linux中

这是nginx官网,可以点击这里去下载nginx安装包:nginx官方下载地址,下载成功后得到这样一个压缩包。

Linux | 将SpringBoot+Vue项目部署到服务器上

通过xshell加XFTP上压缩包上传到 /opt/software 目录下:

Linux | 将SpringBoot+Vue项目部署到服务器上

  • 2.解压与重命名

执行解压命令,将nginx解压到 /opt/module 目录下,并将文件重命名为nginx:

tar -xzvf nginx-1.20.2.tar.gz -C /opt/module/
mv nginx-1.20.2 nginx
  • 3.安装需要的软件(gcc、openssl等)

因为编译nginx需要使用 gcc 编译器,所以我们需要安装 gcc 和一些其他相关软件:

yum install -y openssl*
yum -y install ncurses-devel
yum install -y gcc-c++
  • 4.安装nginx

进入到nginx安装目录下,并执行编译和安装命令

cd /opt/module/nginx
./configure
make
make install

至此,我们的nginx就安装好了,注意,安装成功后,我们的nginx并不是在解压后的目录,而是默认在 /usr/local/ 目录下,接下来就是启动和停止nginx服务器。

进入到nginx目录:

cd /usr/local/nginx/

启动nginx:

sudo sbin/nginx

停止nginx:

sudo sbin/nginx -s stop

4.2 node.js安装

Linux | 将SpringBoot+Vue项目部署到服务器上

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题。

也就是说,我们只要安装了Node.Js,就已经按照 npm 包管理工具。

Linux | 将SpringBoot+Vue项目部署到服务器上
node.js的安装步骤比较简单,大家可以参考这篇文章:node.js安装教程。

有了node.js,我们可以在cmd使用如下命令进行验证是否安装成功:

node -v
npm -v

Linux | 将SpringBoot+Vue项目部署到服务器上

4.3 npm打包项目

首先打开cmd,进入到前端项目的根目录下,也就是vue.config.js所存在的目录下,执行安装和打包命令即可,下面是具体的步骤:

  • 1.复制前端项目路径

Linux | 将SpringBoot+Vue项目部署到服务器上

Linux | 将SpringBoot+Vue项目部署到服务器上

  • 2.安装项目依赖
npm install
  • 3.编译项目
npm run serve
  • 4.打包项目
npm run build

如果一路顺风,那么会提示打包成功,并在根目录下生成dist目录,这个目录就是编译好的项目。如果中途出现什么报错,大家要耐心解决哦!

4.4 运行项目

  • 1.上传dist目录

将前端打包生成的dist目录,上传到Linux系统中的一个目录即可,这里我是放在了 /opt/software 目录下:
Linux | 将SpringBoot+Vue项目部署到服务器上

  • 2.修改nginx的配置文件 nginx.conf

首先还是进入到nginx目录下的conf目录:

cd /usr/local/nginx/conf/

编辑nginx.conf文件,将dist目录路径放在root后面即可:

vim nginx.conf

Linux | 将SpringBoot+Vue项目部署到服务器上

启动nginx:

/usr/local/nginx/sbin/nginx

现在,我们就可以通过 主机ip+nginx端口访问我们的前端页面了!

至此,前端部署也完成了!

四、总结撒花

😎本文主要讲解了如何将SpringBoot+Vue项目分别部署到Tomcat服务器和Nginx服务器上,希望对大家有所帮助,如果还有不懂的地方,欢迎大家给我留言交流哦!😊

这就是今天要分享给大家的全部内容了,我们下期再见!😊

🏠 本文由初心原创,首发于CSDN博客, 博客主页:初心%🏠

🏠 我在CSDN等你哦!😍

Linux | 将SpringBoot+Vue项目部署到服务器上

文章来源地址https://www.toymoban.com/news/detail-443206.html

到了这里,关于Linux | 将SpringBoot+Vue项目部署到服务器上的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何在Linux服务器上部署Vue项目

    1. 在本地将Vue项目打包 以项目运行在vscode为例,在调试窗口输入  npm run build 待命令执行完毕之后,在项目目录下会生成dist文件夹,如下图   2. 创建一个运行文件,名字是:server.js  server.js中的内容如下: const express = require(\\\'express\\\'); const app = express(); app.use(express.static(\\\'./di

    2024年02月01日
    浏览(33)
  • vue项目打包部署在windows或linux服务器上

    最近写了一个前后端分离的项目,前端用的是vue,因此记录一下将该项目部署到服务器的整个过程。 1.首先,在控制台输入npm run build命令(或者npm run build:prod)。该命令用于将前端vue打包。打包后的文件是dist文件夹。(开发阶段的一些配置在打包后会失效,比如开发阶段配置

    2024年02月11日
    浏览(48)
  • 如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)

    对于新手或者学生党来说,有时候就想租一个云服务器来玩玩或者练练手,duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器,完成云服务器的部署。 现在阿里云对于新用户来说,还是挺仗义的,

    2024年02月04日
    浏览(66)
  • SpringBoot + Vue2项目打包部署到服务器后,使用Nginx配置SSL证书,配置访问HTTP协议转HTTPS协议

    配置nginx.conf文件,这个文件一般在/etc/nginx/...中,由于每个人的体质不一样,也有可能在别的路径里,自己找找... 证书存放位置,可自定义存放位置 两个文件 后端配置 把.pfx拷贝到resource下,然后配置一下yml

    2024年02月02日
    浏览(49)
  • SpringBoot项目部署到服务器

    此次用到了三个软件:IDEA、WinSCP、FinalShell 服务器的性能相比较本地有着更大的内存空间,运行程序代码会更加的快捷方便,而且服务器开启后,程序放在那边让它跑就好了。 一般的web项目想要放到服务器上运行的话,需要首先在服务器上装一个Tomcat,然后将项目打包成wa

    2024年02月04日
    浏览(39)
  • springboot项目网站部署到服务器

            用eclipse跟着教程做了一个网站,java语言,springboot项目。在本地电脑上运行成功后,想把它部署到线上,通过网络访问。下面是我自己作为新手自己摸索出来的一个方法,供读者参考。 目录 1. jar包  2. 服务器 3. jdk 和 Tomcat 4. 部署网站 (1)本地电脑远程连接服务器

    2024年02月04日
    浏览(27)
  • vue项目打包部署到服务器

    目录 一、打包项目  二、修改Nginx的配置 三、部署 四、开放端口号 1. 在 vue.config.js 文件中找到并修改,主要是publicPath 与outputDir 两项配置,若项目中有baseUrl,替换为publicPath (baseUrl, vue cli 3.3 已弃用) 2. 修改完成之后就可以进行打包了,在package.json文件找到下图中的打包命

    2024年02月05日
    浏览(42)
  • 部署vue项目到阿里云服务器

    一般前端工程师只会使用npm run serve 在开发环境下验证,那么如何把npm run build 打出的包部署到服务器上进行上线呢?这篇文章就详细阐述这一流程。 1. 购买或试用阿里云服务器     作为新用户可以试用一个月阿里云服务器,阿里云官方网址如下:https://www.aliyun.com/?utm_conte

    2024年02月05日
    浏览(28)
  • 云服务器部署vue/node项目

    此处以阿里云服务器为例,配置的是LNMP环境 以阿里云服务为例,端口自定义99 1、在 /usr/share/nginx/html/ 该目录下新建文件夹,该文件夹是部署的打好包的前端项目 例: 2、进入nginx目录配置相关配置文件:/etc/nginx/conf.d/,在新建lemons.conf文件 touch /etc/nginx/conf.d/lemons.conf  //快速

    2024年02月04日
    浏览(38)
  • ideal一键部署SpringBoot项目jar包到服务器

    我们在开发环境部署项目一般通过ideal将项目打包成jar包,然后连接linux服务器,将jar手动上传到服务中,重启服务。 概括的说流程是这样的: 本地打包-上传到服务器-kill掉以前的服务-重新启动jar包服务 每次总是循环这一系列的操作,这都是一些固定的流水线操作,对于流水线

    2024年02月03日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包