如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)

这篇具有很好参考价值的文章主要介绍了如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正!

一、前言

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

二、准备工作

1、新手申请

现在阿里云对于新用户来说,还是挺仗义的,新用户能有一个月的云服务器免费使用福利,学生还能申请到两个月的免费使用福利,而且如果你是学生的话,一年的云服务器租金也不是很贵。
springboot+vue项目部署阿里云,Java开发,宝塔
springboot+vue项目部署阿里云,Java开发,宝塔

2、安全组设置

(1)安全组->创建安全组
springboot+vue项目部署阿里云,Java开发,宝塔

(2) 在安全组里添加一些授权端口,方便后续的服务访问,比如:Tomact服务器端口访问、MySql数据库的访问、宝塔控制后台的访问等等。宝塔的源ip地址,设置为自己的本地地址(百度ip即可获取到自己的本地地址),这样方便安全登录宝塔的管理后台,。其余的源可以设置为0.0.0.0,这样的设置比较方便快捷地让我们使用其它的服务。下列是一些常用的端口与服务:

Tomcat:8080

宝塔控制面板:8888

MySql:3306

HTTP:80

SSH:22
springboot+vue项目部署阿里云,Java开发,宝塔

(3)创建成功,查看安全组
springboot+vue项目部署阿里云,Java开发,宝塔

3、修改实例

(1)点击实例------>管理,进入实例修改界面
(2) 我们可以修改实例名称、密码等。(注意这里要重置实例密码,方便下面登陆)

4.这里可以 直接用阿里云远程连接下载宝塔

点击实例 点击远程连接

springboot+vue项目部署阿里云,Java开发,宝塔

输入root密码后,点击确认,即可成功登陆到云服务器的命令行界面。(密码就是刚才重置实例的密码)

接着,我们把对应系统版本的宝塔面板安装命令,输入到这个命令行,然后敲回车键执行。

安装宝塔的命令

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

输入命令 回车。 下面会出现对话,要输入y 才能继续安装,接下来还会 提示输入y

springboot+vue项目部署阿里云,Java开发,宝塔
下载完成之后,可以得到两个地址,这两个地址就是宝塔管理面板的后台地址,一个是外网面板地址,一个是内网面板地址。还有宝塔用户名和密码。

记住宝塔的网址 和账号密码 保存好

springboot+vue项目部署阿里云,Java开发,宝塔

2、登录宝塔Linux面板

springboot+vue项目部署阿里云,Java开发,宝塔

有可能你输入 网址打不开宝塔页面。不要慌。 可能是你的宝塔端口 和你刚才 在阿里云 安全组 开的端口不一样。

解决方案 端口不对 。 也就是 安装好的宝塔端口 假如是2223 但是 云服务器安全组,端口 不是2223 , 修改或者添加 安全组端口为223 就可以

springboot+vue项目部署阿里云,Java开发,宝塔

3、查看宝塔主页

(1)可以看见里面有很多分工明确的功能
springboot+vue项目部署阿里云,Java开发,宝塔

4. 下面是部署springboot+vue项目

部署springboot项目

二、搭建前准备

一台服务器(小编以阿里云为准,备案没有通过,可以使用公网ip进行访问)
一个域名
宝塔可视化界面
springboot的jar包
vue的dist包

在宝塔 软件商店 安装好这些软件

springboot+vue项目部署阿里云,Java开发,宝塔

三、部署jar包

打包过程

基于 Spring Boot + Vue 的前后端分离项目的部署方式主要有如下两种:
1前后端一起部署:将 Vue 项目打包后的dist文件放到 Spring Boot 项目的资源目录下,然后在服务器上部署 Spring Boot 项目即可,终究还是后端项目,并不是真正的分离部署。
2前后端单独部署:将 Spring Boot 项目打包后部署到服务器,再将 Vue 项目打包部署至服务器,最后配置 Nginx 解决请求跨域时的端口转发问题。
第一种方式较容易,也无需进行服务器跨域的相关配置,都使用的是Tomcat服务器进行部署。适合小型项目,如果部署的项目比较大,会造成Tomcat服务器的压力,响应速度也变慢。
第二种方式稍微复杂些,需要在 Nginx 下配置跨域时的端口转发。本文将介绍后者(使用宝塔可视化式部署)。在该方式下,后端 Spring Boot 使用内嵌的 Tomcat 运行,前端 Vue 则需要借助 Nginx 运行(需完成跨域时的请求端口转发)。所以部署前需要在服务器上安装 Nginx 环境。

之前在B站跟着博主写了一个前后端分离的项目,前端工程使用Vue-cli脚手架,后端工程使用SpringBoot,前端和后端分别为8087和8088端口,需跨域配置。自己踩了很多坑,研究了几天才部署成功。现将经验分享。
————————————————

后端打包

后端项目打包之前,需要将某些配置改为服务器的配置。
将允许跨域设置为服务器IP+端口
springboot+vue项目部署阿里云,Java开发,宝塔
将数据库配置为服务器IP地址,并且设置后端项目上下文如/api
springboot+vue项目部署阿里云,Java开发,宝塔
通过Maven的package打包为jar包
springboot+vue项目部署阿里云,Java开发,宝塔

前端打包

请求加上前缀
还记得我们在SpringBoot中加了/api的应用上下文吗?现在将前端所有向后端URL请求中加上/api的前缀。
springboot+vue项目部署阿里云,Java开发,宝塔
配置转发代理

如图分别配置如下
springboot+vue项目部署阿里云,Java开发,宝塔
在前端终端输入 npm run build
将打包生成的dist文件下的static静态文件,和index.html先保存下

这里我把我的jar分享出来

安装包需要前端npm打包、后端maven打包,或者可以直接从如下链接下载:

https://share.weiyun.com/NDJNLhry 密码:vd3aig

部署后端项目

将jar 上传到这里
springboot+vue项目部署阿里云,Java开发,宝塔

点击 网站 java 项目添加 java 项目

springboot+vue项目部署阿里云,Java开发,宝塔

详细看图片

springboot+vue项目部署阿里云,Java开发,宝塔

这里可以选择 启动 停止服务

springboot+vue项目部署阿里云,Java开发,宝塔

标题然后点击设置 添加自己的ip

springboot+vue项目部署阿里云,Java开发,宝塔

开启外网映射

springboot+vue项目部署阿里云,Java开发,宝塔

关键一步 宝塔 安全里面 开启 java 的项目 端口

添加这个 java 项目的端口

springboot+vue项目部署阿里云,Java开发,宝塔

然后在 阿里云 安全组件开启 自己项目端口

springboot+vue项目部署阿里云,Java开发,宝塔

下面部署前端项目

2、创建网站
1、添加站点
新建一个站点,编写域名,域名可以添加端口号,如:www.test.com:9999,则访问的时候要戴上端口号访问,如果有域名证书,用80即可 (没有域名也可以)

点击 网站 php项目 添加站点 (这里不要困惑php项目可以 部署 vue 的)

springboot+vue项目部署阿里云,Java开发,宝塔

这里的域名先 随便写一个

springboot+vue项目部署阿里云,Java开发,宝塔
2、上传文件 vue 打包的 dist
该网站的目录如下。
springboot+vue项目部署阿里云,Java开发,宝塔
点击进入查看文件,然后将vue打包后的dist文件传输到该目录下。
springboot+vue项目部署阿里云,Java开发,宝塔
springboot+vue项目部署阿里云,Java开发,宝塔

重新配置该网站目录

进入该网站的设置页面。
springboot+vue项目部署阿里云,Java开发,宝塔
选择刚才的dist文件,保存就可以了。
springboot+vue项目部署阿里云,Java开发,宝塔
springboot+vue项目部署阿里云,Java开发,宝塔

重要一点 添加 自己的域名 和端口 并且把 已经有的域名删除

springboot+vue项目部署阿里云,Java开发,宝塔

接下来 和刚才后端一样 在宝塔安全里 开启 2020端口 还有阿里云服务器安全组件 也要开启 2020端口 (不知道咋弄的 看刚才后端咋开启的)

springboot+vue项目部署阿里云,Java开发,宝塔

springboot+vue项目部署阿里云,Java开发,宝塔

添加域名证书 (不添加 项目也可以部署成功,添加的前提要有域名)

通过阿里云获取的免费ssl证书输入正确的key和pem就可以部署成功了。
springboot+vue项目部署阿里云,Java开发,宝塔

四、安装数据库,导入表结构和数据

1、需要安装 mysql5.7版本 (注意请不要安装8.0版本,不支持)
springboot+vue项目部署阿里云,Java开发,宝塔
2、mysql5.7 安装完成之后,开始创建数据库,数据库的名称为 jsh_erp,注意中间是下划线
springboot+vue项目部署阿里云,Java开发,宝塔
3、从本地导入 jsh_erp.sql 文件,该文件在后端程序的 docs 文件夹下。
springboot+vue项目部署阿里云,Java开发,宝塔
上传之后点击导入按钮。
springboot+vue项目部署阿里云,Java开发,宝塔
导入成功之后点击列表里面的“工具”按钮可以弹出表结构,验证是否导入成功。加粗样式
springboot+vue项目部署阿里云,Java开发,宝塔
三、安装 JDK1.8 环境
1、由于宝塔面板不能直接安装 jdk1.8,需要安装 tomcat8,安装之后会自动安装 jdk1.8 环境。
springboot+vue项目部署阿里云,Java开发,宝塔
安装时请注意版本要选择 tomcat8。
springboot+vue项目部署阿里云,Java开发,宝塔
Tomcat8安装完成之后,会产生两个java进程,为了不使其影响ERP后端服务的运行,建议在宝塔的“终端”菜单页面执行如下命令来停止该服务:killall java
四、安装 Redis
在软件商店搜索redis,点击安装,等待自动安装完毕
springboot+vue项目部署阿里云,Java开发,宝塔
五、安装 Nginx
1、在软件商店搜索nginx,点击安装,等待自动安装完毕。
**springboot+vue项目部署阿里云,Java开发,宝塔
**

6、修改nginx配置。(此处配置的是3000端口,您可以根据需要换为80或者别的端口,如果需要绑定域名,请将server_name后面的localhost改为域名即可)

给nginx配置文件增加如下内容,改完之后重启nginx。注意: gzip 配置可以提高系统访问速度。文章来源地址https://www.toymoban.com/news/detail-764281.html

下面要写自己的ip 地址

 server {
        listen 3000;
        server_name  这里写自己的ip地址;
        gzip on;
        gzip_min_length 100;
        gzip_types text/plain text/css application/xml application/javascript;
        gzip_vary on;
        location / {
            root   /home/jshERP/jshERP-web;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
location /jshERP-boot/ {
	proxy_pass http://localhost:9999/jshERP-boot/;
	proxy_set_header Host $host:$server_port;
        }
 }

nginx 和前后端 项目 都重启就可以。 访问前端项目用 ip+端口就就可以

其他项目 跨域 自行百度

到这里 就都完成

我自己部署的是 华夏erp的项目 已经成功

到了这里,关于如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【贪吃蛇小游戏】宝塔面板快速搭建贪吃蛇小游戏Web网站 - 无需云服务器

    转载自远程内网穿透的文章:Linux使用宝塔面板搭建网站,并内网穿透实现公网访问 宝塔面板作为简单好用的服务器运维管理面板,它支持Linux/Windows系统,我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等,通过Web端轻松管理服务器。 以下教程,我们将演示使用宝塔

    2024年02月05日
    浏览(66)
  • 如何使用宝塔面板搭建网站(Linux服务器配置篇)

    搭建网站我们需要: 必须是Linux服务器 (最低要求配置1核1G当然再低些也能运行但是不建议) 自己的域名(可以去阿里云或者腾讯云了解) PHP项目   此处展示的是华为云服务器 (各个服务器的购买和使用差别不大,这里提供参考) 登录之后点击控制台  点击右上角的搜索

    2024年02月07日
    浏览(72)
  • 阿里云国际-在阿里云服务器上快速搭建幻兽帕鲁多人服务器

    幻兽帕鲁是最近流行的新型生存游戏。该游戏一夜之间变得极为流行,同时在线玩家数量达到了200万。然而,幻兽帕鲁的服务器难以应对大量玩家的压力。为解决这一问题,幻兽帕鲁允许玩家建立专用服务器,其提供以下优势: (1)更高的稳定性,减少崩溃或停机的风险;

    2024年02月21日
    浏览(52)
  • 「阿里云」幻兽帕鲁个人服务器已上线,3分钟快速搭建

    基于阿里云搭建幻兽帕鲁服务器方法,1到2分钟部署完成,稳定运行无卡顿,阿里云服务器网aliyunfuwuqi.com分享保姆级手把手教程,基于阿里云计算巢、云服务器或无影云桌面都可以: 基于阿里云1分钟自建教程 https://t.aliyun.com/U/DKivPS 此教程是基于阿里云计算巢服务,以Palwor

    2024年01月25日
    浏览(47)
  • 阿里云服务器如何搭建MQTT服务器

    入门教程:链接 将系统配置成Ubuntu18的(因为我只会用这个系统) 在实例处停止当前系统的运行,然后依次选择2,下拉菜单找到3进行更换系统,更换完成以后重启就好了。 如下图,依次点击1-4的按钮,第五步需要重新设置系统的密码 Xshell下载链接 安装完成后打开Xshell按照

    2024年02月03日
    浏览(59)
  • 如何搭建自己的git服务器

    GitHub,Gitee 想来大家都用过,我们的代码就是托管在这些平台上的。因此,你可能好奇为什么我们不自己搭建一个 git 呢服务器?下面,就开始教大家如何一步步搭建自己的 git 服务器(试验成功的那一刻还是很让人激动的)。 我自己的虚拟机是 centOS7 的,首先肯定要安装

    2024年02月05日
    浏览(53)
  • 搭建自己的git服务器--win10系统使用Gitea快速搭建git-server

    2023-03-28 本文简单介绍了使用gitea开源软件搭建自己git服务器的过程; 本文记录的在win10系统上快速安装gitea,实现了git服务端的搭建。 搭建自己的git仓库服务端,搭建到云主机,连接方便,但大文件受限于网速。 搭建到局域网,网速快。各有优势,多试多玩,总有收获。 安

    2024年02月13日
    浏览(84)
  • 如何快速入门部署自己的Flask程序(本地+云服务器)?

    一、需求背景 :人工智能训练好的模型model,需要放到服务器上,作为基础能力提供给应用侧,否则model只能中电脑本地处理。那么怎么解决这个部署到服务器上的问题呢? 二、解决思路 :web应用部署,有3种主流的方式, 1.Django:大而全,集成了很多组件,属于全能型、重

    2024年02月03日
    浏览(57)
  • 本地使用IIS快速搭建一个属于自己的网站,并发布公网访问「无需购买云服务器」

    在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类,为方便用户使用,还出现了XAMPP、PHPStudy、宝塔面板等等一系列集成服务,都是为了方便我们能快速建立网站。是不是不适用这些软件就无法建立网站了呢?

    2024年02月05日
    浏览(65)
  • 【网络篇】如何搭建自己的DNS服务器

    平时练习域名解析,一般直接修改的/etc/hosts文件。对于服务器数量小的情况完全可以,但是如果服务器数量较多,每个都修改比较麻烦。 DNS是作为域名解析。在实际的生产过程中,尤其是对于内网搭建的情况,DNS不可能使用互联网的DNS,这时需要我们自行搭建。 我这里准备

    2024年02月05日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包