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

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

文章目录

[1.0 云服务器的准备](#1.0 云服务器的准备)

[2.0 Xshell 和 Xftp 软件](#2.0 Xshell 和 Xftp 软件)

[2.1 Xshell 介绍](#2.1 Xshell 介绍)

[2.2 Xftp 介绍](#2.2 Xftp 介绍)

[3.0 在云服务器进行环境配置](#3.0 在云服务器进行环境配置)

[3.1 安装 JDK](#3.1 安装 JDK)

[3.2 安装 MySQL](#3.2 安装 MySQL)

[3.3 安装 Nginx](#3.3 安装 Nginx)

[4.0 SpringBoot 后端代码进行打包上传服务器](#4.0 SpringBoot 后端代码进行打包上传服务器)

[5.0 Vue 前端代码进行打包上传服务器](#5.0 Vue 前端代码进行打包上传服务器)

[6.0 nginx 配置文件结构](#6.0 nginx 配置文件结构)

[6.1 先了解以下配置文件的结构](#6.1 先了解以下配置文件的结构)

[6.2 nginx 主要配置](#6.2 nginx 主要配置)

[6.2.1 静态 HTTP 服务器配置](#6.2.1 静态 HTTP 服务器配置)

[6.2.2 反向代理服务器配置](#6.2.2 反向代理服务器配置)

[6.2.3 负载均衡配置](#6.2.3 负载均衡配置)

[6.2.4 虚拟主机配置](#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;   # 应用服务器1
    server 192.168.0.112:8080;   # 应用服务器2
}
server {
    listen 80;
    location / {
        proxy_pass http://myweb;
    }
}

6.2.4 虚拟主机配置

有的网站访问量大,需要负载均衡。然而并不是所有网站都如此出色,有的网站,由于访问量太小,需要节省成本,将多个网站部署在同一台服务器上。
例如将 www.aaa.comwww.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 来实现的。

相关推荐
克鲁德战士5 分钟前
【Java并发编程的艺术3】Java内存模型(下)
java·开发语言·redis
爱上语文7 分钟前
Maven快速入门及其POM
java·maven
ZmyCoder16 分钟前
SpringBoot中忽略实体类中的某个属性不返回给前端的方法
java
哎呦没17 分钟前
英语知识网站开发:Spring Boot框架技巧
spring boot·后端·性能优化
是小博同学鸭17 分钟前
【面向对象的程序设计——集合框架】主要接口
java·开发语言
ZmyCoder17 分钟前
springboot项目使用maven打包,第三方jar问题
spring boot·maven
世间万物皆对象21 分钟前
Spring Boot Web应用开发:数据访问
java·数据库·spring boot
冰冻果冻33 分钟前
vue--制作购物车
前端·javascript·vue.js
顽疲40 分钟前
springboot vue 开源 会员收银系统 (9) 库存管理 结算时扣库存
vue.js·spring boot·后端
2401_857600951 小时前
英语知识在线教学:Spring Boot网站构建
spring boot·后端·mfc