nginx加nodejs搭建图片服务器-前端问答-PHP中文网

首页

web前端

前端问答

nginx加nodejs搭建图片服务器

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2023 am 10:22 AM

随着互联网的发展，图片和视频等媒体资源的使用越来越广泛。作为网站运营者，如何快速、稳定地提供海量的图片资源成为了一个必须考虑的问题。在此，我们介绍一种使用 nginx 与 Node.js 搭建图片服务器的方案，来提供高效、快速、可靠的图片服务。

一、方案概述

该方案的主要组成部分如下：

使用 nginx 来提供静态文件服务，如图片、视频等；
使用 Node.js 来做图片的处理和缓存；
利用 Redis 内存数据库来缓存图片。

在此方案中，nginx 来提供静态文件服务，而 Node.js 作为处理中心，负责处理图片的缩放、裁剪、水印等操作。同时，利用 Redis 的缓存机制，减少 Node.js 频繁读取图片的次数，提高图片处理速度和响应时间。

二、方案实现

安装 nginx

通过 apt-get 安装 nginx：

sudo apt-get update
sudo apt-get install nginx

登录后复制

安装 Node.js 和 npm

通过 nvm 安装 Node.js 和 npm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm install <node-version>

登录后复制

安装 Redis

通过 apt-get 安装 Redis：

sudo apt-get update
sudo apt-get install redis-server

登录后复制

创建 Node.js 项目

在项目根目录下创建 package.json 文件，添加以下内容：

{
  "name": "image-server",
  "version": "1.0.0",
  "description": "An image server based on Node.js",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1",
    "sharp": "^0.28.3",
    "redis": "^3.0.2"
  }
}

登录后复制

其中，我们使用了 Express 框架来处理 HTTP 请求，Sharp 库来进行图片处理，Redis 库来进行图片缓存。

编写 Node.js 代码

在项目根目录下创建 app.js 文件，编写以下代码：

const express = require('express');
const sharp = require('sharp');
const redis = require('redis');

const app = express();
const port = process.env.PORT || 3000;

// Connect to Redis
const redisClient = redis.createClient();

// Handle image requests
app.get('/:path', async (req, res) => {
  const { path } = req.params;
  const { w, h, q } = req.query;

  // Check if the image exists in Redis cache
  redisClient.get(path, async (err, cachedImage) => {
    if (cachedImage) {
      // Serve the cached image
      res.header('Content-Type', 'image/jpeg');
      res.send(cachedImage);
    } else {
      // Read the original image
      const image = sharp(`images/${path}`);

      // Apply image transforms
      if (w || h) image.resize(Number(w), Number(h));
      if (q) image.jpeg({ quality: Number(q) });

      // Convert the image to Buffer
      const buffer = await image.toBuffer();

      // Cache the image in Redis
      redisClient.set(path, buffer);

      // Serve the transformed image
      res.header('Content-Type', 'image/jpeg');
      res.send(buffer);
    }
  });
});

// Start the server
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

登录后复制

在该代码中，我们首先使用 RedisClient 连接到 Redis 服务器。对于每个请求，我们首先检查 Redis 缓存中是否存在该图片。如果缓存中存在图片，我们直接用缓存中的图片响应请求；否则，我们使用 Sharp 库中的 resize 和 jpeg 方法处理图片，转化成 Buffer 格式，并将其存入 Redis 缓存中。

配置 nginx

在 nginx 的配置文件 /etc/nginx/nginx.conf 中添加以下内容：

http {
  ...

  # Set proxy cache path
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
  proxy_cache_key "$scheme$request_method$host$request_uri";

  ...

  server {
    listen 80;
    server_name example.com;

    location /images/ {
      # Enable proxy cache
      proxy_cache my_cache;
      proxy_cache_valid 60m;
      proxy_cache_lock on;

      # Proxy requests to Node.js app
      proxy_pass http://127.0.0.1:3000/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

      # Enable caching of proxied responses
      proxy_cache_revalidate on;
      proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
    }
  }
}

登录后复制

在该配置文件中，我们使用了 nginx 的反向代理功能，将图片请求转发给 Node.js 应用后处理，并使用 Redis 进行图片缓存。同时，我们配置了 nginx 的代理缓存，并且设置了缓存有效期和缓存锁。这样可以防止缓存雪崩和缓存穿透的问题。

三、方案效果

通过上述方案，我们实现了一个可靠、高效的图片服务。其主要效果如下：