qodunpob
@qodunpob
Look at my code, my code is amazing!

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

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

В начале своего погружения я полагал, что будет некий githook, который будет запускать сборку, но если вебпак и прилагающееся принято не ставить на продакшн, значит есть какие-то практики, незнакомые мне =)
  • Вопрос задан
  • 9896 просмотров
Решения вопроса 3
Можете посмотреть такие инструменты, как shipit и flightplan. Первый - более модульный, имеет некоторые плагины, а также поддерживает функцию "rolling releases" (чем-то похож на capistrano для ruby или deployer для php), второй же - более упрощенный.
Варианты деплоя есть разные - можно локально собирать или на build-сервере и на прод заливать, а можно собирать уже на проде. Каждый выбирает то, что ему по душе.
Ответ написан
Комментировать
BATAZOR
@BATAZOR
Программист, DevOps
У нам это выглядит так:
Когда в 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)
Ответ написан
k12th
@k12th
console.log(`You're pulling my leg, right?`);
> Когда переменная 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"

Но тут зависит от скорости сборки и от того, какой даунтайм допустим, конечно.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
Что значит не принято?

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы