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