This paper uses Nginx to achieve simple static and static separation, this paper uses Nginx and a SpringBoot simple Web application.

1. Preparation.

For this scenario, you need to install Nginx and a Java environment (running the SpringBoot project).

1.1 For details on installing Nginx on Linux, see my article (Portal).

1.2 This paper uses the Thymeleaf template for SpringBoot, and the project port number is 8888.

1.3 in local/Users/dalaoyang/Downloads/static file to store the jquery. Js

2. What is static separation?

Before we can understand the separation of motion and motion, we need to understand what is motion and what is static.

In Web development, generally speaking, dynamic resources actually refer to those background resources, and static resources refer to HTML, JavaScript, CSS, IMG files.

Static resources are deployed on Nginx. When a request comes in, if it is a static resource request, it goes directly to the static resource directory configured by Nginx. If it is a dynamic resource request, Nginx uses the principle of reverse proxy. The request is forwarded to the background application for processing, so as to achieve static and static separation.

After using the front and back end separation, the access speed of static resources can be greatly improved. Meanwhile, the development time can be effectively improved by making the front and back end development parallel in the open process, and the joint adjustment time can also be reduced to some extent.

3. Project configuration

Modify the SpringBoot application startup class to make a simple jump to the root path to index.html, as shown in the code below.

@SpringBootApplication
@Controller
public class DemoApplication {

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

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

The code for index.html is shown below. Note the introduction of jquery.js. After the reference succeeds, jquery will be used to assign the div value, as shown below.

<! DOCTYPE html> <! --> < 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('Reference jquery.js succeeded');
</script>

</html>

Copy the code

The project structure is shown below, you can see that there is no jquery.js, all we need to do is use Nginx to access jquery.js.

4. Nginx configuration

Modify the nginx.conf configuration, where the first location handles background requests and the second handles static resources, as shown below.

worker_processes  1;

events {
    worker_connections  1024;
}

http {

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

      Intercepting static resourceslocation ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ { root /Users/dalaoyang/Downloads/static; }}}Copy the code

5. Test

Start the SpringBoot application and start Nginx.

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

The reference to the static resource is successful, as shown in the red box.

6. Summary

I have been reading about Nginx recently. I will continue to update related nginx articles recently. If you are interested, you can continue to follow them.