nginx加nodejs搭建圖片伺服器-前端問答-PHP中文網

nginx加nodejs搭建圖片伺服器

WBOY

發布： 2023-05-17 10:22:07

原創

639 人瀏覽過

隨著網路的發展，圖片和影片等媒體資源的使用越來越廣泛。身為網站經營者，如何快速、穩定地提供大量的圖片資源成為了一個必須考慮的問題。在此，我們介紹一種使用 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

登入後複製

在專案根目錄下建立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 庫來進行圖片快取。

在專案根目錄下建立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 的設定檔/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 的代理緩存，並且設定了緩存有效期和快取鎖定。這樣可以防止快取雪崩和快取穿透的問題。

三、方案效果

透過上述方案，我們實現了一個可靠、有效率的圖片服務。其主要效果如下：