新手如何在阿里云服务器上部署第一个自己的SpringBoot+Vue项目

新手部署SpringBoot+Vue3前后端分离项目到阿里云服务器

1 服务器准备

1.1 购买服务器ECS服务器

​ 阿里云官网：地址练手的话选择产品->云服务器 ECS即可。（记住购买时输入的服务器密码，SSH登录时会用到）

1.2 服务器环境搭建

​ 进入到控制台，进行一些项目部署的环境配置 配置安全组 -> 安装宝塔面板，对于新手，可以先采用宝塔部署的方式（比起传统方法基本的步骤没有问题，只是对Linux不熟悉的新手较为友好）

1.2.1 配置安全组

首先我们要知道，部署项目要想被任何IP访问到我们的服务，需要开放一些必要的端口，SpringBoot+Vue前后端分离项目中常用到的一些需要开放的端口如下：

1.2.2 安装宝塔面板

使用远程工具进行Linux系统的远程连接，可以使用Linux终端，也可以使用Windows窗口程序方式进行文件的管理。

• 用户名：root
• 密码：购买时输入的密码
  
  进入到购买的实例中，选择安装扩展程序，然后选择宝塔。等待安装完成之后，
  
  

宝塔面板安装时，会在远程工具的终端显示宝塔面板的状况，记住最后生成的账号和密码，然后进入外网8888端口，输入宝塔账号密码，进入宝塔面板。宝塔默认路径为系统中的WWW路劲。前后端程序一般放入WWW->WWWRoot目录下。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3 SpringBoot后端环境搭建

安装项目用到的相关环境：（宝塔软件商店搜索下载即可）

• Java项目一键部署：包含了JDK、Tomcat、Maven等SpringBoot项目所用打Java环境
• Redis数据缓存中间件
• MySQL数据库
• 可能需要额外版本的JDK
  当然，能力较强的也可以直接用官网给的方式，通过Linux命令操作。

1.4 Vue项目前端环境搭建

安装前端用到的环境：

• Node.js
• Nginx：Nginx 是一个高性能的 HTTP 和反向代理服务器，以及一个 IMAP/POP3 邮件代理服务器。具有高性能、稳定性、丰富的功能集、简单的配置和低资源消耗，主要功能有：
  • 静态内容服务：高效地提供静态内容，如 HTML、CSS、JavaScript、图片和视频文件。
  • 反向代理：将客户端的请求转发给后端服务器，如应用服务器或数据库服务器。支持负载均衡、缓存、SSL 卸载等功能。
  • 负载均衡：将传入请求分配到多个后端服务器，支持多种负载均衡算法（如轮询、加权轮询、IP 哈希等）。
  • HTTP 缓存：提供对静态和动态内容的缓存功能，以提高性能和减少后端服务器的负载。
  • SSL/TLS 支持：支持 SSL/TLS 加密，以确保传输安全。
  • 邮件代理：支持 IMAP、POP3 和 SMTP 协议，可以用作邮件代理服务器。
    

2 后端打包部署

2.1 打包后端程序

程序打包之前，进行远程数据库与本地的一个SQL文件导入，以及Redis环境的配置，然后将项目配置文件中相应的位置对应修改。
后端采用Maven是一个流行的项目管理和构建工具，主要用于 Java 项目。它使用一种叫做 POM（Project Object Model）文件来管理项目的构建、报告和文档。打包方式如下：

# 在终端运行命令
mvn package

运行结束后，将会在target文件目录下生成JAR包，将JAR包上传到服务器宝塔目录下（WWW文件目录的WWWRoot目录里）。

注意：

• 项目JAR路劲就是刚上传的打包好的JAR文件。
• 端口设置必须时前端API访问的端口，而且在安全组、防火墙中要开放该端口。
• JDK版本的选择，遵循一个原则——向下兼容（例如JDK17可以兼容JDK8的项目）。
• 如果有备案的域名可以添加域名。
  
  

2.2 前端打包部署

1. 修改API路径为服务器外网IP
2. 打包项目
3. 将dist文件目录下所有文件放入服务器宝塔根目录下——wwwroot
4. 宝塔面板添加站点
5. 配置nginx
   我采用的时CIL脚手架管理VUE3项目，**打包前切记：要将axios请求封装采用的请求路径中的localhost换成服务器外网IP对应后端。**使用命令 pnpm run build打包项目，然后会在前端项目中生成文件夹 dist如下：
   
   然后在宝塔界面选择，添加PHP项目，然后按下图添加站点和域名。
   
   

    # 如果你希望支持 SPA（单页面应用程序），将所有请求重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

什么是单页面应用程序？

单页面应用程序（Single Page Application，简称 SPA）是一种现代 Web 应用程序架构，在这种架构中，整个应用仅使用一个网页加载。传统的 Web 应用程序在用户与页面交互时，每次操作都会导致浏览器重新加载整个页面，而 SPA 则通过动态更新页面的内容来避免这种情况。

主要特点：

1. 单个 HTML 页面：整个应用程序仅加载一个 HTML 页面，所有的内容和功能都在这一个页面内动态更新。
2. AJAX 和前端路由：使用 AJAX（Asynchronous JavaScript and XML）技术从服务器异步获取数据，并根据用户的操作动态更新页面的内容。使用前端路由（如 React Router 或 Vue Router）在客户端处理 URL 路由，实现页面切换。
3. 动态内容更新：页面中的内容部分根据用户操作进行局部刷新，而不是整个页面重新加载。
4. 前后端分离：前端负责页面渲染和交互，后端提供 API 服务，两者通过 HTTP 请求进行数据交换。

优点：

1. 更快的响应速度：由于页面不需要重新加载，用户体验更加流畅，响应速度更快。
2. 减少服务器负载：页面的大部分内容可以由浏览器缓存，减少了服务器的负担。
3. 更好的用户体验：通过平滑的页面切换和动态更新内容，提供更加现代化和互动性的用户界面。
4. 前后端分离：前后端分离使得开发团队可以独立地开发和维护前端和后端，提高开发效率和灵活性。

缺点：

1. 初始加载时间较长：由于需要加载整个应用程序的脚本和资源，初始加载时间可能较长。
2. SEO 难题：由于页面是动态生成的，搜索引擎爬虫可能难以抓取页面内容，对 SEO 造成一定影响。不过可以通过服务器端渲染（SSR）或静态生成（SSG）技术来改善。
3. 浏览器历史记录管理：由于页面不会实际重新加载，浏览器的前进和后退操作需要由前端路由来管理，可能会带来一些复杂性。

常用框架和工具：React、Vue等

工作原理：

1. 初始加载：浏览器加载初始 HTML 页面，同时加载相关的 CSS 和 JavaScript 文件。
2. 页面渲染：JavaScript 框架接管页面渲染，创建并管理虚拟 DOM（Document Object Model）。
3. 数据获取：使用 AJAX 从服务器获取数据，通过 API 调用获取需要显示的内容。
4. 动态更新：根据用户操作，前端路由动态切换页面，JavaScript 更新虚拟 DOM 并将变化反映到实际 DOM 上，从而实现内容的局部刷新。
5. 用户交互：处理用户的交互事件（如点击、输入等），根据需要进行数据更新和页面刷新。

到此为止，部署完成，可以通过配置的域名或直接用外网IP进行程序的访问。