Стоит ли реализовывать такой подход и если да, то как скомпилировать?

Question

[qovalenko]

Подскажите как реализовывают конечный продукт в production на React или Vue оставляют frontend сервер на ноде или можно все скомпилировать и перенести на nginx?
Подскажите возможно ли скомпилировать React или VUE с роутами и другими дополнениями в один js файл, который подключить как обыкновенную статику в том же nginx например?
Просто я думаю если выполнить npm старт и скопировать build.js который вернется в index.html и запустить это в том же nginx с переадресацией маршрутов в index.html - то не получится то, что я планирую?
Спасибо!

Comments

[Сергей delphinpro]

Есть два режима — development и production.
Первый, как вы понимаете, для разработки, в нем даже файлы на диске не создаются (говорю за Vue + Webpack)
Второй — как раз для продашена, всё собирается в несколько файлов (index.html, main.js, main.css, в зависимости от настроек). Эти файлы просто заливаются на сервак.

Для серверного рендера страницы, если он требуется, уже запускают инстанс ноды или прикручивают v8js к php (для любителей поизвращатся). Этот инстанс только собирает страницу при первом запросе, ничего более (в основном для поисковиков, ну и для более быстрого отображения первого запроса). Остальное также подключается статикой.

[qovalenko]

Спасибо!

Answer 1

[Антон Спирин]

Просто я думаю если выполнить npm старт и скопировать build.js который вернется в index.html и запустить это в том же nginx с переадресацией маршрутов в index.html - то не получится то, что я планирую?

Вам надо настроить nginx чтобы он отдавал статику(шрифты, картинки, стили и прочее) и по всем не статическим маршрутам отдавал html с приложением.

Comments

[qovalenko]

Я это и имею ввиду, вопрос был в том, что возможно ли так?
И нужна ли доп опция при компиляции тогда какая-нибудь)

[Антон Спирин]

qovalenko, в этом вся суть сборки

Answer 2

[Robur]

Возможно, но судя по вопросам вам еще во многом предстоит разобраться. Вряд ли вам кто-то будет тут писать конфиги nginx и вебпака.
Гуглите react/vue production build.
и скорее всего еще пригодится роутинг в аппах, history api и как настроить nginx чтобы он по всем роутам которые есть в приложении отдавал нужный js, а при обращении к css/картинкам - отдавал их.
еще есть codesplitting, чтобы грузились только нужные части приложения но для начала сделайте все одним js файлом, чтобы понять как оно все работает.

Comments

[qovalenko]

Спасибо! Я как раз понимаю как настроить url в nginx, вопрос был только в том возможно или нет? И если возможно то как компилировать ну и если можно объяснить как устроен пререндеринг? И я как я сейчас понял можно можно сделать не в один файл а сделать несколько каким-то образом они будут подключаться в зависимости от url в моем SPA?

[Robur]

qovalenko, если вам нужен пререндеринг - то для этого нужна нода, называется это server side rendering.

Если вы хотите чтобы nginx просто приложение отдавал - то делаете продакшен билд, кладете его в nginx и отдаете как обычный сайт - дальше js делает все в браузере.

можно можно сделать не в один файл а сделать несколько каким-то образом они будут подключаться в зависимости от url в моем SPA?

можно. я вам уже написал что погуглить в прошлом сообщении.