Как происходит деплой современного фронтенда?

Question

[Константин Башаркевич]

Здравствуйте. Вопрос более теоретический, нежели практический. Пытаюсь разобраться в тонкостях современного фронтенда, и какие бы скринкасты я не смотрел, какие бы бойлерплейты не анализировал - везде схожий подход: webpack и все препроцессоры скриптов и стилей устанавливаются в качестве девелоперских зависимостей, т.е. на продакшене их нет. При этом, для вебпака, как правило создают 2 версии конфига: девелоперский и для продакшена, а выбирается конфиг в зависимости от значения переменной окружения NODE_ENV. И во всех туториалах, что мне встречались опускается один важный для меня момент. Каким образом происходит деплой? Когда переменная NODE_ENV принимает значение 'production', передается в консоле?

В начале своего погружения я полагал, что будет некий githook, который будет запускать сборку, но если вебпак и прилагающееся принято не ставить на продакшн, значит есть какие-то практики, незнакомые мне =)

Comments

[Emptyform]

Константин Башаркевич Киньте, плиз, ссылки на толковые скринкасты

[Константин Башаркевич]

Emptyform: learn.javascript.ru/screencast/nodejs learn.javascript.ru/screencast/webpack

Answer 1

[Кирилл Калачев]

Можете посмотреть такие инструменты, как shipit и flightplan. Первый - более модульный, имеет некоторые плагины, а также поддерживает функцию "rolling releases" (чем-то похож на capistrano для ruby или deployer для php), второй же - более упрощенный.
Варианты деплоя есть разные - можно локально собирать или на build-сервере и на прод заливать, а можно собирать уже на проде. Каждый выбирает то, что ему по душе.

Answer 2

[Виктор Логин]

У нам это выглядит так:
Когда в git на ветку мастер назначают тег, происходит запуск сборки docker image.

Сперва собирается фронт

npm run build:react
"build:react": "NODE_ENV=production $(npm bin)/webpack --config webpack.react.js --progress --profile"

Потом идут команды `npm run lint && npm run test`

Затем уже идет сборка docker image, в котором устанавливаем только пакеты нужные для node.js и в конце добавляем полученную папку `dist/*`.
Далее по клику на кнопку происходит обновление сервисов (у нас GitLab)

Comments

[Pavel Malitov]

А сборка фронта в dockerfile указана?

Answer 3

[Константин Китманов]

> Когда переменная NODE_ENV принимает значение 'production',
Как-нибудь так, например:

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
}

Ну а попадание собранного бандла на сервер в проде — вариантов много, от SFTP/scp до CI и docker.

Можно, кстати, и ставить всякие там вебпаки на прод, ничего смертельного в этом нет. У меня на паре проектов стоит post-merge вот такой:

#/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com

# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.

changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

check_run() {
    echo "$changed_files" | grep --quiet "$1" && eval "$2"
}

# Example usage
# In this example it's used to run `npm install` if package.json changed and `grunt build` if files in public/ dir changed.
check_run package.json "npm install"
check_run public/ "grunt build"

Но тут зависит от скорости сборки и от того, какой даунтайм допустим, конечно.

Answer 4

[littleguga]

Что значит не принято?

git clone ваш_репо
npm install
npm deploy

по скрипту deploy вызывается webpack/gulp или что угодно с параметрами production

Более мастерски - использовать docker.

Answer 5

[Александр]

Либо при запуске
NODE_ENV=production ./run_your_script
либо, что более удобно, устанавливаете переменную окружения перманентно на выбранной машине, так как известно, что на этой машине крутится production, на этой staging, а это машина для разработки и отладки.