[Устройство] Одностраничное приложение конфигурации Nginx

Nginx
[Устройство] Одностраничное приложение конфигурации Nginx

Это второй день моего участия в Gengwen Challenge.Подробности мероприятия смотрите:Обновить вызов

В этой статье рассказывается, как использовать в соответствии с инженерной практикойNginxНастройте одностраничное приложение.

1. Проблемы

только начал вnginx.confКонфигурация статического сопоставления ресурсов выглядит следующим образом:

root /usr/share/nginx/html/appname/;
index index.html index.htm;

Вышеупомянутая конфигурация может быть доступна в обычном режимеindex.html, вы можете последовательно переходить на другие страницы. Но с помощью браузераbrowserHistoryа такжеrefreshстраница будет сообщать404.

2. Причина

потому что мы развертываем单页面应用, Текущие основные интерфейсные платформы являются одностраничными, такими какReactа такжеVue.

Одна страница просто означает доступ ко всем путям к ресурсам, фактически имеется только одно содержимое страницы (обычно index.html). Фреймворк js, представленный на этой странице, будет перенаправляться к соответствующему компоненту подстраницы (который можно понимать как фрагмент страницы) в соответствии с текущим URL-адресом для логической обработки и рендеринга страницы.

Таким образом, мы напрямую обращаемся к ресурсу страницы (например, /usr/info), этот ресурс не существует, поэтому сервер отчетов сообщит об ошибке 404.

3. Решения

root /usr/share/nginx/html/appname/;
index index.html index.htm;
location / {
         try_files $uri $uri/ /index.html;
}

Принцип заключается в том, что при настройкеtry_filesРесурс страницы не найден. В это время nginx попытается загрузить index.html. После загрузки index.html react-router может работать и соответствовать введенному нами вводу./homeмаршрут так, чтобы отображалась правильная домашняя страница.

4. Полная конфигурация

Полная конфигурация предназначена только для справки.

access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;
	server {
		listen 80;
		# gzip config
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain text/css text/javascript application/json application/javascript              application/x-javascript application/xml;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";
		root /usr/share/nginx/html/appname/;
		index index.html index.htm;

		location / {
                    try_files $uri $uri/ /index.html;
		}

         location ^~ /assets/ {
                	gzip_static on;
                	expires max;
                	add_header Cache-Control public;
         }	
		error_page 500 502 503 504 /500.html;
		client_max_body_size 20M;
         keepalive_timeout 10;
	}
Категории