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

Recommend

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

Detailed explanation of overflow-scrolling to solve scrolling lag problem

Preface If you use the overflow: scroll attribute...

How to install redis in docker and set password and connect

Redis is a distributed cache service. Caching is ...

JavaScript typing game

This article shares the specific code of JavaScri...

Common usage of hook in react

Table of contents 1. What is a hook? 2. Why does ...

Use personalized search engines to find the personalized information you need

Many people now live on the Internet, and searchin...

CSS scroll-snap scroll event stop and element position detection implementation

1. Scroll Snap is a must-have skill for front-end...

An example of using CSS3 animation to achieve the effect of a circle expanding from small to large and spreading outward

Preface This article mainly shares with you an ex...

Specific use of ES6 array copy and fill methods copyWithin() and fill()

Table of contents Batch copy copyWithin() Fill ar...

Detailed explanation of jQuery's copy object

<!DOCTYPE html> <html lang="en"...

Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 2)

The above article has temporarily concluded my int...

Example of converting spark rdd to dataframe and writing it into mysql

Dataframe is a new API introduced in Spark 1.3.0,...

Reference SVG images in CSS to support dynamic color switching implementation code

When we add an svg image to display, react prompt...

Example of using the href attribute and onclick event of a tag

The a tag is mainly used to implement page jump, ...

WeChat applet implements jigsaw puzzle game

This article shares the specific code for impleme...