新手部署SpringBoot+Vue3前后端分离项目到阿里云服务器
1 服务器准备
1.1 购买服务器ECS服务器
阿里云官网：如果您想练习寻址，请选择产品云服务器ECS。 （请记住您购买时输入的服务器密码，通过SSH登录时会用到该密码）
1.2 服务器环境搭建
进入控制台，配置部分项目的部署环境，并配置安全组。如果你是初学者，可以先使用宝塔部署方法（基本步骤相对传统方法来说还好）。对于不熟悉Linux的初学者来说比较困难）。
1.2.1 配置安全组
首先你需要知道，如果你的部署项目想要从任意IP访问你的服务，你需要开放一些SpringBoot+Vue前端和后端常用的端口。 -end 孤立的项目是：
1.2.2 安装宝塔面板
要使用远程工具远程连接到Linux 系统，您可以使用Linux 终端或Windows Windows 程序管理文件。
用户名：root 密码：购买时输入的密码
导航到您购买的实例，选择安装扩展，然后选择Pagoda。等待安装完成。
一旦安装了Pagoda 面板，Pagoda 面板的状态将显示在远程工具的终端中。记住上次生成的账号和密码，在你的外网8888端口输入，并输入你的宝塔账号密码。宝塔面板。宝塔的默认路径是系统中的WWW路。前端和后端程序通常位于WWW-WWWRoot 目录中。
外部链接图像传输失败。源站点可能具有适当的反浸出机制。我们建议保存图像并直接上传。
1.3 SpringBoot后端环境搭建
安装工程使用的相关环境：（在宝塔软件商店搜索下载即可）
Java项目一键部署：包括SpringBoot项目使用的Java环境，如JDK、Tomcat、Maven等。 Redis 数据缓存中间件MySQL 数据库可能需要其他版本的JDK。
当然，如果你有技术，可以照原样使用官网贴出的方法，或者使用Linux命令来操作。
1.4 Vue项目前端环境搭建
用于安装前端的环境：
Node.jsNginx：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（项目对象模型）的文件用于管理项目构建、报告和文档。包装方法如下。
#在终端中运行命令
MVN包
操作完成后，会在目标文件目录下生成JAR包，并将该JAR包上传到服务器的宝塔目录（WWW文件目录的WWWRoot目录下）。
消息：
项目JAR路径为刚刚上传的打包后的JAR文件。端口设置必须用于前端API 访问，并且端口必须在安全组和防火墙中打开。 JDK版本的选择遵循——向后兼容的原则（例如JDK17兼容JDK8项目）。如果您已经注册了域名，则可以添加域名。
2.2 前端打包部署
将API路径更改为服务器的外网IP打包项目，将dist文件目录下的所有文件放置到服务器的宝塔根目录——wwwroot宝塔面板中，并添加站点配置nginx.conf。
使用CIL 脚手架管理VUE3 项目。 **打包前，将用于封装axios请求的请求路径中的localhost替换为你服务器外网IP对应的后端。 **使用命令pnpm run build 打包您的项目将在您的前端项目中生成一个文件夹dist，如下所示：
接下来，在宝塔界面中选择它，添加您的PHP项目，并添加您的站点和域名，如下所示。
# 如果要支持SPA（单页应用程序），请将所有请求重定向到index.html。
位置/{
try_files $uri $uri //index.html;
}
什么是单页应用程序？
单页应用程序(SPA) 是一种现代Web 应用程序架构，其中整个应用程序仅使用一个网页加载。在传统的Web 应用程序中，每次用户与页面交互时，浏览器都会重新加载整个页面，但SPA 通过动态更新页面内容来避免这种情况。
主要特点：
单个HTML 页面：整个应用程序仅加载一个HTML 页面，所有内容和功能都在这一页面内动态更新。 AJAX和前端路由：使用AJAX（异步JavaScript和XML）技术从服务器异步检索数据并根据用户交互动态更新页面内容。在客户端使用前端路由（如React Router或Vue Router）处理URL路由，实现页面切换。动态内容更新：页面的部分内容根据用户交互进行更新，而不是重新加载整个页面。前后端分离：前端负责页面渲染和交互，后端通过HTTP请求交换数据。
优势：
更快的响应时间：无需重新加载页面，从而带来更流畅的用户体验和更快的响应时间。减少服务器负载：页面的大部分内容由浏览器缓存，减少服务器负载。更好的用户体验：通过平滑的页面转换和动态更新的内容提供更现代、更具交互性的用户界面。前后端分离：前后端分离，允许开发团队独立开发和维护前后端，提高开发效率和灵活性。
坏处：
初始加载时间长：初始加载时间可能很长，因为必须加载整个应用程序的脚本和资源。 SEO问题：由于页面是动态生成的，搜索引擎爬虫很难抓取页面的内容，这对SEO有一定的影响。但是，可以通过服务器端渲染（SSR）或静态生成（SSG）技术对其进行改进。浏览器历史记录管理：由于页面实际上并未重新加载，因此浏览器来回操作必须由前端路由管理，这可能会带来一些复杂性。
常用的框架和工具：React、Vue等。
工作原理：
初始加载：浏览器加载初始HTML 页面以及关联的CSS 和JavaScript 文件。页面渲染：JavaScript 框架接管页面渲染并创建和管理虚拟DOM（文档对象模型）。数据检索：使用AJAX 从服务器检索数据并通过API 调用检索要显示的内容。动态更新：前端路由响应用户操作动态切换页面，JavaScript更新虚拟DOM并反映到实际DOM中，实现部分内容更新。用户交互：处理用户交互事件（点击、输入等）并根据需要更新数据或刷新页面。
至此，部署完成，可以通过配置的域名或者直接使用外部IP访问程序。
#以上关于初学者如何在阿里云服务器上部署第一个SpringBoot+Vue项目的信息仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91768.html
