Блог

Я создал проект с использованием Vue CLI 3 и Express 4, и пока все шло гладко, поскольку у меня был внутренний сервер в одной папке, а интерфейс — в другой, но теперь я останавливаюсь, пытаясь развернуть оба на одном узле хостинга. Позвольте мне рассказать немного больше.

Структура моего проекта на данный момент:

 Project:
  - node_modules/
  - package.json

Project/Frontend (Vue CLI 3):
  - node_modules/
  - package.json
  - app.js
  - dist/
  - <other folders like "public","tests","src",etc>        

Project/Backend (Express 4):
  - node_modules/
  - package.json
  - app.js
  - <other folders like "controllers" and stuff>
  

Теперь проблема в том, что мне нужно объединить оба в одном узловом приложении, чтобы развернуть его на хостинговой платформе.

Я бы хотел, чтобы Express (серверная часть) запускала сервер и обслуживала его dist/ из интерфейса, но проблема в том, что выбранная мной служба хостинга работает только npm install в корневой папке, что бесполезно, так как мне нужен пакет «Express» (и некоторые другие) для запуска сервера. Поскольку он не находится в корневой папке, он не устанавливает никаких пакетов и, очевидно, не запускается.

Я создал конфигурацию npm корневого уровня, чтобы попытаться скомпилировать интерфейс, а затем скопировать dist/ в серверную часть Express. Но поскольку служба хостинга не устанавливает ничего, кроме корневой конфигурации npm, cd подключение к интерфейсу и последующая сборка завершаются неудачей, поскольку она пропускает node_modules .

Мне каким-то образом удалось заставить это работать, установив webpack в npm серверной папки, настроив его для объединения приложения Express и скопировав пакет и dist/ из интерфейса в корневую папку проекта, а затем запустив на npm корневого уровня:

 cd frontend amp;amp; npm run build amp;amp; cd ../backend amp;amp; webpack
  

и после этого нажатие root dist/ на службу хостинга, что вроде бы сработало, но это «неудобно» и не оптимально, тем более, что мне нужно каждый раз создавать его на локальном компьютере и только потом загружать. Если бы я каким-то образом мог использовать пакеты корневого npm для создания интерфейса и серверной части на службе хостинга, это было бы здорово, но я считаю, что здесь другой проблемой является управление версиями, поскольку оба будут использовать одни и те же пакеты npm.

Есть ли какое-либо лучшее и / или более чистое решение для этого?

Если какая-либо деталь отсутствует, просто дайте мне знать.

Заранее спасибо за любую помощь.

Вам следует попробовать Lerna. Это позволяет вам иметь несколько js-проектов в одном репозитории (или одной папке) с package.json в корневой папке, куда вы можете добавить скрипт для взаимодействия со всем вашим проектом.

Например, вы должны иметь возможность добавить сценарий запуска, который будет помещен в вашу папку differents apps, установить ваши зависимости и запустить / построить этот проект.

Вы могли бы использовать скрипт, выполняющий оба npm install , создавая переднюю часть и запуская заднюю.

 const resolve = require('path').resolve
const cp = require('child_process')

const frontend = resolve(__dirname, 'Frontend')
const backend = resolve(__dirname, 'Backend')

cp.exec('npm install', { env: process.env, cwd: frontend }, () => {
  cp.exec('npm run build', { env: process.env, cwd: frontend })
})

cp.exec('npm install', { env: process.env, cwd: backend }, () => {
  cp.exec('npm run start', { env: process.env, cwd: backend })
})