preface

As a front-end developer, configuring a static Web server with Nginx is one of the features we often use. In addition, we have little contact with other functions of NGINx, such as load balancing and reverse proxy. However, IN my opinion, in order to master nGINx, we need to learn more about its functions as well as the design architecture and principle of NGINx. If we want to master this quickly, I think it is one of the fastest ways to use NGINx. This chapter describes the process of setting up nGINx.

Basic implementation

The basic function

  • File directory View
  • Click on the file directory to show the next level
  • Number of files in file directory display (to be determined)
  • Click the File Download function
  • File information display (Updated at File type File size)
  • File upload function (to be determined)
  • File directory search function (to be determined)
  • File directory Custom style (to be determined FancyIndex)

The relevant API

The nginx module is ngx_http_autoindex_module, which handles requests ending in a slash (‘/’) and generates a list of directories.

  • Autoindex: Enables or disables directory list output.
  • Autoindex_exact_size: The default value is ON and displays the exact size of the file in bytes. After the value is changed to OFF, the approximate size of the file is displayed in kB, MB, or GB
  • Autoindex_format: HTML | | XML json | json;
  • Autoindex_localtime: The default value is off and the file time is displayed in GMT.

After the file time is changed to on, the file time displayed is the server time of the file

Implementation steps

  • Server (Baidu Cloud Ubuntu)
  • Install nginx
apt install nginx
Copy the code
  • Configure nginx
http{ server{ location /test{ alias /var/www; // Directory path autoindex on; }}}Copy the code
  • Test/enable nginx
Nginx -s start nginx -s start nginx -s startCopy the code
  • Open the browser page

Nginx- FancyIndex-theme: nginx – Fancyindex-theme: nginx – Fancyindex-theme: nginx – Fancyindex-theme: nginx – Fancyindex-theme

Facyindex is used for configuration

When we are not satisfied with nginx’s built-in file server style, we can use facyIndex to reformat the directory style, as follows

Environment installation (must be on a Linux machine, window has not been tried)

  • Download nginx and FancyIndex source code for centos
yum install https://extras.getpagespeed.com/redhat/7/x86_64/RPMS/nginx-module-fancyindex-1.12.0.0.4.1-1.el7.gps.x86_64.rpm

Copy the code
  • Install fancyindex
yum install nginx-module-fancyindex
Copy the code
  • Loading fancyindex
load_module "modules/ngx_http_fancyindex_module.so";
Copy the code

// If the system is Ubuntu, it is simpler

  • Install fancyindex
sudo apt-get install nginx-extras
Copy the code

Configuration fancyindex

  • Basic configuration
location /teset { alias /var/www; // Directory path fancyindex on; # Enable fancy indexes. fancyindex_exact_size off; # Output human-readable file sizes. }Copy the code
  • Other fancyIndex configurations
// Allows you to insert links to CSS stylesheets in the generated listings. This link will be inserted after the built-in CSS rule, so you can override the default style. Fancyindex_css_href // specifies which file should be inserted at the bottom of the directory listing. If set to an empty string, the default footer provided by the module is sent. Fancyindex_footer // Specifies which file should be inserted into the directory listing header. If set to an empty string, send the default header provided by the module. Fancyindex_header //Enables showing file times as local time. Default is "off" fancyindex_ignore //Enables showing file times as local time. (GMT time). fancyindex_localtimeCopy the code

Start the nginx

nginx -t
nginx -s reload
Copy the code

At this point we can implement a more beautiful file server than the default format, as shown below:This is definitely not enough, so we can introduce an open source plugin called FancyIndex-Theme, which provides two themes: light and dark. I chose the Light theme to build it

Introducing fancyindex – theme

Note: FancyIndex-theme is a plugin based on FancyIndex, which provides a more beautiful file display page. And some retrieval operations.

  • Prepare the environment for the first two steps
  • Clone fancyindex – theme warehouse
git clone https://github.com/Naereen/Nginx-Fancyindex-Theme
Copy the code
  • Place the light theme file in the appropriate folder (and the path defined by the Alias in the configuration file)
cp Nginx-Fancyindex-Theme-light /var/www/Nginx-Fancyindex-Theme-light
Copy the code
  • Modify the nginx configuration file
{
       fancyindex_localtime on;
        fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
}
Copy the code

Note: If we set location to /test in nginx, then we need to write fancyindex_header and fancyindex_footer as follows

{
     fancyindex_header "/test/Nginx-Fancyindex-Theme-light/header.html";
        fancyindex_footer "/test/Nginx-Fancyindex-Theme-light/footer.html";
}
Copy the code

Also in/nginx-fancyindex-theme-light /footer.html and fancyIndex_header The “/ nginx-fancyindex-theme-light /header. HTML “file needs to be prefixed with test wherever external files are imported

 <link rel="stylesheet" href="/test/Nginx-Fancyindex-Theme/styles.css">
<script type="text/javascript" src="/test/Nginx-Fancyindex-Theme/jquery.min.js"></script>
Copy the code

This is caused by nGINx route matching rules.

  • Refresh the page after restart as shown below:

conclusion

This section is mainly to understand the use of Nginx in building a static file server. Although the default nginx file module can meet our functional requirements, it is one of the essential qualities for a front-end engineer to pursue friendly interaction. In addition, in this big front-end era, for front-end development to master Nginx is equivalent to the front end of another possible.

Command summary:

  • 1. Autoindex Enables the file server function
  • 2. Alias Sets the path of the file server
  • 3. Fancyindex file display style optimization