SpringBootWeb 篇-深入了解 SpringBoot + Vue 的前后端分离项目部署上线与 Nginx 配置文件结构

🔥博客主页: 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 云服务器的准备

        2.0 Xshell 和 Xftp 软件

        2.1 Xshell 介绍

        2.2 Xftp 介绍

        3.0 在云服务器进行环境配置

        3.1 安装 JDK

        3.2 安装 MySQL

        3.3 安装 Nginx

        4.0 SpringBoot 后端代码进行打包上传服务器

        5.0 Vue 前端代码进行打包上传服务器

        6.0 nginx 配置文件结构

        6.1 先了解以下配置文件的结构

        6.2 nginx 主要配置

        6.2.1 静态 HTTP 服务器配置

        6.2.2 反向代理服务器配置

        6.2.3 负载均衡配置

        6.2.4 虚拟主机配置


        1.0 云服务器的准备

        使用云服务是为了可以得到一个 Linux 环境,比如说常用到的 Ubuntu 的配套程序。

        使用云服务器不仅环境搭建简单,避免折腾,同时还有一个最大的好处,部署在云服务器上的项目可以直接被外网访问到,也就能让我们自己写的程序可以给别人直接使用。 

        可以直接在腾讯云、阿里云、华为云等服务器厂商直接购买一个云服务器。购买一个云服务器并不难,如果你会使用京东、淘宝等购物软件下单买帅帅的衣服,买美美的包包的话,那么购买一个服务器简单得就像呼吸一样。

        其中购买云服务器的时候注意一下,建议选 Ubuntu ,因为下面介绍都是以 Ubuntu 为例子进行讲解。

        购买完之后,建议修改一下密码,查看当前云服务器的登录名,还有就是公网 IP 。

用阿里云举个例子:

        首先会得到一个详情信息的服务器。

        1)重置密码

        2)登录名

        如果没有修改过登录名,默认就是 root 。

        3)公网 IP

        从购买到一个云服务器之后,获取到以上三个重要信息,在以下步骤就会使用到这三个信息。

        2.0 Xshell 和 Xftp 软件

        Xshell 和 Xftp 是两款由 NetSarang 公司开发的软件,主要用于网络访问和文件传输。

        下载官网:家庭/学校免费 - NetSarang Website (xshell.com)

        直接下载即可,免费使用。

        2.1 Xshell 介绍

        它的主要用于在 windows 平台上远程连接管理 Linux 系统,用户可以通过 Xshell 连接到远程服务器,执行命令、管理系统、进行系统监控等操作。

Xshell 连接云服务器的步骤:

        1)点击新建:

        2)先起一个好听的名字,再将公网 IP 填写到主机(H),再按确认

        3)双击新建好的会话,之后就会自动弹出来 SSH 用户名卡片的填写,这里用到了连接云服务器的登录名信息。

        4)继续双击会话,之后会弹出用户身份验证,这里用到了连接云服务器的密码信息。

        5)最后出现了绿点和一串复杂的字符串

        出现这些内容则说明已经与云服务器连接起来了。

         其中这一串复杂的字符串就是你购买的云服务器的实例 ID

        2.2 Xftp 介绍

        这是一个文件传输工具,可以将文件从本地上传到云服务器中,也可以从云服务器中下载文件到本地。Xshell 提供了拖放功能、文件同步、文件传输队列等使用功能,提升文件传输效率。

Xftp 连接云服务器的步骤:

        1)点击新建

        2)先起一个巨好听的名字哟,再将公网 IP 输入到主机(H),选择用 Password 的方式连接云服务器。

        3)选中点击会话,再按连接

        4)输入连接云服务器的用户名信息

        5)输入连接云服务器的密码

        6)如果从来没用使用过该云服务器的话,在 /root 目录下是不会出现以下文件的,这是一个正常的情况,以上文件都是我自己手动创建的

         最后 Xshell 和 Xftp 都成功连接上同一个云服务器了。

        3.0 在云服务器进行环境配置

        将项目放到云服务器上运行,那么离不开项目所依赖的环境,比如说 JDK、MySQL、Nginx 等环境的安装。

        3.1 安装 JDK

        1)切换 root 用户的指令:

        命令之前就不需要加 sudo 了。

sudo su

        2)更新软件包的指令:

sudo apt-get update

执行结果:

        3)安装 openjdk 的指令:

#查找 jdk 包
apt list | grep "jdk"#安装 jdk
apt install openjdk-17-jdk

执行结果:

        安装过程中,需要输入确认 y 进行下一步。

        4)验证 jdk 是否安装成功

#查看jdk版本
java -version

执行结果:

        出现相对应的 jdk 的版本和安装日期的提示,则说明安装成功。

        5)卸载 jdk

        如果需要重新下载 jdk 的话,先卸载原先的 jdk 以及相关的 jdk 包。

        3.2 安装 MySQL

        1)安装 MySQL

#查找安装包
apt list | grep "mysql-server"#安装 mysql
apt install mysql-server

执行结果:

        安装过程中,需要输入确认 y 进行下一步。

        2)查看 MySQL 状态

#查看是否安装成功
systemctl status mysql

执行结果:

        3)MySQL 安装安全设置

        默认的 MySQL 设置时不安全的,MySQL 安装提供了一个安全脚本,用于解决不太安全的默认选项,执行以下指令,设置密码:

mysql_secure_installation

        在安装过程中,会出现确认信息

         4)设置密码

        首先连接 mysql 服务器:

mysql

        使用 alter user 命令修改密码:

        红色框中是自己需要设置的密码。

        5)设置完成之后,再使用 mysql 时,需要加上 -p

mysql -p

执行结果:

        这里需要注意,在输入密码的时候,光标是不会动的,而且看不到有字符的输入。

        这样就成功进入到 mysql 了。

        如果需要退出 mysql 的指令:

exit

        6)卸载 Mysql

#停止 mysql
systemctl stop mysql#卸载 mysql
apt-get remove --purge mysql-server mysql-client mysql-common#删除 mysql 配置文件和数据
rm -rf /etc/mysql /var/lib/mysql#清理残留文件和目录
apt-get autoremove
apt-get autoclean#验证卸载结果
mysql --version

        3.3 安装 Nginx

        Nginx 是一款功能强大、灵活且高效的 Web 服务器和反向代理解决方案,广泛应用于各类网站和服务,是全球最流行的 Web 服务器之一。

        1)安装 nginx 命令:

apt install nginx

        2)启动 nginx 命令:

nginx

        3)检查 nginx 是否运行:

ps aux | grep nginx

        4)停止 nginx 

nginx -s stop

        4.0 SpringBoot 后端代码进行打包上传服务器

        将 SpringBoot 项目进行打包:

        1)点击 clean 之后:

        2)点击 package 之后:

        项目打包之后,就放到红色框的路径下。

        3)接着将 jar 包拖到你喜欢的位置,一般放在 root 目录下,需要注意的是,查看 jar 包的大小是否符合,如果不符合,就是打包出错了,需要重新打包。

         4)启动后端服务

nohup java -jar 此处写你项目的jar包名称 &

        nohup:后台运行程序,用于系统后台不断地运行命令,退出终端不会影响程序的运行。

语法格式:

nohup Command [Arg] [&]

参数说明:

        Command:要执行的命令。

        Arg:一些参数,可以指定输出文件。

        &:让命令在后台执行,终端退出后命令仍旧执行。

        5)开放端口号

        如果外网需要访问该服务,需要先服务器防火墙开发对应的端口号。

        手动添加或者设置访问云服务器的规则。

        5.0 Vue 前端代码进行打包上传服务器

        1)前端项目打包指令:

npm run build

        执行完毕之后,会出现 dist 文件

        dist 文件中的内容就是需要上传到云服务器中。 

        同样的,将这些内容复制粘贴到云服务器中,放置的路径需要记住,比如:/var/BookView

        2)对 nginx 配置文件进行配置

        先找到 nginx.conf 配置文件。

         配置 server 块:

        参数讲解:

        listen:监听的端口号

        server_name:表示的是监听从那个 IP 来的请求

        静态文件服务:/var/BookView 该目录就是前端项目包所放置的位置

        反向代理:proxy_pass 处理发送的请求

        最后,重启一下 nginx ,这样项目就部署完毕了,就可以在任何一个有网的地方,都可以访问到你部署的项目了,输入你的公网 IP 加上 nginx 配置的服务端口号。

        6.0 nginx 配置文件结构

        6.1 先了解以下配置文件的结构

Nginx 文件结构:

        全局块:配置影响 nginx 全局的指令。一般有运行 nginx 服务器的用户组,nginx 进程 pid 存放路径,日志存放路径,配置文件引入,允许生成 worker process 数等。
        events 块:配置影响 nginx 服务器或与用户的网络连接。有每个进程的最大连接数,选取哪种事件驱动模型处理连接请求,是否允许同时接受多个网路连接,开启多个网络连接序列化等。
        http 块:可以嵌套多个 server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。如文件引入,mime-type 定义,日志自定义,是否使用 sendfile 传输文件,连接超时时间,单连接请求数等。
        server 块:配置虚拟主机的相关参数,一个 http 中可以有多个 server。
        location 块:配置请求的路由,以及各种页面的处理情况。

...              # 全局块。配置影响nginx全局的指令。events {         # events块。配置影响nginx服务器或与用户的网络连接。...
}http      # http块。可以嵌套多个server,配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置。
{...   # http全局块server        # server块。配置虚拟主机的相关参数,一个http中可以有多个server。 { ...       # server全局块location [PATTERN]   # location块。配置请求的路由,以及各种页面的处理情况。{...}location [PATTERN] {...}}server{...}...     # http全局块
}

        6.2 nginx 主要配置

        6.2.1 静态 HTTP 服务器配置

        首先,Nginx 是一个HTTP 服务器,可以将服务器上的静态文件(如 HTML、图片)通过 HTTP 协议展现给客户端。 
配置: 

server {listen 80;   # 端口server_name localhost  192.168.1.100;   # 域名   location / {             # 代表这是项目根目录root /usr/share/nginx/www;   # 虚拟目录}
}

        通过访问路径带有 / 则在页面就是将 root 代理的项目展示给客户端,也就是静态代理。

        6.2.2 反向代理服务器配置

        什么是反向代理? 
        客户端本来可以直接通过 HTTP 协议访问某网站应用服务器,如果网站管理员在中间加上一个Nginx,客户端请求 Nginx,Nginx 请求应用服务器,然后将结果返回给客户端,此时 Nginx 就是反向代理服务器。

反向代理配置:

server {listen 80;location /api/ {proxy_pass http://192.168.0.112:8080/;   # 应用服务器HTTP地址}
}

        在代理过程中,遇到 /api 路径就会自动代理转发请求到 proxy_pass 应用服务器中,这就是反向代理。在 api 之后加上 "/" 和在引用服务器 HTTP 地址之后加上 "/" 代表会自动将 api 转换为 ""。 

        既然服务器可以直接 HTTP 访问,为什么要在中间加上一个反向代理,不是多此一举吗?反向代理有什么作用?继续往下看,下面的负载均衡、虚拟主机,都基于反向代理实现,当然反向代理的功能也不仅仅是这些。

        6.2.3 负载均衡配置

        当网站访问量非常大,也摊上事儿了。因为网站越来越慢,一台服务器已经不够用了。于是将相同的应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。同时带来的好处是,其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用。Nginx 可以通过反向代理来实现负载均衡。

负载均衡配置:

upstream myapp {server 192.168.0.111:8080;   # 应用服务器1server 192.168.0.112:8080;   # 应用服务器2
}
server {listen 80;location / {proxy_pass http://myweb;}
}

        6.2.4 虚拟主机配置

        有的网站访问量大,需要负载均衡。然而并不是所有网站都如此出色,有的网站,由于访问量太小,需要节省成本,将多个网站部署在同一台服务器上。 
例如将 www.aaa.com 和 www.bbb.com 两个网站部署在同一台服务器上,两个域名解析到同一个 IP 地址,但是用户通过两个域名却可以打开两个完全不同的网站,互相不影响,就像访问两个服务器一样,所以叫两个虚拟主机。

虚拟主机配置:

server {listen 80 default_server;server_name _;return 444;   # 过滤其他域名的请求,返回444状态码
}
server {listen 80;server_name www.aaa.com;   # www.aaa.com域名location / {proxy_pass http://localhost:8080;   # 对应端口号8080}
}
server {listen 80;server_name www.bbb.com;   # www.bbb.com域名location / {proxy_pass http://localhost:8081;   # 对应端口号8081}
}

        在服务器 8080 和 8081 分别开了一个应用,客户端通过不同的域名访问,根据 server_name 可以反向代理到对应的应用服务器。

        虚拟主机的原理是通过 HTTP 请求头中的 Host 是否匹配 server_name 来实现的。

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

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

相关文章

论文降重,Kimi如何助你一臂之力?

在学术研究的浪潮中,原创性和学术诚信是每位研究者必须坚守的灯塔。然而,随着研究领域的不断扩展和深化,论文写作过程中难免会遇到内容重复的问题,这不仅影响论文的独创性,也对学术声誉构成挑战。本文将介绍Kimi的核心…

darnet 识别检测本地视频 保存本地视频

darnet 识别检测本地视频 保存本地视频 darknet的github下载 darknet的github下载 darknet地址 将这个下载后,保存在catkin_ws的src目录下

红黑树、B+Tree、B—Tree

红黑树 B-Tree 这三个通常都是把内存全部加载到内存里,然后再内存中进行处理的,数据量通常不会很大。 内存一般容量都在GB级别,比如说现在常见的4G、8G或者16G。 如果要处理的数据规模非常大,大到内存根本存不下的时候。这个时候只能先存到硬盘里,硬盘呢 容量又比内存大…

谈一谈什么是接口测试?怎样做接口测试?

扫盲内容: 1.什么是接口? 2.接口都有哪些类型? 3.接口的本质是什么? 4.什么是接口测试? 5.问什么要做接口测试? 6.怎样做接口测试? 7.接口测测试点是什么? 8.接口测试都要掌…

mysql数据库----简单认识库的操作

目录 1.区分概念 2.什么是数据库 3.数据库的创建和销毁 4.数据库编码初识 5.查询系统默认编码配置 6.两个查询编码表的指令 7.创建指定编码的数据库 8.不同编码的区别 第一个编码方式: 第二个编码方式: 查询结果说明: 9.数据库的增…

React学习day01-React-开发环境配置、JSX基础-本质、JSX中js表达式的用法、JSX的条件渲染

1、React (1)概念:由Meta公司研发,是一个用于构建Web和原生交互页面的库 (2)优点: 1)相较于传统基于DOM开发的优势:组件化的开发方式、不错的性能 2)相较于…

QT实例1--使用UI文件创建登陆窗口

基础信息 平台:window 10 QT版本 :5.14.2 时间:2024.08.25 本工程是QLayout专题,使用UI文件创建一个登陆窗体 本例程原始资料来源于B站,UP主“爱编程的大丙”的视频教程《QT开发编程-入门基础教程QT5–6.2窗口布局举例-制作一个登陆界面》…

Web开发:ORM框架之Freesql的入门和技巧使用小结

目录 零、官网链接 一、字段映射表 二、基础查询 1.freesql独特封装:between关键字查日期 2.分页(每页 20 条数据,查询第 1 页) 3.Withsql(子查询,不建议) 3.简单查询、映射查询 4.参数查…

数据结构(Java):揭开二叉搜索树删除机制的奥秘

目录 1、二叉搜索树 1.1 概念 2、代码模拟实现 2.1 插入操作 2.2 查找操作 2.3 🌟删除操作🌟(难点) 2.3.1 要删除节点的左子树为空 2.3.2 要删除节点的右子树为空 2.3.3 要删除节点的左右子树均不为空 2.3.4 删除操作代码…

ollma 本地部署大模型

因为我本地是 windows 的系统,所以这里直接写的是通过 docker 来实现本地大模型的部署。 windows 下 WSl 的安装这里就不做重复,详见 windows 部署 mindspore GPU 开发环境(WSL) 一、Docker 部署 ollma 1. 拉取镜像(…

【PyTorch】关于Tensorboard的简单使用

前提文章目录 【PyTorch】深度学习PyTorch环境配置及安装【详细清晰】 【PyTorch】深度学习PyTorch加载数据 文章目录 前提文章目录SummaryWriter使用add_image()的使用(常用来观察训练结果)利用Tensorboard观察图片 SummaryWriter使用 from torch.util…

Graphics2D绘图方法总结

一、简介 在开发中可能会遇到这样一类场景,业务复杂度不算太高,技术难度不算太深,但是做起来就很容易把人整破防,伤害很高侮辱性很强的:绘图。 绘图最怕有人挑刺:这里变形,那里不对&#xff0…

【Node】【2】创建node应用

创建node应用 node应用,不仅可以实现web应用,也能实现http服务器。 如果是php写后端,还需要有http服务器,比如apache 或者 nginx。 但是现在主流都是java写后端,也可以像 Node.js 一样用于实现 Web 应用和 HTTP 服务…

<C++> 多态

目录 一、多态的概念 二、多态的定义和实现 1. 多态的构成条件 2. 虚函数 3.虚函数的重写 3.1 析构函数的重写 4. override 和 final (C11) 5. 重载、重定义(隐藏)、重写(覆盖)的对比 三、抽象类 1. 概念 …

银行总分支文件分发系统:在安全与效率之间找到平衡

银行的组织结构通常根据其规模、业务范围和地域分布而有所不同,但一般会包括以下几个层级:总行-区域总部或分行-分行-支行-业务中心或服务中心-国际分支机构-附属机构或子公司。 在日常中,存在总分支文件分发的业务场景,文件类型通…

高效的时间序列可视化:减少认知负荷获得更清晰的洞察

可视化时间序列数据是具有挑战性,尤其是涉及多个数据集时。精心设计的可视化不仅能清晰地传达信息,还能减少观察者的认知负荷,使其更容易提取有意义的洞察。 在本文中,我们将探讨使真实世界的疫苗接种数据来可视化单个时间序列和多个时间序列。 数据可视化中认知负荷的重要性 …

VScode 连接远程服务器

1、 2、 3、免密登录 1、本地生成密钥 ssh-keygen2、生成的密钥默认在 C:\Users\***\.ssh\ 中3、将私钥 C:\Users\***\.ssh\id_rsa 添加到上面的配置文件中的 IdentityFile 项内4、将公钥 C:\Users\***\.ssh\id_rsa\id_rsa.pub 拷贝到远程 ~/.ssh/authorized_keys 中 4、远程…

wpf 定制 个性圆角信息面板

先上图&#xff1a; 代码实现&#xff1a; <Canvas Grid.Column"1"><Border Background"#5665F4" BorderBrush"#5665F4" BorderThickness"0.5" CornerRadius"10,10,10,30"Width"180" Height"165&qu…

图解Redis五大数据类型

五种数据类型的不同之处&#xff0c;是value在存储时的形式不同。 hash类型 value类型是<key,value>键值对。如果发生hash冲突&#xff0c;用开放定址法解决&#xff0c;不拉链&#xff01; key值重复&#xff0c;则新值覆盖旧值 List类型 Set类型 与List的类似&…

C语言中的预处理详解

1. 预定义符号 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 举个例⼦&#xff1a; printf("file:%s line:%d\n", __FILE__, __LINE__); 2. #define 定义常量 基本语法&#xff1a; #define name stuff 举个例…