Nginx sample code for implementing dynamic and static separation

Nginx sample code for implementing dynamic and static separation

In combination with the scenario in this article, you need to install Nginx and Java environment (to run the SpringBoot project).

1.1 For information about installing Nginx on Linux, please refer to my article --- (portal).

1.2 In this article, SpringBoot uses the Thymeleaf template and the project port number is 8888.

1.3 jquery.js is stored in the local /Users/dalaoyang/Downloads/static file

2.What is the separation of movement and stillness?

Before we can understand the separation of movement and stillness, we must first understand what movement is and what stillness is.

In web development, generally speaking, dynamic resources refer to background resources, while static resources refer to HTML, JavaScript, CSS, img and other files.

Generally speaking, dynamic resources and static resources need to be separated, and static resources need to be deployed on Nginx. When a request comes, if it is a request for static resources, it will directly obtain the resources from the static resource directory configured by nginx. If it is a request for dynamic resources, nginx uses the principle of reverse proxy to forward the request to the background application for processing, thereby achieving dynamic and static separation.

After using the separation of front-end and back-end, the access speed of static resources can be greatly improved. At the same time, during the development process, the front-end and back-end development can be carried out in parallel, which can effectively improve the development time and reduce the joint debugging time.

3. Project Configuration

Modify the SpringBoot application startup class and make a simple jump so that the access root path can jump to index.html, as shown in the following code.

@SpringBootApplication
@Controller
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/")
	public String index(){
		return "index";
	}
}

The index.html code is as follows. Note that jquery.js is introduced. After the reference is successful, jquery will be used to assign values ​​to div. The code is as follows.

<!DOCTYPE html>
<!--Solve th error-->
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8">
 <title>thymeleaf</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
<h1>This is a static page</h1>
<div id="test_div"></div>
</body>

<script type="text/javascript">
 $('#test_div').html('jquery.js referenced successfully');
</script>

</html>

The project structure is shown below. You can see that there is no jquery.js. All we have to do is use Nginx to access jquery.js.

4. Nginx configuration

Modify the nginx.conf configuration, where the first location is responsible for processing background requests and the second is responsible for processing static resources, as shown below.

worker_processes 1;

events {
 worker_connections 1024;
}

http {

 server {
  listen 10000;
  server_name localhost;
  
  #Intercept background request location / {
  proxy_pass http://localhost:8888;
  proxy_set_header X-Real-IP $remote_addr;
  }

  #Intercept static resources location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
  root /Users/dalaoyang/Downloads/static;
  }

 }

}

5. Testing

Start the SpringBoot application and start Nginx.

Visit http://localhost:10000/ in your browser and you can see the following figure.

The red box content in the figure shows that the static resource is successfully referenced.

6. Summary

I have been reading about nginx recently. I will continue to update articles related to nginx in the near future. If you are interested, please continue to pay attention.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Basic configuration example of Nginx with Apache or Tomcat for dynamic and static separation
  • Using Nginx+uWsgi to separate the dynamic and static parts of Python's Django framework site
  • Simple implementation of nginx+tomcat reverse proxy and dynamic and static separation
  • Detailed explanation of nginx to separate static and dynamic tomcat
  • nginx realizes load balancing and dynamic and static separation
  • Detailed example of deploying Nginx+Apache dynamic and static separation
  • Sample code for nginx to achieve dynamic and static separation
  • Nginx implements dynamic and static separation example explanation
  • Nginx dynamic and static separation implementation case code analysis
  • Detailed explanation of the process of realizing dynamic and static separation in Springmvc nginx
  • Docker Nginx container and Tomcat container to achieve load balancing and dynamic and static separation operations
  • Analysis of the principle of Nginx+Tomcat to achieve load balancing and dynamic and static separation
  • The principle and configuration of Nginx load balancing and dynamic and static separation
  • Example of how nginx implements dynamic and static separation
  • Detailed instructions for nginx from installation to configuration (installation, security configuration, anti-hotlinking, dynamic and static separation, HTTPS configuration, performance optimization)
  • Implementation of Nginx+Tomcat load balancing and dynamic and static separation cluster
  • Server load balancing nginx+tomcat to achieve dynamic and static separation
  • Nginx dynamic and static separation configuration implementation and description

<<:  React antd tabs switching causes repeated refresh of subcomponents

>>:  What to do if you forget the initial password when installing MySQL on Mac

Blog    

Recommend

WeChat applet calculator example

WeChat applet calculator example, for your refere...

The whole process of installing gogs with pagoda panel and docker

Table of contents 1 Install Docker in Baota Softw...

Introduction to MySQL role functions

Table of contents Preface: 1. Introduction to rol...

Use of Linux date command

1. Command Introduction The date command is used ...

The perfect solution for forgetting the password in mysql8.0.19

Recommended reading: MySQL 8.0.19 supports accoun...

Detailed explanation of how Node.js handles ES6 modules

Table of contents 1. Differences between the two ...

HTML tag full name and function introduction

Alphabetical DTD: Indicates in which XHTML 1.0 DT...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

Steps to set up HTTPS website based on Nginx

Table of contents Preface: Encryption algorithm: ...

Realize three-level linkage of year, month and day based on JavaScript

This article shares the specific code for JavaScr...

Some properties in CSS are preceded by "*" or "_".

Some properties in CSS are preceded by "*&qu...

impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a ...

Interview question: Three-row and three-column layout, tables are merged and nested tables are not allowed

There is an interview question that requires: a th...

Let's talk about my understanding and application of React Context

Table of contents Preface First look at React Con...

Instructions for recovering data after accidental deletion of MySQL database

In daily operation and maintenance work, backup o...