学习目标
- 使用域名访问本地项目
- Nginx
- 图片上传
- FastDFS实现图片上传
1.使用域名访问本地项目
1.1.统一环境
我们现在访问页面使用的是:http://localhost:8080
有没有什么问题?
实际开发中,会有不同的环境:
- 开发环境:自己的电脑
- 测试环境:提供给测试人员使用的环境
- 预发布环境:数据是和生成环境的数据一致,运行最新的项目代码进去测试
- 生产环境:项目最终发布上线的环境
如果不同环境使用不同的ip去访问,可能会出现一些问题。为了保证所有环境的一致,我们会在各种环境下都使用域名来访问。
我们将使用以下域名:
- 主域名是:www.powershop.com,powershop.com
- 管理系统域名:manage.powershop.com
- 网关域名:api.powershop.com
- …
但是最终,我们希望这些域名指向的还是我们本机的某个端口。
那么,当我们在浏览器输入一个域名时,浏览器是如何找到对应服务的ip和端口的呢?
1.2.域名解析
一个域名一定会被解析为一个或多个ip。这一般会包含两步:
- 本地域名解析
浏览器会首先在本机的hosts文件中查找域名映射的IP地址,如果查找到就返回IP ,没找到则进行域名服务器解析,一般本地解析都会失败,因为默认这个文件是空的。
- Windows下的hosts文件地址:C:/Windows/System32/drivers/etc/hosts
- Linux下的hosts文件所在路径: /etc/hosts
样式:
# My hosts
127.0.0.1 localhost
- 域名服务器解析
本地解析失败,才会进行域名服务器解析,域名服务器就是网络中的一台计算机,里面记录了所有注册备案的域名和ip映射关系,一般只要域名是正确的,并且备案通过,一定能找到。
1.3.解决域名解析问题
我们不可能去购买一个域名,因此我们可以伪造本地的hosts文件,实现对域名的解析。修改本地的host为:
127.0.0.1 manage.powershop.com
这样就实现了域名的关系映射了。
每次在C盘寻找hosts文件并修改是非常麻烦的,给大家推荐一个快捷修改host的工具,在课前资料中可以找到:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ds2NPbD-1661479858929)(assets\image-20220819111155709.png)]
解压,运行exe文件,添加映射关系(中间用空格隔开):
现在,ping一下域名试试是否畅通:
通过域名访问:我们配置了项目访问的路径,虽然manage.usian.com映射的ip也是127.0.0.1,但是vue会验证host是否符合配置。
解决方案:在vue.conf.js中取消host验证:disableHostCheck: true
重新执行npm run dev
,刷新浏览器:
域名问题解决了,但是现在要访问后台页面,还得自己加上端口:http://manage.powershop.com:8080
。
这就不够优雅了。我们希望的是直接域名访问:http://manage.powershop.com
。这种情况下端口默认是80,如何才能把请求转移到8080端口呢?
这里就要用到反向代理工具:Nginx
2.Nginx
2.1.Nginx介绍
2.1.1.什么是Nginx?
Nginx是一款轻量级的Web 服务器、反向代理服务器及电子邮件(IMAP/POP3)代理服务器,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
特点:反向代理 负载均衡 动静分离
2.1.2.什么是反向代理?
代理服务可简单的分为正向代理和反向代理:
- 正向代理: 用于代理内部网络对internet的连接请求(如VPN/NAT),客户端指定代理服务器,并将本来要直接发送给目标Web服务器的HTTP请求先发送到代理服务器上, 然后由代理服务器去访问Web服务器, 并将Web服务器的Response回传给客户端。
所谓的正向代理就是代理服务器**替代访问方【用户】**去访问目标服务器【服务器】 - 反向代理: 与正向代理相反, 反向代理是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器
所谓的反向代理就是代替服务器接受用户的请求,从目标服务器中取得用户的需求资源,然后发送给用户
2.1.3.什么是负载均衡?
负载均衡:数据流量分摊到多个服务器上执行,减轻每台服务器的压力,多台服务器共同完成工作任务,从而提高了数据的吞吐量。
2.1.4.什么是动静分离?
动静分离:将静态的资源放到反向代理服务器,节省用户的访问时间
Web服务器分2类:
- web应用服务器,如:
- tomcat
- resin
- jetty
- web服务器,如:
- Apache 服务器
- Nginx
- IIS
区分:web服务器不能解析jsp等页面,只能处理js、css、html等静态资源。
并发:web服务器的并发能力远高于web应用服务器。
2.2.安装Nginx
2.2.1.下载Nginx
官方网站:http://nginx.org/
2.2.2.安装nginx
- 安装nginx的依赖库
yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
- 解压安装包
tar -zxvf nginx-1.10.0.tar.gz
- 配置nginx安装包
cd nginx-1.10.0
./configure --prefix=/usr/java/nginx
注意:./configure配置nginx安装到/usr/java/nginx目录下
- 编译并安装
make && make install
2.2.3.目录结构
├── client_body_temp # 临时目录
├── conf # Nginx所有配置文件的目录
│ ├── nginx.conf # Nginx主配置文件
├── fastcgi_temp # fastcgi临时数据目录
├── html # Nginx默认站点目录
│ ├── 50x.html # 错误页面优雅替代显示文件,例如当出现502错误时会调用此页面
│ └── index.html # 默认的首页文件
├── logs # Nginx日志目录
│ ├── access.log # 访问日志文件
│ ├── error.log # 错误日志文件
│ └── nginx.pid # pid文件,Nginx进程启动后,会把所有进程的ID号写到此文件
├── proxy_temp # 临时目录
├── sbin # Nginx命令目录
│ └── nginx # Nginx的启动命令
├── scgi_temp # 临时目录
└── uwsgi_temp # 临时目录
2.3.Nginx的启动及关闭
2.3.1.启动
#在nginx目录下有一个sbin目录,sbin目录下有一个nginx可执行程序
./nginx
测试:
2.3.2.关闭
./nginx -s stop
2.3.3.动态加载配置文件
#可以不关闭nginx的情况下更新配置文件
./nginx -s reload
2.3.4.配置文件介绍
完整配置:
#user nobody;
#工作进程
worker_processes 1;
events {
#连接池连接数
worker_connections 1024;
}
#请求方式
http {
#媒体类型
include mime.types;
#默认媒体类型 二进制
default_type application/octet-stream;
#上传文件
sendfile on;
#超时时间
keepalive_timeout 65;
#gzip on;
#服务器配置
server {
#监听端口
listen 80;
#监听域名
server_name localhost;
#请求头信息
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#请求映射规则,/代表所有请求路径
location / {
#请求转发地址
#root html;
proxy_pass http://manage.powershop.com:8080;
#欢迎页
#index index.html index.htm;
#转发连接超时时间
proxy_connect_timeout 600;
#转发读取超时时间
proxy_read_timeout 600;
}
}
}
2.4.Nginx代理tomcat
2.4.1.在linux中安装两台tomcat
1、解压两个tomcat到/usr/java,分别命名为tomcat1,tomcat2
2、修改tomcat的配置文件,将端口进行修改:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZe48FQf-1661479858937)(assets\1586937991091.png)]
3、将资料中的test.war项目分别发布到两个tomcat中并测试
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aC33rCeN-1661479858937)(assets\1586938247295.png)]
2.4.2.代理一台tomcat(反向代理)
修改nginx/conf/nginx.conf文件:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0R8Eq3uv-1661479858938)(assets\1586936648171.png)]
2.4.3.代理多台tomcat(负载均衡)
1、在http节点上添加一个upstream
2、修改location /下的反向代理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tHiIGEZj-1661479858938)(assets\1586936709489.png)]
2.4.4.负载均衡策略
2.4.4.1.6种负载均衡策略
负载均衡策略 | 说明 |
轮询 | 默认 |
weight | 权重方式 |
ip_hash | 依据ip分配方式 |
least_conn | 按连接数 |
fair | 按响应时间 |
url_hash | 依据URL分配 |
2.4.4.2.权重
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmII29w7-1661479858939)(assets\1586937010122.png)]
2.4.5.Tomcat集群的session共享
问题:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nq1hLwYt-1661479858939)(assets\1586937083723.png)]
方法一:保证一个ip地址永远的访问一台tomcat服务器,就不存在session共享问题了(只支持linux)
即:upstream中添加 ip_hash;
方法二:session的共享
一种使用tomcat广播机制完成session的共享(只支持windows,不推荐的方式)
一种使用redis服务器的方式完成session的共享(推荐的方式)
2.5.动静分离
2.5.1.创建静态资源
在虚拟机中新建images文件夹,并上传图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFwBYQSy-1661479858940)(assets\1586937314644.png)]
2.5.2.配置nginx的nginx.conf
location ~* \.(gif|jpg|png|jpeg)$ {
root /usr/upload/images;
}
2.5.3.测试
http://192.168.202.129/atm.jpg
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seYM0YUZ-1661479858940)(assets\1586937409445.png)]
2.6.nginx解决端口问题
2.6.1.需求分析
利用Nginx的反向代理,就可以解决我们前面所说的端口问题,由于是开发阶段在window中配置Nginx即可。
如图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CoSqTSEM-1661479858941)(assets\1526016663674.png)]
2.6.2.安装
安装
安装非常简单,把课前资料提供的nginx直接解压即可,绿色免安装,舒服!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGNEMHjQ-1661479858941)(assets\0C36B84E.gif)]
我们在window安装一台nginx:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvvjwAi3-1661479858942)(assets/image-20220719163511473.png)]
2.6.3.反向代理配置
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
2.6.3.测试
浏览器访问:http://manage.powershop.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Bw9934J-1661479858942)(assets/image-20220719163630266.png)]
3.6.4.处理流程
- 浏览器准备发起请求,访问http://manage.powershop.com,但需要进行域名解析
- 优先进行本地域名解析,因为我们修改了hosts,所以解析成功,得到地址:127.0.0.1
- 请求被发往解析得到的ip,并且默认使用80端口:http://127.0.0.1:80
本机的nginx一直监听80端口,因此捕获这个请求 - nginx中配置了反向代理规则,将manage.powershop.com代理到127.0.0.1:8080,因此请求被转发
- 后台管理系统得到127.0.0.1:8080请求并处理,完成后将响应返回到nginx
- nginx将得到的结果返回到浏览器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5si5vFAI-1661479858943)(assets/无标题.png)]
3.图片上传
3.1.编写上传功能
3.1.1.controller
编写controller需要知道4个内容:
- 请求方式:上传肯定是POST
- 请求路径:/file/upload
- 请求参数:文件,参数名是file,SpringMVC会封装为一个接口:MultipartFile
- 返回结果:上传成功后得到的文件的url路径,也就是返回String
在上传文件过程中,我们需要对上传的内容进行校验:
- 校验文件的媒体类型
- 校验文件的内容
代码如下:
import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import com.usian.utils.Result;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
/**
* 图片上传
*/
@RestController
@RequestMapping("/file")
public class FileUploadController {
private static final List<String> CONTENT_TYPES = Arrays.asList("image/jpeg", "image/gif");
/**
* 图片上传
*/
@RequestMapping("/upload")
public Result fileUpload(MultipartFile file) {
try {
String originalFilename = file.getOriginalFilename();
// 校验文件的类型
String contentType = file.getContentType();
if (!CONTENT_TYPES.contains(contentType)){
// 文件类型不合法,直接返回
return Result.error("文件类型不合法:"+originalFilename);
}
// 校验文件的内容
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
if (bufferedImage == null) {
return Result.error("文件内容不合法:" + originalFilename);
}
// 保存到服务器
file.transferTo(new File("D:\\images\\" + originalFilename));
// 生成url地址,返回
return Result.ok("http://image.powershop.com/" + originalFilename);
} catch (IOException e) {
e.printStackTrace();
}
return Result.error("服务器内部错误");
}
}
3.1.2.测试上传
我们通过Postman工具来测试:
去目录下查看:
上传成功!
3.2.文件上传的缺陷
先思考一下,现在上传的功能,有没有什么问题?
传统方式:
集群环境:
上传本身没有任何问题,问题出在保存文件的方式,我们是保存在服务器机器,就会有下面的问题:
- 单机器存储,存储能力有限
- 无法进行水平扩展,因为多台机器的文件无法共享,会出现访问不到的情况
- 数据没有备份,有单点故障风险
这个时候,最好使用分布式文件存储来代替本地文件存储。
4.FastDFS
4.1.什么是FastDFS
FastDFS是由淘宝的余庆先生所开发的一个开源的分布式文件系统。用纯C语言开发,功能丰富:
- 文件存储
- 文件同步
- 文件访问(上传、下载)
- 存取负载均衡
- 在线扩容
适合有大容量存储需求的应用或系统。同类的分布式文件系统有谷歌的GFS、HDFS(Hadoop)、TFS(淘宝)等。
4.2.FastDFS的架构
4.2.1.架构图
先上图:
FastDFS两个主要的角色:Tracker Server 和 Storage Server 。
- Tracker:跟踪服务器,管理集群,tracker也可以实现集群。每个tracker节点地位平等。收集Storage集群的状态。
- Storage:存储服务器,实际保存文件,分为多个组,每个组之间保存的文件是不同的。每个组内部可以有多个成员,组成员内部保存的内容是一样的,组成员的地位是一致的,没有主从的概念。
4.2.2.上传和下载流程
上传
- Client通过Tracker server查找可用的Storage server。
- Tracker server向Client返回一台可用的Storage server的IP地址和端口号。
- Client直接通过Tracker server返回的IP地址和端口与其中一台Storage server建立连接并进行文件上传。
- 上传完成,Storage server返回Client一个文件ID(卷、目录),文件上传结束。
下载
- Client通过Tracker server查找要下载文件所在的的Storage server。
- Tracker server向Client返回包含指定文件的某个Storage server的IP地址和端口号。
- Client直接通过Tracker server返回的IP地址和端口与其中一台Storage server建立连接并指定要下载文件。
- 下载文件成功。
4.3.安装和使用
4.4.java客户端
余庆先生提供了一个Java客户端,但是作为一个C程序员,写的java代码可想而知。而且已经很久不维护了。
这里推荐一个开源的FastDFS客户端,支持SpringBoot。
配置使用极为简单,支持连接池,支持自动生成缩略图,狂拽酷炫吊炸天啊,有木有。
接下来,我们就用FastDFS改造power_shop_item工程。
4.4.1.引入依赖
在父工程中,添加管理依赖,版本为:
<fastDFS-client-version>1.26.2</fastDFS-client-version>
<!--fastdfs-->
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
<version>${fastDFS-client-version}</version>
</dependency>
因此,这里我们直接在power_shop_item工程的pom.xml中引入坐标即可:
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
</dependency>
4.4.2.引入配置类
纯java配置:
@Configuration
//只需要一行注解 @Import(FdfsClientConfig.class)就可以拥有带有连接池的FastDFS Java客户端了
@Import(FdfsClientConfig.class)
public class FastClientImporter {
}
4.4.3.编写FastDFS属性
在application.yml配置文件中追加如下内容:
fdfs:
so-timeout: 1501 # 超时时间
connect-timeout: 601 # 连接超时时间
thumb-image: # 缩略图
width: 60
height: 60
tracker-list: # tracker地址:你的虚拟机服务器地址+端口(默认是22122)
- 192.168.204.130:22122
4.4.4.配置hosts
将来通过域名:image.powershop.com这个域名访问fastDFS服务器上的图片资源。所以,需要代理到虚拟机地址:http://image.powershop.com/group1/M00/00/00/wKjMhV7Du3WATIbZAABIvlHWjnY123.png
- 配置hosts文件,使image.powershop.com可以访问fastDFS服务器
#测试环境
192.168.204.158 image.powershop.com
4.4.5.测试
创建测试类:
import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.domain.ThumbImageConfig;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.junit4.SpringRunner;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest(classes={PowerShopItemApp.class})
public class FastDFSTest {
@Autowired
private FastFileStorageClient storageClient;
@Autowired
private ThumbImageConfig thumbImageConfig;
@Test
public void testUpload() throws FileNotFoundException {
// 要上传的文件
File file = new File("D:/images/1.jpg");
// 上传并保存图片,参数:1-上传的文件流 2-文件的大小 3-文件的后缀 4-可以不管他
StorePath storePath = this.storageClient.uploadFile(
new FileInputStream(file), file.length(), "jpg", null);
// 带分组的路径
System.out.println(storePath.getFullPath());
// 不带分组的路径
System.out.println(storePath.getPath());
}
@Test
public void testUploadAndCreateThumb() throws FileNotFoundException {
File file = new File("D:/images/1.jpg");
// 上传并且生成缩略图
StorePath storePath = this.storageClient.uploadImageAndCrtThumbImage(
new FileInputStream(file), file.length(), "png", null);
// 带分组的路径
System.out.println(storePath.getFullPath());
// 不带分组的路径
System.out.println(storePath.getPath());
// 获取缩略图路径
String path = thumbImageConfig.getThumbImagePath(storePath.getFullPath());
System.out.println(path);
}
}
结果:
group1:卷名
/M00:store_path0 目录
00/00:两层256个文件夹
group1/M00/00/00/wKg4ZVsWl5eAdLNZAABAhya2V0c424.jpg
M00/00/00/wKg4ZVsWl5eAdLNZAABAhya2V0c424.jpg
group1/M00/00/00/wKjpgV6XBT2Abi8rAACaMWefTPs531.png
M00/00/00/wKjpgV6XBT2Abi8rAACaMWefTPs531.png
group1/M00/00/00/wKjpgV6XBT2Abi8rAACaMWefTPs531_60x60.png
访问第二组第一个路径:
访问最后一个路径(缩略图路径):
4.4.6.改造上传逻辑
import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import com.usian.utils.Result;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Arrays;
import java.util.List;
/**
* 图片上传
*/
@RestController
@RequestMapping("/file")
public class FileUploadController {
@Autowired
private FastFileStorageClient storageClient;
private static final List<String> CONTENT_TYPES =
Arrays.asList("image/jpeg", "image/gif");
/**
* 图片上传
*/
@RequestMapping("/upload")
public Result fileUpload(MultipartFile file) {
try {
String originalFilename = file.getOriginalFilename();
// 校验文件的类型
String contentType = file.getContentType();
if (!CONTENT_TYPES.contains(contentType)){
// 文件类型不合法,直接返回
return Result.error("文件类型不合法:"+originalFilename);
}
// 校验文件的内容
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
if (bufferedImage == null) {
return Result.error("文件内容不合法:" + originalFilename);
}
// 保存到服务器
//file.transferTo(new File("D:\\images\\" + originalFilename));
String ext = StringUtils.substringAfterLast(originalFilename, ".");
StorePath storePath = this.storageClient.uploadFile(file.getInputStream(),
file.getSize(), ext, null);
// 生成url地址,返回
return Result.ok("http://image.usian.com/" + storePath.getFullPath());
} catch (IOException e) {
e.printStackTrace();
}
return Result.error("服务器内部错误");
}
}
只需要把原来保存文件的逻辑去掉,然后上传到FastDFS即可。
4.5.测试页面上传
上传成功:
查询列表显示图片地址: