Приложение Vue с Node API: структура проекта

Question

В своем первом посте я хотел бы узнать ваше мнение относительно приложения Vue с узлом, использующим API.

Для небольшого проекта я работаю над локальным в двух папках: - клиент (VueJs) - сервер (Узел)

И запускать их по отдельности, используя npm: - Npm Run Dev - npm run watch

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

Со стороны VueJ, я создаю свое приложение для производства, используя: npm run build Мое приложение было создано в клиенте / dist

А для своего сервера я могу использовать Forever, Nodemon или что-нибудь еще ...

Но это мой вопрос: Как я могу развернуть оба в одном экземпляре?

До сих пор я думал, что могу просто переместить мою папку dist на серверную часть при ее создании.

Но я бы разделил их, используя два разных порта: один для API, один для клиентской стороны.

Поскольку я учусь один, я не знаю лучших практик, любые советы будут благодарны.

(Кстати, я пытаюсь развернуть его в Google Cloud Instance, но я тоже потерялся)

Спасибо, что прочитали

Answer 1

Подводя итог, вы не можете развернуть свой внешний и внутренний порты на разных портах и ​​ожидать, что они будут общаться друг с другом. Модель безопасности браузера включит и не даст клиенту вернуться назад.

Тем не менее, вы можете развертывать отдельно, если они находятся в одном домене (хотя это могут быть разные субдомены, такие как www.example.com и api.example.com).

Это немного зависит от того, какие облачные ресурсы Google вы используете, но распространенной версией этого будет иметь виртуальную машину из Google Cloud Compute, на которую вы будете загружать и клиента, и сервер, а затем настроить веб-сервер, такой как NGINX обслуживает клиентские файлы по одному пути или поддомену и действует как обратный прокси для вашего API по другому пути или поддомену. Это очень хорошо документированный подход / архитектура.

Answer 2

Вы можете обслуживать их под тем же портом. По сути, вы создаете свой веб-интерфейс, и ваш сервер NodeJS (на котором работает ваш API-интерфейс) обслуживает файлы вашего веб-интерфейса из папки client / dist.

Если вы используете ExpressJS, вы бы обслуживали статические файлы следующим образом:

// relative to where you run the node app
app.use(express.static("path/to/client/dist"));

Документация: https://expressjs.com/en/starter/static-files.html

Для разработки становится немного сложнее, если вы используете dev-сервер webpack / VueJS, так как он работает на другом порту, как ваш API NodeJS. Если вы используете Vue-CLI для своего приложения VueJS, изучите использование прокси-сервера devServer в веб-пакете: https://cli.vuejs.org/config/#devserver-proxy

Для производства в идеале вам нужно разместить веб-сервер (например, Nginx) перед вашим NodeJS для обслуживания статических / dist файлов - меньше нагрузки на ваше приложение NodeJS.

Answer 3

Я не пробовал Google Cloud, однако, лучшие практики таковы: один сервер для внешнего интерфейса и другой для внутреннего. Таким образом, вы можете использовать разные интерфейсы, например, используя один и тот же API. Еще одна вещь, которую вы должны рассмотреть, это аутентификация для выполнения запросов к API. Если вам нужно, у меня есть шаблон Vuejs, который можно полностью развернуть на Heroku.