search
HomeOperation and MaintenanceNginxServing static content using nginx

Serving static content using nginx

Nov 30, 2019 pm 02:37 PM
nginx

Serving static content using nginx

An important web server task is serving files (such as images or static HTML pages).

Depending on the request, files will be served from different local directories: /data/www (which may contain HTML files) and /data/images (which may contain images). This will require editing the configuration file and setting up the server block inside the http block using two location blocks. (Recommended learning: nginx use)

First, create the /data/www directory and put an index.html file containing any text content into it, and create / data/images directory and put some images in it. Create two directories-

[root@localhost ~]# mkdir -p /data/www
[root@localhost ~]# mkdir -p /data/images
[root@localhost ~]#

Put two files in the two directories created above: /data/www/index.html and /data/images/logo.png, /data The content of the /www/index.html file is one line, as follows -

<h2 id="nbsp-New-nbsp-Static-nbsp-WebSite-nbsp-Demo"> New Static WebSite Demo.</h2>

Next, open the configuration file (/usr/local/nginx/conf/nginx.conf). The default configuration file already contains several examples of server blocks, most of which are commented out. Now comment out all such blocks and start a new server block:

http {
    server {
    }
}

Typically, the configuration file can include several server blocks distinguished by the port the server listens on and the server name. When nginx decides which server to handle the request, it tests the URI specified in the request header against the parameters of the location directive defined inside the server block.

Add the following location block to the server block:

http {
    server {
        location / {
            root /data/www;
        }
    }
}
The location block specifies the "/" prefix that is compared to the URI in the request . For matching requests, the URI will be added to the path specified in the root directive (i.e. /data/www) to form the path to the requested file on the local file system. If there are several matching location blocks, nginx will choose the one with the longest prefix to match the location block. The location block above provides the shortest prefix length of 1, so this block will only be used if all other location blocks cannot provide a match.

Next, add a second location block:

http {
    server {
        location / {
            root /data/www;
        }
        location /images/ {
            root /data;
        }
    }
}
It will also match requests starting with /images/(location/, but with a shorter prefix , that is, "/images/" is longer than "/") to match the request.

The final configuration of the server block should look like this:

server {
    location / {
        root /data/www;
    }
    location /images/ {
        root /data;
    }
}

This is already a server listening on the standard port 80 and accessible on the local machine ( http://localhost/ ) working configuration. In response to a request for a URI starting with /images/, the server will send files from the /data/images directory. For example, in response to a http://localhost/images/logo.png request, nginx will send the /data/images/logo.png file on the service. If the file does not exist, nginx will send a response indicating a 404 error. Requests for URIs not starting with /images/ will be mapped to the /data/www directory. For example, in response to a request for http://localhost/about/example.html, nginx will send the /data/www/about/example.html file.

To apply the new configuration, start nginx if it has not been done yet or send a reload signal to nginx's main process by executing the following command:

[root@localhost ~]# /usr/local/nginx/sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
[root@localhost ~]# /usr/local/nginx/sbin/nginx -s reload
If an error or exception prevents the If it works normally, you can try to check the access.log and error.log files in the directory /usr/local/nginx/logs or /var/log/nginx to find the reason.

Open a browser or use CURL to access the Nginx server as shown below-

Serving static content using nginx

The complete nginx.conf file configuration content is as follows:

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  &#39;$remote_addr - $remote_user [$time_local] "$request" &#39;
    # &#39;$status $body_bytes_sent "$http_referer" &#39;
    # &#39;"$http_user_agent" "$http_x_forwarded_for"&#39;;
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    ## 新服务(静态网站)
    server {
        location / {
            root /data/www;
        }
        location /images/ {
            root /data;
        }
    }
}

The above is the detailed content of Serving static content using nginx. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Advantages of NGINX: Speed, Efficiency, and ControlThe Advantages of NGINX: Speed, Efficiency, and ControlMay 12, 2025 am 12:13 AM

The reason why NGINX is popular is its advantages in speed, efficiency and control. 1) Speed: Adopt asynchronous and non-blocking processing, supports high concurrent connections, and has strong static file service capabilities. 2) Efficiency: Low memory usage and powerful load balancing function. 3) Control: Through flexible configuration file management behavior, modular design facilitates expansion.

NGINX vs. Apache: Community, Support, and ResourcesNGINX vs. Apache: Community, Support, and ResourcesMay 11, 2025 am 12:19 AM

The differences between NGINX and Apache in terms of community, support and resources are as follows: 1. Although the NGINX community is small, it is active and professional, and official support provides advanced features and professional services through NGINXPlus. 2.Apache has a huge and active community, and official support is mainly provided through rich documentation and community resources.

NGINX Unit: An Introduction to the Application ServerNGINX Unit: An Introduction to the Application ServerMay 10, 2025 am 12:17 AM

NGINXUnit is an open source application server that supports a variety of programming languages ​​and frameworks, such as Python, PHP, Java, Go, etc. 1. It supports dynamic configuration and can adjust application configuration without restarting the server. 2.NGINXUnit supports multi-language applications, simplifying the management of multi-language environments. 3. With configuration files, you can easily deploy and manage applications, such as running Python and PHP applications. 4. It also supports advanced configurations such as routing and load balancing to help manage and scale applications.

Using NGINX: Optimizing Website Performance and ReliabilityUsing NGINX: Optimizing Website Performance and ReliabilityMay 09, 2025 am 12:19 AM

NGINX can improve website performance and reliability by: 1. Process static content as a web server; 2. forward requests as a reverse proxy server; 3. allocate requests as a load balancer; 4. Reduce backend pressure as a cache server. NGINX can significantly improve website performance through configuration optimizations such as enabling Gzip compression and adjusting connection pooling.

NGINX's Purpose: Serving Web Content and MoreNGINX's Purpose: Serving Web Content and MoreMay 08, 2025 am 12:07 AM

NGINXserveswebcontentandactsasareverseproxy,loadbalancer,andmore.1)ItefficientlyservesstaticcontentlikeHTMLandimages.2)Itfunctionsasareverseproxyandloadbalancer,distributingtrafficacrossservers.3)NGINXenhancesperformancethroughcaching.4)Itofferssecur

NGINX Unit: Streamlining Application DeploymentNGINX Unit: Streamlining Application DeploymentMay 07, 2025 am 12:08 AM

NGINXUnit simplifies application deployment with dynamic configuration and multilingual support. 1) Dynamic configuration can be modified without restarting the server. 2) Supports multiple programming languages, such as Python, PHP, and Java. 3) Adopt asynchronous non-blocking I/O model to improve high concurrency processing performance.

NGINX's Impact: Web Servers and BeyondNGINX's Impact: Web Servers and BeyondMay 06, 2025 am 12:05 AM

NGINX initially solved the C10K problem and has now developed into an all-rounder who handles load balancing, reverse proxying and API gateways. 1) It is well-known for event-driven and non-blocking architectures and is suitable for high concurrency. 2) NGINX can be used as an HTTP and reverse proxy server, supporting IMAP/POP3. 3) Its working principle is based on event-driven and asynchronous I/O models, improving performance. 4) Basic usage includes configuring virtual hosts and load balancing, and advanced usage involves complex load balancing and caching strategies. 5) Common errors include configuration syntax errors and permission issues, and debugging skills include using nginx-t command and stub_status module. 6) Performance optimization suggestions include adjusting worker parameters, using gzip compression and

Nginx Troubleshooting: Diagnosing and Resolving Common ErrorsNginx Troubleshooting: Diagnosing and Resolving Common ErrorsMay 05, 2025 am 12:09 AM

Diagnosis and solutions for common errors of Nginx include: 1. View log files, 2. Adjust configuration files, 3. Optimize performance. By analyzing logs, adjusting timeout settings and optimizing cache and load balancing, errors such as 404, 502, 504 can be effectively resolved to improve website stability and performance.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool