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

最新推荐文章于 2024-07-19 17:37:28 发布
最新推荐文章于 2024-07-19 17:37:28 发布
阅读量4.1k 收藏 69
点赞数 41
文章标签： 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地址才行

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

总结

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

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

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

渝州少年
关注
  • 41
    点赞
  • 踩
  • 69
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
前后端分离--Vue的入门基础版
YZZdear的博客
09-16 1947
目录一.前后端分离二.Vue的简介三.Vue的入门案例四.Vue的生命周期 前后端分离是一种软件架构模式，将应用程序的前端（用户界面）和后端（数据处理和业务逻辑）独立开发、独立部署。在前后端分离的架构下，前端通过API（应用程序接口）与后端进行通信，实现数据交换和业务处理。前后端的开发步骤，首先确定数据格式也就是接口文档，确定好之后只要各司其职就行了值得注意的是，前后端分离并不适用于所有项目，需要根据具体的需求和项目规模进行选择和决策。 官方网站：Vue.js - 渐进式 Jav
windows云服务器部署：spring boot和vue的前后端分离的系统，用来学习自动化（接口、性能、app）
未曾有境求
04-14 152
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、本地启动服务
如何将前后分离的项目部署到云服务器
qq_51985869的博客
03-12 1497
云服务器操作系统分为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镜像。
手把手教你前后端分离
三横同学的博客
11-22 6908
手把手教你搭建前后端分离项目 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
前后端应用部署云服务器
weixin_45984552的博客
04-25 617
1.新建一个简单的springboot 打包方式为jar包 直接用maven的package命令 即可在target目录中查看到jar包 用xftp 将jar包上传到服务器 然后运行java -jar + jar包名 然后在主机访问云服务器的ip端口下的应用 ...............
前后端分离项目部署服务器,前后端分离项目部署到云服务器
weixin_35843096的博客
08-11 1228
前后端分离项目部署到云服务器 内容精选换一换为了避免不必要的费用产生，完成本示例体验后，可释放以下资源。资源释放后无法恢复，请谨慎操作。项目是使用DevCloud各服务的基础，删除项目可将该项目中所有数据(包括工作项、文档、代码仓库、软件包、构建/部署任务等)一并删除。购买弹性云服务器时，需配置弹性IP及云硬盘。删除弹性云服务器时，要同时选择将弹性IP及挂载的硬盘删除。为了避免不必要的费用产生，完...
前后端分离项目部署到云服务器(小白，入门）
weixin_44946697的博客
10-06 2886
流程图 服务器购买和连接 参照这个blog 我买的是腾讯云的轻量级服务器Windows版 服务器的配置 主要是要安装jdk,tomcat,mysql，和比较烦的系统环境配置了 jdk安装和环境变量配置 tomcat安装和环境变量配置 mysql安装和环境配置 这个是我云端服务器的这软件的安装位置 项目的准备 项目打包 war的位置 复制项目的war包到服务器的tomcat下的webapps目录下 项目的启动 可以参照这个链接 启动项目三步走 win+r cmd startup 出现与本地大
如何部署后端项目到阿里云服务器
weixin_46820017的博客
04-14 6188
解析域名，创建网站 1、登录阿里云，购买服务器ESC 可以选择你自己喜欢的操作系统，建议购买Linux系统的 2、购买成功，可以点击控制台选择云服务器ESC进入服务器概览页面，查看自己的实例 3、点击实例，进行服务器密码修改 点击安全组，创建一个安全组，这个安全组是用来配置授权的，例如打开宝塔面板端口号设置，其他端口授权，服务器端口授权 4、点击配置规则，配置授权端口 5、注册域名，购买个人使用域名 注册域名成功以后，要去备案，备案成功进行域名解析 二、上传解压 将后端项目压缩成压缩包 三、
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
windows服务器部署,保姆级教程
01-16
本保姆级教程将逐步带你了解并实践Windows服务器的部署过程。 首先，我们来了解一下部署的基本流程： 1. **制作启动U盘**：在开始部署前，你需要一个启动U盘。这里推荐使用老毛桃工具，从官方网站下载完整版，然后...
服务器部署(保姆级教程).pdf
12-13
服务器部署保姆级教程 服务器部署是一项复杂的任务，涉及到多个组件的安装和配置，本文旨在指导读者从零开始，.step by step，完成服务器部署的过程。 一、准备工作 在开始服务器部署之前，需要下载和安装多个...
中视频项目保姆级实战教程-视频教程网盘链接提取码下载 .txt
05-22
十节视频课，主要讲内容制作和账号运营：包括选题、素材、文案、配音、剪辑以及运营...通过这十节课，你能快速掌握中视频项目的整个流程，挖掘出适合自己的中视频玩法，也可以模仿我们的玩法直接开干。 视频大小：263M
（万字截图-保姆教程）阿里云新手最全面教程 从购买到项目发布
01-20
网站部署1. 云服务器的介绍与采购1.2 云服务器的购买2. 云服务器可视化以及远程连接传输2.1 实现Centos可视化2.2 Xshell 实现远程连接2.3 Xftp 实现文件传输3. 配置环境 下载必要软件3.1 安装Python 3.8.23.11 首先...
若依（ruoyi）前后端分离版使用教程之若依前端部署阿里云服务器步骤（超详细）
蓝多多的小仓库
03-26 1529
1、前后端部署所需环境准备（2）在本机安装远程连接工具xshell和xftp，并修改服务器操作系统的镜像源（3）在服务器上安装jdk及tomcat（4）在服务器上安装Mysql（5）在服务器上安装nodejs和redis（6）在服务器上安装Nginx（7）下载若依前后端分离版。
云服务器部署前后端分离项目（若依）详细教程
hayhead的博客
01-19 3890
第一次在Linux云服务器上部署前后端分离项目，查了很多资料和视频，踩了许多坑。成功实现部署若依的前后端分离项目后，想记录一下前后端部署的过程，供学习的小伙伴参考。
前端后端项目部署到云服务器
qq_66963733的博客
01-04 2421
PS：项目前后端都使用docker进行部署，未学习过的可以去过一遍再来借鉴，也可直接借鉴进行前端项目打包之前需要把前端项目中api后端接口地址更改为实际的云服务器后端接口地址：如：云服务器公网ip: 10.1.189.1 后端服务端口为8080 所以后端服务的地址就是公网ip加上端口号http://10.1.189.1:8080 --表示后端服务，不要还是写成localhost:8080的本地环境另外前端项目其他api接口或者配置中需要对接后端服务地址的都需要改成实际云服务器的ip+服务端口号打包命令：
前后端项目部署到服务器流程
守灯者的博客
12-31 881
项目只能在本地运行，想要在互联网访问到，涉及如何将项目部署上线。这里先简单介绍一下流程，后面会补充具体操作，主要基于node 的项目，使用数据库MongoDB先对项目部署到服务器，购买服务器、连接服务器、配置服务器、部署项目等有个基础的了解，学习然后开始操作。
SpringBoot 和 Vue 前后端分离教程(附源码)
热门推荐
xmt1139057136的专栏
03-04 1万+
编辑：业余草 来源：https://www.xttblog.com/?p=4851 昨天，一位网友问我要 SpringBoot + Vue 的源码项目。其实网上有很多，我这里分享一个项目...
Java内存模型
最新发布
weixin_44267758的博客
07-19 697
此处的变量不是指java编程中的变量，它包括了实例字段，静态字段和构成数值对象的元素，但不包括局部变量和方法参数。JMM规定所有变量都存储在主内存中。每条线程有自己的工作内存，工作内存中保留了该线程使用到变量的主内存的副本。线程对变量的所有操作都必须在工作内存中进行，不能直接读写主内存的变量，不同的线程间也无法直接访问对方工作内存的变量，线程之间的变量值传递需要通过主内存来完成。
在现有的凝思6.0服务器上安装部署docker的保姆级教程
06-01
好的，以下是在凝思6.0服务器上安装部署docker的保姆级教程： 1. 确认凝思6.0服务器已经安装并启动了Docker服务。如果没有安装，请先安装并启动Docker服务。可以使用以下命令进行安装： ``` sudo apt-get update sudo apt-get install docker.io sudo systemctl start docker sudo systemctl enable docker ``` 2. 创建一个Docker组，并将当前用户添加到该组中： ``` sudo groupadd docker sudo usermod -aG docker $USER ``` 然后重启服务器： ``` sudo reboot ``` 3. 确认Docker服务已经启动并正在运行： ``` sudo systemctl status docker ``` 4. 安装Docker Compose： ``` sudo apt-get install docker-compose ``` 5. 确认Docker Compose已经安装成功： ``` docker-compose --version ``` 如果输出版本号，则说明Docker Compose已经成功安装。 6. 测试Docker是否可以正常工作： ``` docker run hello-world ``` 如果输出"Hello from Docker!"等信息，则表示Docker已经成功安装并可以正常工作。 现在，您已经成功在凝思6.0服务器上安装并部署了Docker。祝您使用愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值