nginx plus nodejs to build image server

With the development of the Internet, media resources such as pictures and videos are used more and more widely. As a website operator, how to quickly and stably provide massive image resources has become an issue that must be considered. Here, we introduce a solution to build an image server using nginx and Node.js to provide efficient, fast, and reliable image services.

1. Overview of the plan

The main components of the plan are as follows:

• Use nginx to provide static file services, such as pictures, videos, etc.;
• Use Node.js to process and cache images;
• Use Redis memory database to cache images.

In this solution, nginx provides static file services, and Node.js serves as the processing center, responsible for processing image scaling, cropping, watermarking and other operations. At the same time, the caching mechanism of Redis is used to reduce the number of times Node.js frequently reads images and improve image processing speed and response time.

2. Solution implementation

1. Install nginx

Install nginx through apt-get:

sudo apt-get update
sudo apt-get install nginx

2. Install Node. js and npm

Install Node.js and npm through nvm:

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

3. Install Redis

Install Redis through apt-get:

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

4. Create Node.js project

Create a package.json file in the project root directory and add the following content:

{
  "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"
  }
}

Among them, we used The Express framework handles HTTP requests, the Sharp library handles image processing, and the Redis library handles image caching.

5. Write Node.js code

Create the app.js file in the project root directory and write the following code:

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}`);
});

In this code, We first connect to the Redis server using RedisClient. For each request, we first check if the image exists in the Redis cache. If there is an image in the cache, we directly respond to the request with the image in the cache; otherwise, we use the resize and jpeg methods in the Sharp library to process the image, convert it into a Buffer format, and store it in the Redis cache.

6. Configure nginx

Add the following content to the nginx configuration file/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;
    }
  }
}

In the configuration file , we used the reverse proxy function of nginx to forward the image request to the Node.js application for post-processing, and used Redis for image caching. At the same time, we configured nginx's proxy cache and set the cache validity period and cache lock. This prevents cache avalanches and cache penetration problems.

3. Solution effect

Through the above solution, we have achieved a reliable and efficient picture service. Its main effects are as follows:

1. Reduces the load on the image server and improves the stability and reliability of the website.
2. Using nginx proxy cache and Redis cache technology reduces image processing and transmission time and improves the response speed of image services.
3. Use the Node.js application as the processing center of the image service to facilitate image processing and management.
4. By configuring nginx reverse proxy and Redis cache, problems such as cache avalanche and cache penetration are avoided, ensuring the quality and availability of image services.

To sum up, we used a solution combining nginx and Node.js to build an efficient and reliable image server. While achieving high-quality image services, we also provide website operators with More choices.

The above is the detailed content of nginx plus nodejs to build image server. For more information, please follow other related articles on the PHP Chinese website!