Nginx 图片上传 FastDFS

学习目标

• 使用域名访问本地项目
• 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文件并修改是非常麻烦的，因此我这里使用SwitchHosts进行切换的方式去修改hosts文件，只需要添加域名与ip的映射关系即可（中间用空格隔开）：

现在，ping一下域名试试是否畅通：

通过域名访问：我们配置了项目访问的路径，虽然manage.powershop.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/local/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 -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/local，分别命名为tomcat1，tomcat2

2、修改tomcat的配置文件，将端口进行修改:

3、启动tomcat，启动的时候赋予启动命令权限

chmod 777 startup.sh
chmod 777 catalina.sh
启动 ./catalina.sh run

3、将资料中的test.war项目分别发布到两个tomcat中并测试

2.4.2.代理一台tomcat（反向代理）

修改nginx/conf/nginx.conf文件：

2.4.3.代理多台tomcat（负载均衡）

1、在http节点上添加一个upstream

2、修改location /下的反向代理

2.4.4.负载均衡策略

2.4.4.1.6种负载均衡策略

负载均衡策略	说明
轮询	默认
weight	权重方式
ip_hash	依据ip分配方式
least_conn	按连接数
fair	按响应时间
url_hash	依据URL分配

2.4.4.2.权重

测试

2.4.5.Tomcat集群的session共享

问题：

方法一：保证一个ip地址永远的访问一台tomcat服务器,就不存在session共享问题了（只支持linux）

      即：upstream中添加 ip_hash;
      或者使用url_hash 根据url算出hash值对2取余数持续访问一台服务器 hash $request_uri

方法二：session的共享

      一种使用tomcat广播机制完成session的共享（只支持windows，不推荐的方式）session复制
      一种使用redis服务器的方式完成session的共享（推荐的方式）

2.5.动静分离

2.5.1.创建静态资源

在虚拟机中新建images文件夹，并上传图片

​

2.5.2.配置nginx的nginx.conf

	location ~* \.(gif|jpg|png|jpeg)$ {
		root /usr/upload/images;
	}

2.5.3.测试

http://192.168.182.133/111.jpg
http://192.168.182.133/222.jpg

2.6.nginx解决端口问题

2.6.1.需求分析

利用Nginx的反向代理，就可以解决我们前面所说的端口问题，由于是开发阶段在window中配置Nginx即可。

如图：

2.6.2.安装

安装

安装非常简单，把课前资料提供的nginx直接解压即可，绿色免安装，舒服！

我们在window安装一台nginx：

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

3.6.4.处理流程

1. 浏览器准备发起请求，访问http://manage.powershop.com，但需要进行域名解析

2. 优先进行本地域名解析，因为我们修改了hosts，所以解析成功，得到地址：127.0.0.1

3. 请求被发往解析得到的ip，并且默认使用80端口：http://127.0.0.1:80

   本机的nginx一直监听80端口，因此捕获这个请求

4. nginx中配置了反向代理规则，将manage.powershop.com代理到127.0.0.1:8080，因此请求被转发

5. 后台管理系统得到127.0.0.1:8080请求并处理，完成后将响应返回到nginx

6. nginx将得到的结果返回到浏览器

3.图片上传

3.1.首先测试上传服务器

1、向父项目中添加FastDFS java客户端的版本依赖

			<fastDFS-client-version>1.26.2</fastDFS-client-version>

            <dependency>
                <groupId>com.github.tobato</groupId>
                <artifactId>fastdfs-client</artifactId>
                <version>${fastDFS-client-version}</version>
            </dependency>

2、向power_shop_item中添加FastDFS java客户端的依赖，以及test测试依赖

		<dependency>
            <groupId>com.github.tobato</groupId>
            <artifactId>fastdfs-client</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

3、编写测试功能

3.2.编写上传功能

3.2.1.controller

编写controller需要知道4个内容：

• 请求方式：上传肯定是POST
• 请求路径：/file/upload
• 请求参数：文件，参数名是file，SpringMVC会封装为一个接口：MultipartFile
• 返回结果：上传成功后得到的文件的url路径，也就是返回String

在上传文件过程中，我们需要对上传的内容进行校验：

1. 校验文件的媒体类型
2. 校验文件的内容

代码如下：

import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import com.bjpowershop.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.2.2.测试上传

我们通过Postman工具来测试：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSr5e0h7-1665994956810)(assets\1586920122454.png)]

去目录下查看：

上传成功！

3.3.文件上传的缺陷

先思考一下，现在上传的功能，有没有什么问题？

传统方式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fw80ZkRi-1665994956811)(assets\1586701007584.png)]

集群环境：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wJpQLmgf-1665994956812)(assets\1586701282971.png)]

上传本身没有任何问题，问题出在保存文件的方式，我们是保存在服务器机器，就会有下面的问题：

• 单机器存储，存储能力有限
• 无法进行水平扩展，因为多台机器的文件无法共享,会出现访问不到的情况
• 数据没有备份，有单点故障风险

这个时候，最好使用分布式文件存储来代替本地文件存储。

4.FastDFS

4.1.什么是FastDFS

FastDFS是由淘宝的余庆先生所开发的一个开源的分布式文件系统。用纯C语言开发，功能丰富：

• 文件存储
• 文件同步
• 文件访问（上传、下载）
• 存取负载均衡
• 在线扩容

适合有大容量存储需求的应用或系统。同类的分布式文件系统有谷歌的GFS、HDFS（Hadoop）、TFS（淘宝）等。

4.2.FastDFS的架构

4.2.1.架构图

先上图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2UftGWH7-1665994956813)(assets\QQ图片20200518193927.png)]

FastDFS两个主要的角色：Tracker Server 和 Storage Server 。

• Tracker：跟踪服务器，管理集群，tracker也可以实现集群。每个tracker节点地位平等。收集Storage集群的状态。

• Storage：存储服务器，实际保存文件，分为多个组，每个组之间保存的文件是不同的。每个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有主从的概念。

4.2.2.上传和下载流程

上传

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n7IYbWjm-1665994956813)(assets/1526205664373.png)]

1. Client通过Tracker server查找可用的Storage server。
2. Tracker server向Client返回一台可用的Storage server的IP地址和端口号。
3. Client直接通过Tracker server返回的IP地址和端口与其中一台Storage server建立连接并进行文件上传。
4. 上传完成，Storage server返回Client一个文件ID（卷、目录），文件上传结束。

下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z6MfS4v6-1665994956814)(assets/1526205705687.png)]

1. Client通过Tracker server查找要下载文件所在的的Storage server。
2. Tracker server向Client返回包含指定文件的某个Storage server的IP地址和端口号。
3. Client直接通过Tracker server返回的IP地址和端口与其中一台Storage server建立连接并指定要下载文件。
4. 下载文件成功。

4.3.安装和使用

参考课前资料的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alTUA1aM-1665994956815)(assets/image-20220419142445425.png)]

4.4.java客户端

余庆先生提供了一个Java客户端，但是作为一个C程序员，写的java代码可想而知。而且已经很久不维护了。

这里推荐一个开源的FastDFS客户端，支持SpringBoot。

配置使用极为简单，支持连接池，支持自动生成缩略图，狂拽酷炫吊炸天啊，有木有。

地址：tobato/FastDFS_client

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpDlT8Pd-1665994956815)(assets/1526206304954.png)]

接下来，我们就用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.116.133: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

访问第二组第一个路径：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWH7DRgF-1665994956816)(assets/image-20220421091614986.png)]

访问最后一个路径（缩略图路径）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VtwHC2kK-1665994956816)(assets/image-20220421091758273.png)]

4.4.6.改造上传逻辑

import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import com.bjpowershop.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.powershop.com/" + storePath.getFullPath());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.error("服务器内部错误");
    }
}

只需要把原来保存文件的逻辑去掉，然后上传到FastDFS即可。

4.5.测试页面上传

上传成功：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uF3cXVfh-1665994956817)(assets\1586931967256.png)]

查询列表显示图片地址：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHpOJSWR-1665994956817)(assets\1586931998814.png)]