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

news2024/11/27 11:36:43

🔥博客主页: 【小扳_-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;   # 应用服务器1
    server 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.coloradmin.cn/o/2062865.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

换代危机,极氪不得不闯的一关

文|刘俊宏 编|王一粟 “今年,不容我们有任何犯错的机会,如果犯错,一定会全盘皆输。” 面临智能化愈发重要的汽车市场,极氪智能科技CEO安聪慧曾在今年初提醒着极氪汽车(下简称极氪&#xff09…

团队管理三大核心要点

团队管理不仅关乎任务的完成效率,更关乎团队成员的成长与团队的持续发展。一个高效、和谐的团队背后,往往离不开管理者对以下几个关键要点的深刻理解和有效实践。 一、以人为本 管理的本质不是简单地“管人”,而是通过管事来激发人的潜能&a…

叉车考证考试题库分享

1、制动效果的良好与否,主要取决于路面制动力的大小。 A、正确 B、错误 答案:A 2、《特种设备使用管理规则》规定,特种设备使用单位应当根据本单位的特种设备数量、特征等配备相应的特种设备作业人员,并且在使用特种设备时应保…

教程2_编辑形状

本文将介绍一些形状的基本编辑 1、对象属性设置 我们通过双击画布上的对象,弹出属性设置框 这里我们使用的是Box对象,每种对象的属性会有差异,根据属性名称进行相应设置即可。 2、对象局部编辑 点击工具栏中的Partial图标 当对象创建后需…

UE5 多个类选择界面生成。解决方案思路。

中控器CC 》用户界面控制器UI_CC 》用户界面UI_Inst 生成 CC使用接口,通知UI_CC开始生成UI_Inst。 蓝图函数库编写判断是否存在和创建UI的蓝图。(此处略) UI_CC生成时,userwidget使用接口,注册UI_CC的用户控件的控件…

(转载)使用zed相机录制视频

参照下面这个链接 https://blog.csdn.net/peng_258/article/details/127457199?ops_request_misc&request_id&biz_id102&utm_termzed2%E5%BD%95%E5%88%B6%E6%95%B0%E6%8D%AE%E9%9B%86&utm_mediumdistribute.pc_search_result.none-task-blog-2~all~sobaiduweb…

AI绘画StableDiffusion有哪几种模型,各个模型之间又有什么作用?小白入门必看扫盲级教程!(附各种模型资料)

大家好,我是画画的小强 在AI绘画工具 Stable Diffusion中,模型有好几种,不同插件有不同的模型,分别作用于不同的功能。 今天强哥就带着大家一起来了解一下。 大模型:Stable Diffusion StableDiffusion大模型&#…

YOLOv8改进 | 融合改进 | C2f 融合Efficient Multi-Scale Conv提升检测效果【改进结构图+完整代码】

秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录 :《YOLOv8改进有效…

[已解决]mac远程连接windows桌面:parallels client连接遇到的问题

[已解决]mac远程连接windows桌面:parallels client连接遇到的问题 问题一:网络不通问题二:远程windows防火墙导致无法连接问题三:远程桌面服务未启动问题四:家庭版(非专业版)windows导致的无法使…

Xilinx FPGA 7系列 GTX/GTH Transceivers

1概述 Xilinx 7系列FPGA全系所支持的GT,GT资源是Xilinx系列FPGA的重要卖点,也是做高速接口的基础,GT的意思是Gigabyte Transceiver,G比特收发器。不管是PCIE、SATA、MAC等,都需要用到GT资源来做数据高速串化和解串处理…

2379.得到K个黑块的最少涂色次数

目录 题目描述 示例1: 示例2: 提示: 解题思路 滑动窗口法 概念 应用场景及特点: 思路 流程展示 代码 复杂度分析 题目描述 给你一个长度为 n 下标从 0 开始的字符串 blocks ,blocks[i] 要么是 W 要么是 B…

Vsphere连接ESXI主机创建虚拟机并安装操作系统

🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧Linux高级管理防护和群集专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️创作…

软碟通刻盘装系统出现错误代码0X800700D解决方案

install.wim大小超过4G,fat32不支持单个文件4G以上的文件。 可以按winR,在弹出的windows程序员运行窗口用cmd命令,调出命令提示符,然后执行convert H:/FS:NTFS命令即可(H为我的U盘盘符,这个根据个人的盘符来定&#xf…

【Linux入门】Liunx权限

文章目录 前言一、用户的概念1.用户的概念2.用户切换1)普通用户切换到超级用户2)超级用户切换到普通用户 二、权限管理1.文件访问者的分类(人)2.文件类型和访问权限(事物属性) 三、文件类型1.基本权限2.文件…

开放式耳机好还是入耳式耳机好?本文章为你讲解

闲话少说,今天的这篇文章就是我个人整理出来对开放式耳机的一些认知分享,就是相当于一份开放式耳机的选购攻略,标准再多也没有使用感好来的直接!感兴趣的朋友一起来了解 什么样的耳机是开放式的 首先区别于封闭式的入耳耳机&…

linux文件——用户缓冲区——概念深度理解、IO模拟实现

前言:本篇文章主要讲解文件缓冲区。 讲解的方式是通过抛出问题, 然后通过分析问题, 将缓冲区的概念与原理一步一步地讲解。同时, 本节内容在最后一部分还会带友友们模拟实现一下c语言的printf, fprintf接口&#xff0c…

5IUX极简主页搜索源码/自定义你的浏览器主页

5IUX极简主页搜索源码,自定义你的浏览器主页。在使用各种导航首页时,我们时常被满屏的广告和资讯所困扰,这款源码可以让你自己设计一个不受干扰的浏览器主页。它不是镜像,也不是代理,只是用作浏览器主页,同…

最近算法岗笔试题整理

目录 1. 子串和子序列的区别? 2. 给一个featuremap 矩阵,行列都代表机器翻译用到的不同的单词的依赖程度,判断这个矩阵是哪个模型生成的? 3. 判断递归函数的时间复杂度 4. K-means 组关键数,选一个K得到SSE&#x…

对于初学者来说,如何选择一个合适的FPGA学习路径?

初学者入门还是相对简单的, 学fpga有专业要求: 一般是电子信息类、自动化类、计算机类等相关专业都是比较合适入行的。 FPGA岗位一般要求熟悉数字电路设计,以及C、verilog等,能够看懂原理图。 像其他专业也可以入行,但…

东南亚超市门店客流统计分析,了解客流高峰期,分析客户喜好

在东南亚的超市中,客流统计分析正成为提升运营效率和了解客户需求的重要手段。 一、客流统计系统集成 先进的客流统计系统通过在超市入口、关键通道和各个区域安装智能传感器,能够准确地记录进出超市的客流量。这些传感器与数据分析软件相结合&#xff0…