<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Nginx</title>
	<atom:link href="https://consultapp.ru/category/stati/nginx/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>Веб-разработка, сопровождение информационных систем</description>
	<lastBuildDate>Fri, 03 Nov 2023 10:08:08 +0000</lastBuildDate>
	<language>ru-RU</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>
	<item>
		<title>Простая конфигурация Nginx для SPA  приложения без SSR</title>
		<link>https://consultapp.ru/%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%b0%d1%8f-%d0%ba%d0%be%d0%bd%d1%84%d0%b8%d0%b3%d1%83%d1%80%d0%b0%d1%86%d0%b8%d1%8f-nginx-%d0%b4%d0%bb%d1%8f-spa-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8/</link>
		
		<dc:creator><![CDATA[Дмитрий]]></dc:creator>
		<pubDate>Sun, 04 Jun 2023 08:57:41 +0000</pubDate>
				<category><![CDATA[Nginx]]></category>
		<category><![CDATA[React JS]]></category>
		<category><![CDATA[Статьи]]></category>
		<guid isPermaLink="false">https://consultapp.ru/?p=1627</guid>

					<description><![CDATA[<p>Билд SPA приложения без SSR, в нашем случае это Vite.js + React, представляет собой набор статических файлов, с отдачей которых справится базовая настройка Nginx с минимальными изменениями. В нашем случае мы используем Webmin/Virtualmin для настройки, но это не особо влияет на саму конфигурацию. Для запуска SPA приложения на базовой конфигурации Nginx сервера, нам не хватает&#8230;</p>
<p>Сообщение <a href="https://consultapp.ru/%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%b0%d1%8f-%d0%ba%d0%be%d0%bd%d1%84%d0%b8%d0%b3%d1%83%d1%80%d0%b0%d1%86%d0%b8%d1%8f-nginx-%d0%b4%d0%bb%d1%8f-spa-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8/">Простая конфигурация Nginx для SPA  приложения без SSR</a> появились сначала на <a href="https://consultapp.ru">ConsultApp.ru</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Билд SPA приложения без SSR, в нашем случае это Vite.js + React, представляет собой набор статических файлов, с отдачей которых справится базовая настройка Nginx с минимальными изменениями. </p>



<span id="more-1627"></span>



<p>В нашем случае мы используем Webmin/Virtualmin для настройки, но это не особо влияет на саму конфигурацию. </p>



<p>Для запуска SPA приложения на базовой конфигурации Nginx сервера, нам не хватает нескольких моментов:</p>



<ol class="wp-block-list">
<li>Переадресация всех путей на наш рут, <strong>/index.html </strong>в данном случае;</li>



<li>Зарезервированный путь для получения/обновления SSL сертификатов.</li>
</ol>



<h2 class="wp-block-heading">Переадресация путей</h2>



<p>Тут нам надо исправить 2 момента:</p>



<pre class="wp-block-code"><code lang="nginx" class="language-nginx">#Установим <strong>root и точку входа</strong>, у нас <strong>index.html</strong> в папка <strong>dist</strong>
root /home/my_domain/my_domain/dist/; 
index index.html;</code></pre>



<pre class="wp-block-code"><code lang="nginx" class="language-nginx"># Укажем, как обрабатывать пути, кроме статических файлов (отбор по расширениям)

location / {
        if (-f $request_filename) {
            	expires max;
            	break;
        }
        if ($request_filename !~ "\.(js|htc|ico|gif|jpg|png|css)$") {
            	rewrite ^(.*) /index.html last;
        }
}
</code></pre>



<h2 class="wp-block-heading">Получение/обновление SSL</h2>



<p>В данном случае мы используем Let&#8217;s Encrypt, Webmin для автоматической работы с этими сертификатами использует папку<strong> /.well-known</strong>, соответственно выделяем ее так, что бы она не обрабатывалась нашим SPA &#8212; например меняем для этого <strong>location</strong> <strong>root</strong>.</p>



<pre class="wp-block-code"><code lang="nginx" class="language-nginx">location /.well-known/ {
	root /home/my_domain/public_html;
}</code></pre>



<h2 class="wp-block-heading">Итоговый шаблон</h2>



<pre class="wp-block-code"><code lang="nginx" class="language-nginx line-numbers">server {
	server_name my_domain.ru www.my_domain.ru;

	# your server IP
	listen 00.00.00.00;

	root /home/my_domain/my_domain/dist/;
	index index.html;

	access_log /var/log/virtualmin/my_domain.ru_access_log;
	error_log /var/log/virtualmin/my_domain.ru_error_log;
	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
	fastcgi_param SERVER_SOFTWARE nginx;
	fastcgi_param QUERY_STRING $query_string;
	fastcgi_param REQUEST_METHOD $request_method;
	fastcgi_param CONTENT_TYPE $content_type;
	fastcgi_param CONTENT_LENGTH $content_length;
	fastcgi_param SCRIPT_FILENAME /home/my_domain/public_html$fastcgi_script_name;
	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
	fastcgi_param REQUEST_URI $request_uri;
	fastcgi_param DOCUMENT_URI $document_uri;
	fastcgi_param DOCUMENT_ROOT /home/my_domain/public_html;
	fastcgi_param SERVER_PROTOCOL $server_protocol;
	fastcgi_param REMOTE_ADDR $remote_addr;
	fastcgi_param REMOTE_PORT $remote_port;
	fastcgi_param SERVER_ADDR $server_addr;
	fastcgi_param SERVER_PORT $server_port;
	fastcgi_param SERVER_NAME $server_name;
	fastcgi_param PATH_INFO $fastcgi_path_info;
	fastcgi_param HTTPS $https;

	location /.well-known/ {
		root /home/my_domain/public_html;
	}

	location / {
        	if (-f $request_filename) {
            		expires max;
            		break;
        	}

        	if ($request_filename !~ "\.(js|ico|gif|jpg|png|css)$") {
            		rewrite ^(.*) /index.html last;
        	}
    	}

	# your server IP
	listen 00.00.00.00:443 ssl;
	ssl_certificate /etc/ssl/virtualmin/PATH_TO_KEY/ssl.combined;
	ssl_certificate_key /etc/ssl/virtualmin/PATH_TO_KEY/ssl.key;
}
</code></pre>



<h2 class="wp-block-heading">Итого</h2>



<p>Очевидно, что все папки и адреса Вам необходимо заменить на собственные, но идея остается прежней: перехватываем все пути и замыкаем на <strong>index.html</strong>, а отдельные служебные пути выделяем в <strong>location</strong> и оставляем например в стандартной <strong>public_html</strong>  для удобства. </p>



<p>Так же при необходимости использования API с этого же сервера, Вы можете самостоятельно добавить <strong>location</strong> по типу <strong>/api/</strong> и сделать редирект на обработчик например.</p>
<p>Сообщение <a href="https://consultapp.ru/%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%b0%d1%8f-%d0%ba%d0%be%d0%bd%d1%84%d0%b8%d0%b3%d1%83%d1%80%d0%b0%d1%86%d0%b8%d1%8f-nginx-%d0%b4%d0%bb%d1%8f-spa-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8/">Простая конфигурация Nginx для SPA  приложения без SSR</a> появились сначала на <a href="https://consultapp.ru">ConsultApp.ru</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
