На самом деле, Сон Гэ много говорил с вами о разделении клиентской части и серверной части. На прошлой неделе Сон Гэ развернул два своих проекта с открытым исходным кодом на сервере, чтобы помочь всем быстро просмотреть их в Интернете (Поздравляем, два проекта Spring Boot + Vue с открытым исходным кодом, разделяющие интерфейс и серверную часть, можно испытать в Интернете.), а потом в группе есть друзья, которые хотят, чтобы Сонг Гэ рассказал о том, как объединить Nginx для развертывания проектов разделения фронтенда и бэкенда? Сегодня мы поговорим на эту тему.
Я должен сказать междоменный
Многих смущает разделение развертываний на клиентскую и серверную часть, и в основном они не понимают, как решать междоменные проблемы. Потому что, когда разрабатывается проект разделения фронтенда и бэкенда, фронтенд проходит через nodejs, для которого нужен отдельный порт, а бэкенд работает через Tomcat или Jetty, для которого тоже нужен порт.Два разных порта результат в междоменном.
Но Сун Гэ уже много раз говорил с вами об этом. Этот вид междоменного взаимодействия не является настоящим междоменным в нашей традиционной разработке. такая междоменная проблема в производственной среде. Поэтому мы не могли решить эту междоменную проблему с помощью JSONP или CORS в прошлом.
При разработке разделения интерфейса и сервера, чтобы смоделировать тестовые данные и смоделировать запрос, интерфейс обычно должен работать с помощью nodejs.Это состояние во время разработки.Вы можете обратиться к этой статье для настройки во время разработки:
После завершения разработки мы скомпилируем и запакуем front-end проект.После завершения компиляции и упаковки остается только куча js,css и html файлов.Мы копируем эти скомпилированные и запакованные файлы на back- завершить проект, а затем перейти к разделу При запуске нет междоменных проблем (например, копирование скомпилированных и упакованных статических файлов в проект Spring Bootsrc/main/resources/staticПод содержанием). Я не буду больше рассказывать об этом методе, думаю, все расскажут, сегодня мы в основном рассмотрим, как развернуть с помощью Nginx.
Убийца Nginx
Объединение Nginx для развертывания проектов разделения клиентской и серверной части является текущим основным решением. Во-первых, его удобно развертывать, а во-вторых, разделение динамического и статического также может эффективно повысить эффективность работы проекта.
Все мы знаем, что ресурсы в нашем проекте включают в себя динамические ресурсы и статические ресурсы, среди которых:
- Динамические ресурсы — это те ресурсы, которые необходимо обрабатывать контейнеру, такие как jsp, freemarker, различные интерфейсы и т. д.
- Статические ресурсы — это те ресурсы, которые не нуждаются в обработке контейнером и могут быть возвращены непосредственно после получения клиентских запросов, таких как js, css, html и картинки в различных форматах, все из которых являются статическими ресурсами.
Раздельное развертывание динамических и статических ресурсов может эффективно повысить скорость загрузки статических ресурсов и эффективность работы всей системы.
В развертывании проекта разделения фронтенда и бекенда мы используем Nginx в качестве обратного прокси-сервера, который может не только проксировать динамические запросы, но и напрямую предоставлять доступ к статическим ресурсам. Давайте взглянем. Рекомендуется сначала прочитать старую статью Song Ge о Nginx, которая может эффективно помочь вам понять следующую конфигурацию:
Развертывание серверной части
Развертывание внутреннего интерфейса в основном зависит от формы проекта.Если это обычный проект SSM, подготовьте Tomcat заранее и разверните проект в Tomcat.Если это проект Spring Boot, вы можете напрямую запустить банку через команды.Если это проект микросервиса, если есть несколько jar-файлов, их можно развернуть в сочетании с Docker (см.Развертывание Spring Boot в удаленные контейнеры Docker одним щелчком мыши), в какой бы форме он ни был, для нас, Java-инженеров, это не проблема, думаю, с этим шагом справится каждый.
Серверный проект можно развернуть на порту, отличном от 80. После успешного развертывания, поскольку серверный проект предоставляет только интерфейс, мы не будем обращаться к нему напрямую. Вместо этого доступ к этому внутреннему интерфейсу осуществляется через переадресацию запросов Nginx.
Сонг Гэ берет в качестве примера небольшую программу, которую я использовал в качестве юридической фирмы в прошлом году. Серверная часть представляет собой проект Spring Boot. Затем я могу развернуть его через Docker или запустить напрямую с помощью команды. Вот простой момент, и я можно запустить банку напрямую с помощью команды следующим образом:
nohup java -jar jinlu.jar > vhr.log &
После успешного запуска бэкенда я не спешу напрямую обращаться к бэкенду, а устанавливаю и настраиваю Nginx и перенаправляю запросы через Nginx.Основное введение и установку Nginx можно найти здесь (Минималистский учебник по Nginx!), я прямо расскажу о соответствующей конфигурации здесь.
Здесь мы делаем следующую настройку в nginx.conf:
Сначала настройте вышестоящий сервер:
upstream zqq.com{
server 127.0.0.1:9999 weight=2;
}
Здесь в основном настраивается адрес сервера, если сервер развернут в кластер, то адресов серверов будет несколько, и тогда запросы можно распределять через веса или хэши ip.
Затем настраиваем правила переадресации на сервере:
location /jinlu/ {
proxy_pass http://zqq.com;
tcp_nodelay on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
После завершения этой настройки, предполагая, что мое текущее доменное имя — javaboy.org, пользователь может передатьhttp://www.javaboy.org/jinlu/**Адрес в формате может обращаться к интерфейсу моего сервера.
Интерфейсное развертывание
Возьмем в качестве примера Vue, если это SPA-приложение, после упаковки проекта это будет index.html и несколько js, css, изображений и шрифтов.Это все статические файлы.Статические файлы мы загрузим в сервер, а затем загружайте статические файлы на сервер в nginx.Настройте доступ к статическим ресурсам в conf, конкретная конфигурация выглядит следующим образом:
location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
root /usr/local/nginx/html/;#所有静态文件直接读取硬盘
expires 30d; #缓存30天
}
Разумеется, я перехватываю по типу ресурса, то есть файлы с суффиксами типа js, css, ico и т.д. не запрашиваются для раздачи, а напрямую читаются из локального /usr/local/nginx/html/ каталог и вернулся в Frontend (нам нужно загрузить статические файлы ресурсов в/usr/local/nginx/html/Под содержанием).
Если на нашем сервере развернуто несколько проектов, такой способ записи не подходит, т.к. статичные файлы фронтенда нескольких проектов должны быть классифицированы и размещены отдельно, в это время мы также можем перехватывать их через путь. следующее:
location /jinlu-admin/ {
root /usr/local/nginx/html/jinlu-admin/;#所有静态文件直接读取硬盘
expires 30d; #缓存30天
}
Таким образом, если путь запроса является запросом в формате /jinlu-admin/, то рассылка запросов будет осуществляться не напрямую, а с локального/usr/local/nginx/html/jinlu-admin/Связанные ресурсы возвращаются в каталог. Настроив таким образом статические ресурсы, мы можем развернуть несколько проектов, а метод развертывания нескольких проектов такой же, как описано выше.
После завершения развертывания, предполагая, что мое доменное имя — javaboy.org, пользователь передаетhttp://www.javaboy.org/jinlu-admin/**Отформатированные запросы могут обращаться к внешним ресурсам.
В это время все обнаружили, что внешние статические ресурсы и внутренний интерфейс теперь находятся в одном домене, поэтому междоменной проблемы нет, поэтому я сначала сказалНетВы должны использовать JSONP или CORS для разрешения междоменного доступа. В особых случаях может понадобиться настроить кросс-доменность в nginx, об этом Songge подробно расскажет позже~
Хорошо, я не знаю, понимают ли это мои друзья? Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение для обсуждения.
Обратите внимание на общедоступную учетную запись [Jiangnan A Little Rain], сосредоточьтесь на технологиях с полным стеком, таких как Spring Boot + микросервисы и разделение интерфейса и сервера, делитесь регулярными видеоуроками, отвечайте на Java после того, как уделите внимание, и получайте Сухие товары Java тщательно приготовлены Songge для вас!