Сочетание Express 4 и Vue CLI 3 - PullRequest
Новая
       15

Сочетание Express 4 и Vue CLI 3

0 голосов
/ 06 марта 2019

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

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

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>

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

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

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

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

cd frontend && npm run build && cd ../backend && webpack

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Вы можете использовать скрипт, который запускает оба 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 })
})
0 голосов
/ 14 марта 2019

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

Например, вы должны иметь возможностьчтобы добавить стартовый скрипт, который будет находиться в вашей папке с различными приложениями, установите ваши зависимости при запуске / сборке этого проекта.

...