Как правильно настроить окружение для разработки?

Question

[ezpy]

Здравствуйте, появился такой вопрос.
Разработал небольшое spa приложение на vuejs
Использовал vue-cli webpack-simple
Теперь хочу подключить к golang бекедну и не знаю как мне лучше настроить свое окружение для удобной разработки.
Планирую использовать vuex, websocket'ы и Для golang использую echo.
Думал такую структуру проекта
--controllers
--models
--template(Тут и храниться vuejs приложение)
....
И я не знаю как мне правильно работать и с golang и с vuejs(Редактирвоать код подключать библиотеки)
Думал может использовать gulp
Если не сложно, подскажите

Answer 1

[Даша Циклаури]

попробуй использовать docker, docker-compose
- один контейнер у тебя будет отвечать чисто за фронтенд (vue-js приложение), если предполагается только статика то используй nginx как базовый образ, монтируй раздел где будет лежать готовая собранная webpack'ом статика. Если требуется какая-то более обширная логика типа хитрого роутинга или серверный рендеринг то используй node как базовый образ, ну и express
- второй контейнер будет отвечать за реализацию api на go
- третий nginx в качестве реверс прокси (он будет раскидывать запросы на нужные порты)
таким образом будут запускаться 3 контейнера: для фронта нода на порту 8081, апи на го на порту 8082, nginx на 80 порту и будет проксировать запросы которые начинаются с /api на 8082 порт остальное на 8081
в своём приложении ты обращаешься на апи примерно так axios.get('/api/test').then(...)

Comments

[ezpy]

Отличный ответ, но есть ещё 3 вопроса

1. Как наладить комфортную разработку?
С go понятно, можно через gulp отлавливать изменения и рестартить приложение

А теперь как поступать с приложение на vuejs?
Вот изменил код во vuejs
Что дальше? Билдить его по новой и перекидывать в папку или есть другие варианты?

2. Правильная ли у меня логика?(Это все на локальном сервере(моем пк), на время разработки)
Я подымаю локальный сервер с API написанном на golang на 8080 порте
Запускаю gulp который отслеживает измениния в vuejs проекте, билдит его и закидывает билд версию во вторую папку, там есть локальный сервер с golang(не хочу использовать nodejs с express'ом, а у меня присутствует роутинг), второй сервер запущен на 8081 порте.

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

3. Буду использовать для асинхроных запросов axios нужно что-то ещё?
Вот если моя логика правильная я скомпилировал приложения и закинул в папку со вторым сервером.
Там нужно сделать hhtp запрос с vue приложения
axios.get('/api/test').then(...)
мне нужно устанавливать дополнительные компоненты перед билдом приложения(vue-axios - не в счет)?
Или ничего не нужно и приложение будет спокойно отправлять get запросы на 8080 порт?

[Даша Циклаури]

ezpy:
1. у меня открыто 2 студии (vs code): первая для go, вторая для фронта. go перезапускаю вручную (потому что на каждое сохранение настроен ребилд и вывод ошибок, форматирование, думаю в настройках проекта/студии можно настроить перезапуск приложения, видимо можно и через галп, но надо смотреть чтобы время ребилда-перезапуска не напрягало)
Посмотри как сделано в nuxt.js (https://github.com/nuxt) - это оболочка над vuejs (генератор кода vue + грамотно настроено окружение), там при сохранении файла приложение само ребилдится.
2. я всё-таки за разделение бэкэнда апи и бэкэнда для статики (nodejs), завязывать go на хостинг статических файлов и роутинга - прошедший путь, он не гибок (но если только это не в качестве оптимизации под какое-то конкретное устройство raspberry pi например, где всё приложение монолит на го и запускается одной командой).
Мой совет-максимально изолировать API и Vuejs тогда будет проще масштабировать на кластере: vue на ноде можно будет поднять сразу несколько инстансов (оч понадобится если придется делать серверный рендеринг), апи поднять тоже несколько для распределения нагрузки, перед этими инстансами стоит 2 контейнера: 1 haproxy и балансирует на разные инстансы API, 2 haproxy и балансирует на разные ноды vuejs. Получится максимально гибкая конфигурация, повторюсь для поддержки зоопарка docker. Это всё для продакшена. Для девелопа достаточно отдельно запущенного go приложения и nodejs приложения. Пока не представляю как при ребилде go приложения, делать что-то "умное" c vuejs, только если авторефреш страницы повесить.
3. Я использую еще rxjs, в сценарии работы с веб-сокетами очень удобно, создали отдельный обработчик веб-сокет пушей с сервера и подписываемся на него с разных компонентов и не паримся.
По поводу установки - да нужно npm install и потом ребилд, но это редкие операции поэтому заносить в логику пересборки не нужно. При разворачивании в докере он сам устанавливает если находит разницу в package.json (то есть он просто пересобирает образ делая npm install)

[Даша Циклаури]

В студии VS Code очень хороший плагин для go, чекает ошибки, форматирует, билдит и т.д. Для vue использую vetur и всякие автокомплиты/автоклоусы для верстки и далее уже по набору tslint/jslint sass/css...

[ezpy]

Даша Циклаури: Тоэе использую vscode.
Спасибо за развернутый ответ.
Очень помогли:3

[ezpy]

Даша Циклаури: Даша Циклаури: Работал с nuxtjs. Но не понравилось что с плагинами которые не поддерживают ssr - очень много гемора.

[Даша Циклаури]

ezpy: я на твой прошлый вопрос (который удалил) не смогу так сходу ответить как сделать релоад, надо смотреть проект и ситуации, базу можно взять из исходников нукста.
С плагинами как раз в нуксте нету гемора: там же есть isServer (проверяешь если клиентская сторона то используешь плагин). Мы в ангуляр 4 это решили на уровне сборки (такие if'ы isServer/isClient выпиливаются во время сборки) - на сервер свой бандл, на клиент - свой.

Answer 2

[Александр Аксентьев]

Окружения их как бы не связаны никак.
Два отдельных проекта/кодовых базы.

Галп и всё такое тут вообще не причем.
Отдельно ставите голанг и пишите код сервера и запускаете.

IDE есть gogland от jetbrains.

Comments

[ezpy]

Не в правильном контексте употребил "Окружение"
Если я правильно понимаю, то я отдельно пишу vuejs приложение и отдельно golang сервер
А как настроить их общение?
Кроме vuex - ещё что-то нужно?

[Александр Аксентьев]

ezpy: vuex как бы тоже здесь не причем.

Общение командами :)
Подключился к серверу и дальше кидаются emitы туда сюда.
На них определенные хендлеры.

Как и с любым другим бекендом.

https://www.youtube.com/watch?v=Jxefsv5Zqkw
Вот пример работы с сокетами.
Думаю всё достаточно понятно.

[ezpy]

Я немного не про это.
Я про саму работу vuejs и golang
Вот я сделал backend и vuejs приложение
Вот мне нужно отправить с vuejs запрос на backend
на стороне vuejs мне необходимо что-то подымать, какой-то http сервер или типа того?

[Александр Аксентьев]

ezpy: vuejs это же фронт, причем здесь опять бекенд?

vuejs должен на каком-то домене открыться, а дальше общаться с golang-вебсокетом.