前后端分离，从云服务器到项目部署，真正的保姆级教程，一篇搞定！

最新推荐文章于 2025-03-07 09:17:19 发布
最新推荐文章于 2025-03-07 09:17:19 发布
阅读量6.2k 收藏 83
点赞数 54
文章标签： java vue.js 云服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45227374/article/details/111703271
版权

文章目录

前言

最近项目实训中，需要将写好的系统部署到服务器中，弄了半天发现也不是很难，决定写下这篇文章，真正做到一篇搞定

一、购买云服务器

部署项目肯定是需要一个云服务器的，选择很多，阿里云，腾讯云等等，如果你还是学生还可以享受优惠
腾讯云学生购买链接

购买了云服务器之后，就是配置云服务器了，我们先来到腾讯云官网，登录，进入控制台
在这里插入图片描述
首先关机，修改密码
在这里插入图片描述
修改密码后就可以点击登录，进入控制台了
在这里插入图片描述
到这一步,云服务器购买配置就结束了

 

二、云服务器项目部署介绍

1.云服务器是个啥东西

相信既然你在看这篇文章，那说明你一定对云服务器缺少了解，和部署项目前的我一样。

那云服务器到底是个啥东西呢？虽然它的名字听起来很高大上，但我对云服务器的总结就是
其实云服务器就是一台Linux系统的电脑，和你的电脑一样，可能只是系统不同，只不过这台电脑不在你身边，你只能用控制台操控它。

2.项目部署是个意思

部署项目之前，我觉得部署项目很复杂，很神秘，部署成功后，我觉得就这？

在具体介绍之前，我想告诉你，其实你已经部署过一次了，而且成功了，只不过是在你的本机而已，

你说咋可能呢，我自己都不知道，但其实你可以试一下，不信你在你的浏览器输入 127.0.0.1:8080

我相信如果，你的项目现在还没有启动的话，一定是这个样子，这就是正常的样子
在这里插入图片描述

但是 一旦你的项目启动，以Vue项目举例
在这里插入图片描述
再访问127.0.0.1:8080，就可以看见你的项目了
在这里插入图片描述

这是不是很相似？你现在有了云服务器，你就有它的IP地址，你通过IP地址去访问它，啥都看不见，只显示无法访问，这不就和你没跑项目前一样吗。

项目部署逻辑其实是这样

在这里插入图片描述
明白了这一步，咱们就可以开始在咱们云服务器上部署项目了

三.项目部署

1.Nginx服务器下载配置

因为我的项目，是 Vue + Java Servlet 前后端分离的项目，所以前端需要部署在Nginx服务器上，至于为啥选它，别问，问就是Nginx好，牛逼就完事了！

关于Nginx服务器的下载配置，看这篇文章就好了，我当时也是看的这个，注意其中所有的代码都是在你的云服务器控制台中写的

Nginx服务器下载配置
 

2.前端部署上Nginx

2.1 项目打包

以我的Vue项目为例，打包很简单啊，直接输入 npm run build 就可以自动打包了，你的项目具体如何打包，自己百度了

打包之后我得到了这么一个dist文件，这就是我打好的包
在这里插入图片描述

2.2 前端部署

然后我推荐大家下载一个软件叫Xftp，用于向云服务器上传文件的，非常好用，如果你不用这个软件，其他软件也行，甚至直接控制台手敲Linux命令上传都可以哈

Xfpt官网下载

下载好后，打开软件是这样子
在这里插入图片描述
点击左上角的文件/新建
输入云服务器IP地址，账号名，密码，你就可以连接上你的云服务器了
在这里插入图片描述
我们在右边根目录下新建一个www文件，然后再把之前打包的文件放进去

在这里插入图片描述
你的项目就算是放进云服务器了，是不是很方便，但这还不够，因为你的Nginx服务器还找不到这个文件，如果找不到，如何把项目展示给访问者呢？

好家伙，为了截图展示，我不小心把我云服务器上的etc文件删掉了，现在连不上去了，崩掉了
（我tm直接裂开）

你们没有图片可以看了，难搞哦

打开上面那个网址，修改Nginx服务器默认打开的文件路径，指向咱们的 www/dist 再访问IP地址就能看见你的前端项目了
在这里插入图片描述
如果 你的项目显示成功，那你的前端就部署成功了
 

3.后端部署

3.1 java环境配置

因为我的后端是用Java写的，所以在部署之前先把环境配好，比如说JDK+Tomcat服务器，如果你用的数据是mysql，还要配置mysql ，如果和我一样是SQLite数据库，直接放上去就好

看这篇文章就够了

环境部署好后，就可以打包上传代码了

3.2 后端项目项目打包上传

因为我的后端就是用eclipse 写的Servlet ，所以我们直接找到项目
右键 Export 选择Web下 WAR file
这样我就得到了一个war包
在这里插入图片描述
接下来直接在云服务器上打开你的tomcat文件夹下的webapp文件夹，把war包丢进去，重启tomcat服务器就好

然后再输入网址

ip地址:端口号/项目名称/(任何你写的页面)

就可以看见你的项目了
如果你看见了，那恭喜你，你的后端也部署好了。

4.修改代码 重新部署

你以为你的部署就完成了吗，还没有，你会发现你的网页只有再你的电脑上才能跑起来，别的电脑访问只能看见页面，功能实现不了，比如说无法登录，

这是因为你的前端代码访问的接口还是本机地址，你得改成你现在的ip地址才行

后端代码也一样，如果你后端代码有要访问文件的代码，都得改成现在云服务器上的路径，这部分也挺麻烦的
可惜我现在心灰意冷，不想写了（云服务器崩了，展示不了，呜呜呜）

总结

其实正确的项目完成流程应该是，先写后端，再将后端部署上云服务器，再写前端直接请求云服务器上的数据，这样才方便调试

最后一定不要误删文件，呜呜呜!!!
最后一定不要误删文件，呜呜呜!!!
最后一定不要误删文件，呜呜呜!!!

看我这么惨的份上，如果这篇文章有所收获，能点个赞吗，圣诞夜我还在写博客，还把云服务器搞崩了，别白嫖了，我还是个大三的孩子啊

渝州少年
关注
若依（ruoyi）前后端分离版使用教程之若依前端部署阿里云服务器步骤（超详细）
蓝多多的小仓库
03-26 2456
1、前后端部署所需环境准备（2）在本机安装远程连接工具xshell和xftp，并修改服务器操作系统的镜像源（3）在服务器上安装jdk及tomcat（4）在服务器上安装Mysql（5）在服务器上安装nodejs和redis（6）在服务器上安装Nginx（7）下载若依前后端分离版。
保姆级教学：Java项目从0到1部署到云服务器
逐梦苍穹的博客
01-27 7543
本文带你从0到1部署Java项目，包括JDK、MySQL、redis、redis、tomcat的一系列环境安装部署的内容，部署完整的环境到云服务器上。
前后端分离项目部署服务器,前后端分离项目部署到云服务器
weixin_35843096的博客
08-11 1323
前后端分离项目部署到云服务器 内容精选换一换为了避免不必要的费用产生，完成本示例体验后，可释放以下资源。资源释放后无法恢复，请谨慎操作。项目是使用DevCloud各服务的基础，删除项目可将该项目中所有数据(包括工作项、文档、代码仓库、软件包、构建/部署任务等)一并删除。购买弹性云服务器时，需配置弹性IP及云硬盘。删除弹性云服务器时，要同时选择将弹性IP及挂载的硬盘删除。为了避免不必要的费用产生，完...
前端后端项目部署到云服务器
qq_66963733的博客
01-04 3681
PS：项目前后端都使用docker进行部署，未学习过的可以去过一遍再来借鉴，也可直接借鉴进行前端项目打包之前需要把前端项目中api后端接口地址更改为实际的云服务器后端接口地址：如：云服务器公网ip: 10.1.189.1 后端服务端口为8080 所以后端服务的地址就是公网ip加上端口号http://10.1.189.1:8080 --表示后端服务，不要还是写成localhost:8080的本地环境另外前端项目其他api接口或者配置中需要对接后端服务地址的都需要改成实际云服务器的ip+服务端口号打包命令：
如何进行前后端分离开发？
最新发布
破损的天堂鸟博客
03-07 919
前后端分离开发通过职责解耦、技术栈灵活性和独立部署，成为现代Web开发的主流模式。成功实施需关注接口设计规范（如RESTful）、跨域解决方案、自动化测试及性能优化。工具链如Apifox（API管理）、Nginx（部署）和Docker（容器化）能显著提升效率。尽管存在SEO和初期设计成本等挑战，但其在复杂项目和多端适配中的优势使其成为技术选型的重要方向。以上内容整合自至的参考资料，覆盖了从理论到实践的全流程要点。
手把手教你前后端分离
三横同学的博客
11-22 7587
手把手教你搭建前后端分离项目 1.Vue下载安装具体教程 [https://www.pianshen.com/article/56021694732/]: 技术标签： vue vue.js node.js 对于我这种小白来说，安装个vue全局就绕了好几天。查阅API和不少vue全局安装的文档，各种尝试各种失败。使用webStorm创建vue项目时还是显示各种vue-cli的错误。终于这篇文章拯救了我，成功安装上了vue-cli，可以通过CLI来创建vue了！激动 链接附上： 我看的文章：https://ww
windows云服务器部署：spring boot和vue的前后端分离的系统，用来学习自动化（接口、性能、app）
未曾有境求
04-14 197
windows服务器部署项目 文章目录windows服务器部署项目前言一、项目地址二、解压项目包三、 IDEA的安装（无需破解）四、mongdb的环境部署1、解压 mongodb-win32-x86_64-2008plus-ssl-3.4.24 到E盘MongoDB文件夹2、创建data文件，data里面创建db 和 log两个文件3、启动服务4、在浏览器中输入[link](http://localhost:27017/)看到显示信息为代表：正常5、将monggo服务放在本地服务中，方便启动6、本地启动服务
前后端应用部署云服务器
weixin_45984552的博客
04-25 671
1.新建一个简单的springboot 打包方式为jar包 直接用maven的package命令 即可在target目录中查看到jar包 用xftp 将jar包上传到服务器 然后运行java -jar + jar包名 然后在主机访问云服务器的ip端口下的应用 ...............
前后端分离项目部署到云服务器(小白，入门）
weixin_44946697的博客
10-06 2970
流程图 服务器购买和连接 参照这个blog 我买的是腾讯云的轻量级服务器Windows版 服务器的配置 主要是要安装jdk,tomcat,mysql，和比较烦的系统环境配置了 jdk安装和环境变量配置 tomcat安装和环境变量配置 mysql安装和环境配置 这个是我云端服务器的这软件的安装位置 项目的准备 项目打包 war的位置 复制项目的war包到服务器的tomcat下的webapps目录下 项目的启动 可以参照这个链接 启动项目三步走 win+r cmd startup 出现与本地大
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
使用Docker Compose一键部署前后端分离项目(图文保姆级教程)
weixin_50083085的博客
03-26 4858
使用Docker Compose一键部署前后端分离项目(图文保姆级教程)
实战：阿里云轻量服务器部署前后端分离网站Vue3+Springboot(Maven)项目并购买域名配置
weixin_48328458的博客
12-31 1880
前后端分离小网站部署阿里云轻量服务器
保姆级教程——将springboot项目部署到阿里云服务器（小白包会）
热门推荐
m0_54853420的博客
06-21 1万+
昨天本想着看论文，结果发现找的论文和课题不一致。那干点什么好呢？那就把我的毕业设计（一个springboot项目）部署到服务器上，随便试试喽。网上的教程发现大部分都是一知半解，只能东拼西凑的查，费了不少时间。希望这篇博文能帮助一下刚入手的像我一样的小白！纯小白一枚，那就一步一步捋一捋自己部署过程。 1.到官网去下载jdk的Linux版本，官网地址：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h
前后端分离的项目前端怎么访问后端数据
modi000的博客
08-14 278
前端调用RESTful API时，只需要发送请求URL和请求参数，后端返回对应的JSON数据，在前端进行展示。这样可以实现前后端完全分离，前端只需要关注如何展示数据，后端只需要关注如何处理请求和返回数据。前后端分离是一种新型的web应用程序开发技术，它的核心理念就是将前端与后端进行分离，前端负责展示界面，后端负责处理业务逻辑和数据存储。前端与后端建立WebSocket连接后，可以实现双向数据传输，前端可以发送请求消息，后端可以返回响应消息。前端通过GraphQL查询后端数据，后端返回符合查询条件的数据。
如何部署后端项目到阿里云服务器
weixin_46820017的博客
04-14 6495
解析域名，创建网站 1、登录阿里云，购买服务器ESC 可以选择你自己喜欢的操作系统，建议购买Linux系统的 2、购买成功，可以点击控制台选择云服务器ESC进入服务器概览页面，查看自己的实例 3、点击实例，进行服务器密码修改 点击安全组，创建一个安全组，这个安全组是用来配置授权的，例如打开宝塔面板端口号设置，其他端口授权，服务器端口授权 4、点击配置规则，配置授权端口 5、注册域名，购买个人使用域名 注册域名成功以后，要去备案，备案成功进行域名解析 二、上传解压 将后端项目压缩成压缩包 三、
云服务器部署前后端分离项目（若依）详细教程
hayhead的博客
01-19 4987
第一次在Linux云服务器上部署前后端分离项目，查了很多资料和视频，踩了许多坑。成功实现部署若依的前后端分离项目后，想记录一下前后端部署的过程，供学习的小伙伴参考。
前后端项目部署到云服务器总结
weixin_43914439的博客
04-08 1167
由于之前做的更多的是后端，如果有前端也是在本地上运行，这次正好需要上线部署到云服务器就部署了一下，关于nginx配置这块还是要非常细心的，不同的项目架构对应着不同的配置，如果是只有一个服务那location自然也不会出问题，但是现在的开发项目基本山是微服务形式的，而且所有的请求都会经过gateway，而有时候gateway可能不会去配置前缀路径，所以这时候需要将所有的微服务前缀路径写出然后映射到gateway的地址，这也算是一个小点吧，不注意的话请求不能正确到达对应的微服务。
一文告诉你如何进行前后端分离
weixin_73687229的博客
11-20 2338
前后端分离指的是前端页面和后端服务分别独立开发和部署，前端通过API与后端进行数据交互。这种架构使得前端可以专注于用户界面和用户体验，而后端则专注于业务逻辑和数据处理。在详细介绍异步请求和跨域访问之前，让我们先来了解什么是JSON格式。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集，但是独立于语言，可以被多种编程语言读取。JSON的结构由键值对组成，数据以{}表示对象，以[]
如何将前后分离的项目部署到云服务器
qq_51985869的博客
03-12 2212
云服务器操作系统分为Windows和Linux类，Linux系统相对于win占用更少系统资源，一般选用Linux阿里云Linux镜像可选Aliyun Linux、CentOS、Ubuntu、Debian、SUSE Linux、OpenSUSE、CoreOS和FreeBSD。Aliyun Linux是阿里云原生Linux操作系统，针对ECS做了大量深度优化，完全兼容CentOS生态和操作方式；Ubuntu基于Debian，新手更容易上手，时长占有率也高。综上，阿里云ECS云服务器Linux镜像。
linux服务器上如何部署phpthink5项目保姆级教程
06-08
好的，下面是详细的保姆级教程： 1. 安装Web服务器、PHP和MySQL 在Linux服务器上安装Web服务器、PHP和MySQL是部署PHPThink5项目的第一步。具体的安装过程可以参考Web服务器、PHP和MySQL的官方文档或者其他相关教程。 2. 下载PHPThink5的压缩包并解压 在Linux服务器上下载PHPThink5的压缩包并解压到你想要部署的目录中，可以使用以下命令： ``` wget https://github.com/top-think/think/archive/5.1.52.tar.gz tar -zxvf 5.1.52.tar.gz ``` 其中`https://github.com/top-think/think/archive/5.1.52.tar.gz`是PHPThink5的压缩包下载链接，可以根据自己的需要选择不同的版本。 3. 创建MySQL数据库并配置 在MySQL中创建一个新的数据库，并将数据库信息配置到`application/database.php`文件中，具体的步骤如下： - 登录MySQL： ``` mysql -u root -p ``` - 创建一个新的数据库： ``` CREATE DATABASE your_database_name; ``` - 创建一个新的MySQL用户并授权： ``` CREATE USER 'your_username'@'localhost' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON your_database_name.* TO 'your_username'@'localhost'; ``` - 退出MySQL： ``` exit; ``` - 将数据库信息配置到`application/database.php`文件中： ``` // 数据库类型 'type' => 'mysql', // 服务器地址 'hostname' => 'localhost', // 数据库名 'database' => 'your_database_name', // 数据库用户名 'username' => 'your_username', // 数据库密码 'password' => 'your_password', // 数据库编码默认采用utf8 'charset' => 'utf8', ``` 4. 安装Composer依赖 在终端中切换到PHPThink5目录下，运行以下命令安装Composer依赖： ``` cd think-5.1.52 composer install ``` 这个过程可能需要一些时间，取决于你的网络速度和计算机性能。 5. 生成应用目录 运行以下命令生成应用目录： ``` php think build ``` 这个命令会在当前目录下生成一个`runtime`目录和一个`application`目录。其中`application`目录是你的应用程序目录，`runtime`目录是PHPThink5的运行时目录。 6. 配置Web服务器 配置Web服务器，使其指向PHPThink5的`public`目录。具体的配置方式取决于你使用的Web服务器，下面以Apache为例： - 打开Apache的配置文件： ``` sudo nano /etc/httpd/conf/httpd.conf ``` - 找到以下行： ``` DocumentRoot "/var/www/html" ``` - 修改为： ``` DocumentRoot "/path/to/think-5.1.52/public" ``` 其中`/path/to/think-5.1.52`是你解压PHPThink5的目录。 - 找到以下行： ``` <Directory "/var/www/html"> ``` - 修改为： ``` <Directory "/path/to/think-5.1.52/public"> ``` - 重启Apache： ``` sudo systemctl restart httpd ``` 7. 访问应用程序 访问你的Web服务器，应该能够看到PHPThink5的欢迎界面。如果你使用的是Apache Web服务器，在浏览器中输入以下URL： ``` http://your_server_ip/ ``` 其中`your_server_ip`是你的服务器IP地址。 注意事项： - 在部署之前，确保你已经正确地配置了Web服务器、PHP和MySQL，否则你的应用无法正常运行； - 在部署之前，建议先在本地环境中测试你的应用，确保没有问题再进行部署； - 在部署之后，建议关闭调试模式，以提高应用的安全性和性能。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值