Nginx реализует динамическое и статическое разделение

Nginx

В этой статье Nginx используется для простого динамического и статического разделения, в этой статье используется Nginx и простая реализация веб-приложения SpringBoot.

1. Подготовка.

В сочетании со сценарием в этой статье вам необходимо установить Nginx и среду Java (запустив проект SpringBoot).

1.1 Об установке Nginx в системе Linux вы можете прочитать в моей статье---(портал).

1.2 В этой статье SpringBoot использует шаблон Thymeleaf, а номер порта проекта — 8888.

1.3 jquery.js хранится в локальном файле /Users/dalaoyang/Downloads/static

2. Что такое динамическое и статическое разделение?

Прежде чем мы сможем понять разделение статического и динамического, мы должны сначала понять, что является динамическим и что является статичным.

Вообще говоря, в веб-разработке динамические ресурсы фактически относятся к этим фоновым ресурсам, а статические ресурсы относятся к HTML, JavaScript, CSS, img и другим файлам.

Вообще говоря, необходимо разделить динамические ресурсы и статические ресурсы и развернуть статические ресурсы на Nginx.Когда придет запрос, если это запрос на статические ресурсы, он пойдет прямо в каталог статических ресурсов, настроенный nginx для получения ресурсов , Если это запрос на динамические ресурсы, Nginx использует принцип обратного прокси для перенаправления запроса в фоновое приложение для обработки, тем самым реализуя разделение динамических и статических ресурсов.

После использования разделения внешнего и внутреннего интерфейса скорость доступа к статическим ресурсам может быть значительно повышена.В то же время разработка внешнего и внутреннего интерфейса может быть распараллелена во время процесса открытия, что может эффективно улучшить время разработки и сократить время совместной отладки.

3. Конфигурация проекта

Измените класс запуска приложения SpringBoot и сделайте простой переход, чтобы корневой путь доступа мог перейти к index.html, как показано в следующем коде.

@SpringBootApplication
@Controller
public class DemoApplication {

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

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

index.html код, показанный ниже, введение jquery.js отметил, ссылки на успешное использование кода назначения jquery div, как показано ниже.

<!DOCTYPE html>
<!--解决th报错 -->
<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>这是一个静态页面</h1>
<div id="test_div"></div>
</body>

<script type="text/javascript">
    $('#test_div').html('引用jquery.js成功');
</script>

</html>

Структура проекта показана ниже, вы можете видеть, что jquery.js нет, все, что нам нужно сделать, это использовать Nginx для доступа к jquery.js.

4. Конфигурация Nginx

Измените конфигурацию nginx.conf, где первое расположение отвечает за обработку фоновых запросов, а второе — за обработку статических ресурсов, как показано ниже.

worker_processes  1;

events {
    worker_connections  1024;
}

http {

   server {
       listen       10000;
       server_name  localhost;
      
      #拦截后台请求
      location / {
        proxy_pass http://localhost:8888;
        proxy_set_header X-Real-IP $remote_addr;
      }

      #拦截静态资源
      location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
        root /Users/dalaoyang/Downloads/static;
       }

    }

}

5. Тест

Запустите приложение SpringBoot и запустите Nginx.

Доступ в браузереhttp://localhost:10000/, как показано на рисунке ниже.

Из содержимого красного прямоугольника на рисунке видно, что ссылка на статический ресурс выполнена успешно.

6. Резюме

Недавно я читал о nginx, и я буду продолжать обновлять статьи, связанные с nginx в последнее время.Если вам интересно, вы можете продолжать обращать внимание.

Категории