【Springboot】--如何将springboot+vue项目部署到云服务器?

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

目录

一、准备工作

1、购买云服务器

2、获取面板地址

二、jdk和数据库

1、安装环境

 2、配置jdk环境变量

3、java版本的问题

4、添加数据库

三、前端部署

 1、vue

2、创建站点

​编辑

四、后端部署

1、application.yml

2、idea打包

3、运行jar包

4、开放端口

五、可能遇到的问题

1、404

2、405问题


使用宝塔面板部署。请耐心一步一步看完,有问题可以在评论区讨论。

一、准备工作

1、购买云服务器

首先前往云服务器平台(阿里云或腾讯云)购买云服务器(可以免费试用),这里以腾讯云为例。

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

然后创建服务器,这里使用宝塔linux面板

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

2、获取面板地址

然后登录到面板输入以下命令查看面板地址:

sudo /etc/init.d/bt default

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

(其他服务器或非宝塔linux面板操作如下:上一步已获取到外网面板地址,请跳过此步)

Centos安装脚本:

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

Ubuntu/Deepin安装脚本:

wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

Debian安装脚本:

wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec

找到防火墙页面,添加8888端口后,访问上面的外网地址

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

二、jdk和数据库

1、安装环境

登录到宝塔面板,账号密码是上面命令生成的账号密码。

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

找到左侧的软件商店,搜索应用并且安装以下(如果没有用到redis,可以不用安装):

如果需要其他环境自行下载。

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

 2、配置jdk环境变量

点击面板左侧的文件,在/www文件下新建文件夹,并将自已电脑上jdk拖到新建文件里 ,保存好jdk路径,一会要用到。

打开左侧的终端,输入以下命令打开文件:

vim /etc/profile

 这里我的jdk文件路径是:/www/server/java/jdk-18.0.2.1,

按i编辑文件,在文件中加入以下(注意修改):

 export JAVA_HOME=/www/server/java/jdk-18.0.2.1
export JRE_HOME=/www/server/java/jdk-18.0.2.1/jre
export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/
export PATH=$PATH:$JAVA_HOME/bin

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot 

然后按esc,输入:wq保存文件

3、java版本的问题

打开菜单左侧的终端,输入以下命令查看java版本:

java -version

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

如果是想要的jdk版本跳过此步,如果显示的不是想要的jdk版本,点此解决。

4、添加数据库

点击左侧的数据库,添加数据库。用户名和密码自己设置

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

添加后,导入数据库表

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

将以sql为后缀的文件上传,此文件即建表语句。然后点击工具,可查看是否成功建表。

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

如果没有成功,从服务器获取

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

三、前端部署

1、修改后台服务所在源

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

 2、vue  build

如果前端是vue工程,进入到vue文件下,cmd进入命令行,输入npm run build打包。

打包后会出现dist文件

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

将dist文件拖到宝塔面板文件里,

2、创建站点

点击左侧的网站添加站点。

添加ip或域名

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

找到网站目录,定位到上面添加的dist文件位置,最后不要忘记保存!

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

然后通过ip可以访问到前端页面了(能看到就行,其他问题往后看)。

四、后端部署

1、application.yml

修改数据库连接池,并设置后端端口号(记住端口号)

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

2、idea打包

idea打包

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

打包后,工程target文件下会生成jar包

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

将jar包拖到宝塔面板文件里。

前后端文件如下:

 

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

3、运行jar包

打开服务器终端

以下命令跳转文件:

如:cd /www/wwwroot

cd jar包存放位置

临时运行jar包(输入java -jar 后,再输入jar包的前面几个字母然后按tab键可以补全名称):

java -jar jar包

如果想要服务器一直运行jar包(关闭页面后也会运行),输入以下命令:

nohup java -jar jar包 &

然后输入exit退出即可。

4、开放端口

点击左侧的安全,添加用到的端口,

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

腾讯云那边也要添加上

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

五、可能遇到的问题

1、404

此问题可能由vue的路由引起,需要nginx配置一下。

打开nginx配置,找到nginx位置。

springbootvue部署到服务器,SpringBoot,vue.js,前端,javascript,服务器,spring boot

打开以你ip命名的conf文件

在server里添加以下:

        # 下面两个配置是关键所在!!!!!!
       location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        index  index.html index.html;
        }
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
    #因此需要rewrite到index.html中,然后交给路由在处理请求资源
    location @router {
        rewrite ^.*$ /index.html last;
        }

然后重载nginx

2、405问题

还是在nginx配置文件下,添加以下:

        location /api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://你的ip:端口号/;
        }

然后重载nginx,解决问题!


如果遇到问题,可以在评论区留言讨论,持续更新ing文章来源地址https://www.toymoban.com/news/detail-859740.html

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

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

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

相关文章

  • 用Nginx将前端Vue项目部署到云服务器(含代理实现请求跨域)

    记录使用Nginx将 纯前端 的Vue3项目部署到阿里云服务器(Ubuntu 22.04)上,包含通过Nginx代理实现 跨域请求 、以及个人踩坑记录~ 执行下列命令安装: 安装完成后查看nignx版本,显示版本信息则说明安装成果 启动nginx,如正确启动,则不会出现任何提示信息。 nginx启动成功后打

    2024年04月12日
    浏览(45)
  • Linux | 将SpringBoot+Vue项目部署到服务器上

    大家好,我是初心,咱们又见面了!今天想跟大家分享的内容是如何部署 SpringBoot+Vue的前后端分离项目到服务器上。 本篇文章收录于 初心 的 Linux教程 专栏。 🏠 个人主页:初心%个人主页 🧑 个人简介:大家好,我是初心,和大家共同努力 💕 座右铭:理想主义的花,终究

    2024年02月04日
    浏览(39)
  • 华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目

    华为云云服务器评测 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置 华为云云服务器评测 第二章 [linux实战] Unbutnu添加SSH Key、启动Springboot项目 华为云云服务器评测 第三章 [linux实战] 使用Vue3、Element-plus菜单组件构建轮播图 华为云云服务器评测 第四章 [linux实战

    2024年02月10日
    浏览(62)
  • 使用宝塔面板部署Node.js+Mysql服务和Vue3-Admin项目到云服务器上

    准备工作 一台云服务器,可以先用免费试用一个月的服务器进行练手;我这里选择的是腾讯云的轻量云服务器; 1、在云服务器上安装宝塔面板 宝塔面板官网地址:https://www.kancloud.cn/chudong/bt2017/424209 1.1 安装Xshell脚本工具,通过这个工具来连接云服务器,进行宝塔面板的安装

    2024年01月25日
    浏览(55)
  • 部署项目到云服务器

    本篇文章将讲述如果从0-1部署自己的项目部署到云服务器上 ps1:这里不是将本地的项目与云服务器连接,而是将项目放到云服务器上。文件内容较多,也许过程遇到的问题也多,请耐心克服。【多思考,多搜索,多理解】 我在过程中遇到的问题:(如果和你遇到的问题相同

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

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

    2024年02月02日
    浏览(75)
  • windows怎么部署项目到云服务器

    要将项目部署到云服务器,可以按照以下步骤进行操作: 1. 在云服务提供商上创建一个云服务器实例,并确保已经将其配置和启动。 2. 在本地开发环境中将项目打包成可执行文件或者jar包,并确保项目能够正确运行。 3. 使用远程连接工具(如SSH、RDP等)登录到云服务器。 4. 在

    2024年02月14日
    浏览(48)
  • PHP项目部署到云服务器(CentOS+HTTP+PHP+MYSQL)

    如何将写好的项目部署到云服务器,让外界可以通过互联网访问项目网站。以下使用的是腾讯云服务器操作,系统环境为CentOS7.9。 打开腾讯云官网,注册好自己的平台账号。如果是新人的话去新人专区购买服务器,性价比高。 这里可以选的服务器有轻量云服务器、云服务器

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

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

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

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

    2024年02月04日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包