Узнайте, как объединить create-react-app с Spring Boot, чтобы получить единый артефакт.
Эй, там! Я разработчик полного стека с более чем 3-летним опытом работы, базирующийся в Западной Бенгалии, Индия. Сегодня я расскажу вам о хитрости настройки, чтобы подготовить структуру вашего проекта для запуска приложений react и spring boot на одном порту и упаковать их как единый артефакт. Вы увидите, насколько это может упростить разработку, когда вы имеете дело с обеими этими технологиями, меняющими правила игры.
Вот ссылка на демонстрационную версию GitHub, которую я собираюсь здесь объяснить.
Сочетает в себе простоту разработки как create-react-app , так и Spring Boot.
Вы можете использовать функцию горячей перезагрузки create-react-app при разработке интерфейса, сохранить страницу после внесения изменений, и она сразу же отразится в браузере.
С помощью Spring Boot вы можете легко управлять версиями для разработки (используя моментальные снимки) и выпускать версии в рабочей среде. Вы можете определить версию и время сборки во время выполнения в Spring Boot с помощью Spring Actuator или Spring Admin, которые могут обеспечить функциональность метаданных сборки и многое другое.
Упакуйте интерфейс и серверную часть в один файл war/jar с оптимизированной производственной сборкой.
Я узнал об этом в одном из моих недавних проектов. В нем есть несколько микросервисов spring boot с интерфейсом react, упакованных и развернутых как отдельные собственные артефакты.
Итак, вот краткое руководство по запуску интерфейса react и серверной части spring boot на одном порту и как упаковать их в один jar-файл.
Во-первых, создайте проект spring boot с помощью https://start.spring.io . Добавьте веб-зависимость. Установите groupId и artifactId на все, что вы хотите. Создайте проект и распакуйте его в свой каталог проекта.
Или, если вы используете Spring Tools Suite, вы можете просто нажать File->New->Spring Starter Project и укажите необходимые детали для создания проекта spring boot.
Ваш первоначальный pom.xml должно выглядеть примерно так.
Структура проекта должна выглядеть следующим образом.
Вы можете запустить приложение прямо сейчас и посмотреть, работает ли оно без каких-либо ошибок. Хотя вы ничего не увидите, если нажмете http://localhost:8080/ .
Теперь перейдите в src/main/resources , создайте папку static . Внутри него создайте test.html файл с некоторым текстом в нем.
Теперь, если вы перезапустите приложение и нажмете http://localhost:8080/test.html вы увидите, что он запускает вашу html-страницу в порт 8080 . Вы можете просмотреть содержимое вашего файла в браузере.
Обслуживание приложения React из Spring Boot на порту 8080 и их объединение
Мы будем использовать вышеупомянутую функцию Spring Boot для обслуживания одной страницы проекта react. Мы будем обслуживать html-страницу из папки static в каталоге target , а не в исходном каталоге.
Теперь давайте создадим приложение react, используя create-react-app . Перейдите в свою папку util src/main в терминале D:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin\src\main > и запустите интерфейс npx create-react-app .
Это должно создать приложение react внутри src/main . Теперь, если вы посмотрите на свою структуру папок, она должна выглядеть следующим образом.
Вы можете запустить приложение react, выполнив команду cd frontend а затем запуск пряжи или/| запуск npm . Он должен запустить приложение react на http://localhost:3000 .
Вы можете создать производственную сборку интерфейса, выполнив yarn build . Ваша структура папок после выполнения команды сборки будет выглядеть следующим образом.
Вам нужно скопировать эту производственную сборку и поместить ее в каталог target/classes вашего проекта, чтобы включить Spring Boot для обслуживания этого index.html когда вы начинаете свой проект
Итак, есть два шага-
- создайте производственную сборку интерфейса
- скопируйте производственную сборку в ${target/classes/}
Конечно, вы не собираетесь делать это вручную. Для этого мы будем использовать два плагина maven .
- интерфейс-maven-plugin для шага 1.
- maven-resources-plugin для шага 2.
Добавьте следующее в свой pom.xml в разделе плагины и обновите раздел свойства , как показано на рисунке.
1.8 ${project.basedir}/src/main/frontend v14.15.4 v1.16.0 1.7.6
com.github.eirslett frontend-maven-plugin ${frontend-maven-plugin.version} ${node.version} ${yarn.version} ${frontend-src-dir} ${project.build.directory} install-frontend-tools install-node-and-yarn yarn-install yarn install build-frontend yarn prepare-package build
Теперь, если вы запустите mvn clean install из D:\Codes_projects\springboot_react_maven_plugin\Spring_React_maven-plugin > maven установит npm, yarn и node локально и запустит сборку npm в каталоге интерфейса.
Структура папок будет выглядеть следующим образом-
Теперь добавьте второй плагин в свой pom.xml .
maven-resources-plugin position-react-build copy-resources prepare-package ${project.build.outputDirectory}/static ${frontend-src-dir}/build false
Добавьте следующую зависимость в раздел зависимостей.
org.projectlombok lombok true
Измените spring-boot-maven-plugin , чтобы включить раздел конфигурации.
org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok
Это гарантирует, что файлы сборки внешнего интерфейса будут скопированы после того, как они были сгенерированы с помощью yarn build . Теперь снова запустите mvn clean install и проверьте target/classes/static каталог из вашего файлового менеджера.
Там будут находиться файлы производственной сборки переднего плана.
Ваш окончательный pom.xml будет выглядеть следующим образом.
4.0.0 org.springframework.boot spring-boot-starter-parent 2.4.2 com.springreact demo 0.0.1-SNAPSHOT demo Run React Frontend and SpringBoot Backend on the same port. 1.8 ${project.basedir}/src/main/frontend v14.15.4 v1.16.0 1.7.6 org.springframework.boot spring-boot-starter-web org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok com.github.eirslett frontend-maven-plugin ${frontend-maven-plugin.version} ${node.version} ${yarn.version} ${frontend-src-dir} ${project.build.directory} install-frontend-tools install-node-and-yarn yarn-install yarn install build-frontend yarn prepare-package build maven-resources-plugin position-react-build copy-resources prepare-package ${project.build.outputDirectory}/static ${frontend-src-dir}/build false
Теперь вы готовы к работе! Запустите проект и перейдите в http://localhost:8080/index.html ВУАЛЯ!! Вы запустили свое приложение React с помощью Spring Boot.
Вы запустили свое приложение React с помощью Spring Boot.
Вы можете добавить контроллеры rest и предоставить конечную точку в качестве начальной точки приложения. Подобно Index Controller , всякий раз, когда приложение загружается, spring boot запускает index.html файл со статическим содержимым из оптимизированной сборки интерфейсного проекта из целевого каталога . Так что вы можете просто посетить http://localhost:8080 и не жестко кодировать index.html имя файла.
Давайте сделаем это. Добавьте контроллер в следующую структуру папок.
package com.springreact.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class IndexController {
@GetMapping("")
public ModelAndView home() {
ModelAndView mav=new ModelAndView("index");
return mav;
}
}
Запустите свое приложение и нажмите http://localhost:8080/ . Ты что-нибудь видел? Нет, правильно!
Вы должны добавить другую зависимость, чтобы это сработало.
org.springframework.boot spring-boot-starter-thymeleaf
Теперь по умолчанию thymeleaf ищет наши шаблоны в src/main/resources/templates . Мы можем поместить туда наши шаблоны и упорядочить их по подкаталогам, и у нас не возникнет никаких проблем.
Итак, давайте попробуем это сделать. Добавьте html-файл в src/main/resources/templates с именем index.html и поместите в него какой-нибудь контент.
Запустите приложение и перейдите на страницу http://localhost:8080 . Вы увидите index.html из src/main/ресурсы/шаблоны обслуживается в порт 8080 .
Теперь, чтобы изменить это поведение по умолчанию и заставить thymeleaf обслуживать статический контент из другого местоположения, вам нужно добавить запись в файл application.properties .
spring.thymeleaf.prefix=file:///D:///Codes_projects//springboot_react_maven_plugin//Spring_React_maven-plugin//target//classes//static/
Здесь я жестко задал путь.
Наконец, теперь, если вы обновите свой проект и запустите его. Вы можете видеть, что приложение react обслуживается непосредственно на порту 8080 .
Вывод
Вы узнали, как использовать spring boot для запуска приложения react. Вы можете запускать как свой интерфейс, так и серверную часть на одном и том же порту. Я объяснил, что вам нужно сделать, чтобы выполнить настройку. Теперь вы можете создать значимое приложение и посмотреть, насколько легко и быстро его разрабатывать с помощью этой настройки. Теперь вы можете запускать интерфейсное приложение с помощью React-скриптов, запустив cd frontend ; yarn start , и разрабатывать с использованием функции горячей перезагрузки create-react-app и получать значимые сообщения об ошибках, имея возможность развернуть приложение для тестирования и производственные среды как единое
Спасибо за чтение!
Пожалуйста, оставьте комментарий, если вы сочтете это полезным. Любые отзывы или предложения приветствуются.
Оригинал: “https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa”