阿里云服务器购买及环境搭建宝塔部署springboot和vue项目

 云服务器ECS_云主机_服务器托管_计算-阿里云

一、前言

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

二、准备工作

1、新手申请

阿里云权益中心_助力学生、开发者、企业用云快速上云-阿里云

中小企业扶持权益_助力企业开启智能时代创业新范式-阿里云

现在阿里云对于新用户来说,还是挺仗义的,新用户能有一个月的云服务器免费使用福利,学生还能申请到两个月的免费使用福利,而且如果你是学生的话,一年的云服务器租金也不是很贵。
在这里插入图片描述
在这里插入图片描述

2、安全组设置

(1)安全组->创建安全组
在这里插入图片描述

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

授权对象 选 0.0.0.0/0 输入后保存显示 源: 所有IPv4(0.0.0.0/0)

Tomcat:8080

宝塔控制面板:8888

MySql:3306

HTTP:80

SSH:22
在这里插入图片描述

(3)创建成功,查看安全组
在这里插入图片描述

3、修改实例

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

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

点击实例 点击远程连接

在这里插入图片描述

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

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

安装宝塔的命令
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec
    输入命令 回车。 下面会出现对话,要输入y 才能继续安装,接下来还会 提示输入y

    在这里插入图片描述
    下载完成之后,可以得到两个地址,这两个地址就是宝塔管理面板的后台地址,一个是外网面板地址,一个是内网面板地址。还有宝塔用户名和密码。

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

    在这里插入图片描述

    登录宝塔访问不了 要记得在 阿里云 安全组 添加端口 授权对象 选 0.0.0.0/0 输入后保存显示 源: 所有IPv4(0.0.0.0/0) 还有访问不了在阿里云实例 里面远程链接看内网地址看报错 一般是更新证书 执行下面命令

    sudo yum update ca-certificates 
    

      2、登录宝塔Linux面板

      在这里插入图片描述

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

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

      在这里插入图片描述

      3、查看宝塔主页

      (1)可以看见里面有很多分工明确的功能
      在这里插入图片描述

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

      部署springboot项目

      二、搭建前准备

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

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

      在这里插入图片描述

      三、部署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+端口
      在这里插入图片描述
      将数据库配置为服务器IP地址,并且设置后端项目上下文如/api
      在这里插入图片描述
      通过Maven的package打包为jar包
      在这里插入图片描述

      前端打包

      请求加上前缀
      还记得我们在SpringBoot中加了/api的应用上下文吗?现在将前端所有向后端URL请求中加上/api的前缀。
      在这里插入图片描述
      配置转发代理

      如图分别配置如下
      在这里插入图片描述
      在前端终端输入 npm run build
      将打包生成的dist文件下的static静态文件,和index.html先保存下

      这里我把我的jar分享出来

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

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

        部署后端项目

        将jar 上传到这里
        在这里插入图片描述

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

        在这里插入图片描述

        详细看图片

        在这里插入图片描述

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

        在这里插入图片描述

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

        在这里插入图片描述

        开启外网映射

        在这里插入图片描述

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

        添加这个 java 项目的端口

        在这里插入图片描述

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

        在这里插入图片描述

        下面部署前端项目

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

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

        在这里插入图片描述

        这里的域名先 随便写一个

        在这里插入图片描述
        2、上传文件 vue 打包的 dist
        该网站的目录如下。
        在这里插入图片描述
        点击进入查看文件,然后将vue打包后的dist文件传输到该目录下。
        在这里插入图片描述
        在这里插入图片描述

        重新配置该网站目录

        进入该网站的设置页面。
        在这里插入图片描述
        选择刚才的dist文件,保存就可以了。
        在这里插入图片描述
        在这里插入图片描述

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

        在这里插入图片描述

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

        在这里插入图片描述

        在这里插入图片描述

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

        通过阿里云获取的免费ssl证书输入正确的key和pem就可以部署成功了。
        在这里插入图片描述

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

        数据库创建后 本地navicat 访问不了原因 阿里云安全组端口没放行 或者 宝塔 安全里面 需要添加端口规则 3306

        在这里插入图片描述

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

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

        给nginx配置文件增加如下内容,改完之后重启nginx。注意: gzip 配置可以提高系统访问速度。

        下面要写自己的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的项目 已经成功

          本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34486.html

          如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

          相关文章

          ABAP语言的动态编程(4) - 综合案例:管理费用明细表

          本篇来实现一个综合案例:管理费用明细表。报表在实际项目中,也有一定的参考意义,一方面展示类似的报表,比如管理费用、研发费用等费用的明细,使用业务比较习惯的展示格式;另一方面正好综合运用前面学习的动…

          【Python办公】Excel通用匹配工具(双表互匹)

          目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️‍🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏:请点击——>Python办公自动化专…

          2025-03-15 吴恩达机器学习2——线性回归模型

          文章目录 1 概述1.1 案例1.2 分析 2 代价函数2.1 代价函数公式2.2 理解代价函数2.3 可视化代价函数 3 梯度下降3.1 实现步骤3.2 理解梯度下降3.3 学习率 4 最佳实践4.1 导入数据4.2 代码实现4.3 可视化 1 概述 ​ 线性回归模型是使用最广泛的学习算法,让我们从一个…

          Webpack 前端性能优化全攻略

          文章目录 1. 性能优化全景图1.1 优化维度概览1.2 优化效果指标 2. 构建速度优化2.1 缓存策略2.2 并行处理2.3 减少构建范围 3. 输出质量优化3.1 代码分割3.2 Tree Shaking3.3 压缩优化 4. 运行时性能优化4.1 懒加载4.2 预加载4.3 资源优化 5. 高级优化策略5.1 持久化缓存5.2 模…

          实验篇| CentOS 7 下 Keepalived + Nginx 实现双机高可用

          为什么要做双机高可用?‌ 想象一下:你的网站突然宕机,用户无法访问,订单流失、口碑暴跌…💸 ‌双机热备‌就是解决这个痛点的终极方案!两台服务器互为备份,724小时无缝切换,保障业务…

          C语言【内存函数】详解加模拟实现

          目录&#xff1a; 1. memcpy使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 以上函数均包含在一个头文件<string.h>里面 一、memcpy的使用和模拟实现。 memcpy函数介绍&#xff1a; 函数原型&#xff1a; void * memcpy ( void…

          Flutter——Android与Flutter混合开发详细教程

          目录 1.创建FlutterModule项目&#xff0c;相当于Android项目里面的module库&#xff1b;2.或者编辑aar引用3.创建Android原生项目3.直接运行跑起来 1.创建FlutterModule项目&#xff0c;相当于Android项目里面的module库&#xff1b; 2.或者编辑aar引用 执行 flutter build a…

          Windows根据文件名批量在文件夹里查找文件并复制出来,用WPF实现的详细步骤

          项目前言 在日常工作和生活中&#xff0c;我们常常会遇到需要从大量文件中根据文件名批量查找特定文件并复制到指定位置的情况。手动一个个查找和复制文件不仅效率低下&#xff0c;还容易出错。使用 Windows Presentation Foundation (WPF) 可以创建一个用户友好的图形界面应用…

          matlab 控制系统GUI设计-PID控制超前滞后控制

          1、内容简介 matlab164-控制系统GUI设计-PID控制超前滞后控制 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略

          【大模型基础_毛玉仁】2.4 基于 Encoder-Decoder 架构的大语言模型

          更多内容&#xff1a;XiaoJ的知识星球 目录 2.4 基于 Encoder-Decoder 架构的大语言模型2.4.1 Encoder-Decoder 架构2.4.2 T5 语言模型1&#xff09;T5 模型结构2&#xff09;T5 预训练方式3&#xff09;T5 下游任务 2.4.3 BART 语言模型1&#xff09;BART 模型结构2&#xff0…

          AI智能代码疫苗技术,赋能数字化应用内生安全自免疫

          “DevSecOps市占率持续领先&#xff0c;IAST探针覆盖率十倍增长&#xff0c;代码疫苗技术已成功帮助上千家行业用户成功抵御‘Log4j2.x’等重大未知漏洞的利用攻击。”子芽在腾讯专访中透露。 这是2021年悬镜安全交出的一张成绩单。悬镜安全是DevSecOps敏捷安全先行者&#xf…

          【初级篇】如何使用DeepSeek和Dify构建高效的企业级智能客服系统

          在当今数字化时代,企业面临着日益增长的客户服务需求。使用Dify创建智能客服不仅能够提升客户体验,还能显著提高企业的运营效率。关于DIfy的安装部署,大家可以参考之前的文章: 【入门级篇】Dify安装+DeepSeek模型配置保姆级教程_mindie dify deepseek-CSDN博客 AI智能客服…

          【机器学习-基础知识】统计和贝叶斯推断

          1. 概率论基本概念回顾 1. 概率分布 定义: 概率分布(Probability Distribution)指的是随机变量所有可能取值及其对应概率的集合。它描述了一个随机变量可能取的所有值以及每个值被取到的概率。 对于离散型随机变量,使用概率质量函数来描述。对于连续型随机变量,使用概率…

          正点原子[第三期]Arm(iMX6U)Linux移植学习笔记-4 uboot目录分析

          前言&#xff1a; 本文是根据哔哩哔哩网站上“Arm(iMX6U)Linux系统移植和根文件系统构键篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。 引用&#xff1a; …

          视频AI方案:数据+算力+算法,人工智能的三大基石

          背景分析 随着信息技术的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的各个领域&#xff0c;从智能家居到自动驾驶&#xff0c;从医疗诊断到金融风控&#xff0c;AI的应用正在改变着我们的生活方式。而数据、算法和算力&#xff0c;正是构…

          MySQL -- 表的约束

          概念引入&#xff1a;真正的约束表字段的是数据类型&#xff0c;但是数据类型的约束方式比较单一的&#xff0c;所以需要一些额外的一些约束&#xff0c;用于表示数据的合法性&#xff0c;在只有数据类型一种约束的情况下&#xff0c;我们比较难保证数据是百分百合法。通过添加…

          嵌入式Zephyr RTOS面试题及参考答案

          目录 Zephyr RTOS 的主要设计目标是什么?适用于哪些领域? Zephyr 支持哪些内核对象类型?举例说明其应用场景。 Zephyr 支持哪些线程同步机制?举例说明其适用场景。 Zephyr 内核支持哪些任务状态?状态转换的条件是什么? Zephyr 如何实现低延迟中断处理?(如直接中断服…

          《TCP/IP网络编程》学习笔记 | Chapter 18:多线程服务器端的实现

          《TCP/IP网络编程》学习笔记 | Chapter 18&#xff1a;多线程服务器端的实现 《TCP/IP网络编程》学习笔记 | Chapter 18&#xff1a;多线程服务器端的实现线程的概念引入线程的背景线程与进程的区别 线程创建与运行pthread_createpthread_join可在临界区内调用的函数工作&#…

          C++相关基础概念之入门讲解(上)

          1. 命名空间 C中的命名空间&#xff08;namespace&#xff09;是用来避免命名冲突问题的一种机制。通过将类、函数、变量等封装在命名空间中&#xff0c;可以避免不同部分的代码中出现相同名称的冲突。在C中&#xff0c;可以使用namespace关键字来定义命名空间。 然后我们在调…

          创新技术引领软件供应链安全,助力数字中国建设

          编者按 随着数字化转型的加速&#xff0c;针对软件供应链的攻击事件呈快速增长态势&#xff0c;目前已成为网络空间安全的焦点。如何将安全嵌入到软件开发到运营的全流程&#xff0c;实现防护技术的自动化、一体化、智能化&#xff0c;成为技术领域追逐的热点。 悬镜安全作为…