Если ваше приложение взаимодействует с какими-либо сторонними API-интерфейсами, вероятно, потребуется использовать некоторую информацию для идентификации, например идентификаторы, ключи API или секреты клиента. Вашему приложению они нужны для правильной работы, но вы определенно не хотите регистрировать их в своем репо, особенно если ваше репо является общедоступным.
Итак, что вы можете сделать, если у вас есть бессерверное клиентское приложение и ваше публичное репозиторий git, ваш CI-сервер и ваш хост — все то же самое, что и при использовании Gitlab Pages? Чтобы обойти эту проблему, вот способ настроить Gitlab и webpack так, чтобы он использовал переменные из локального файла во время разработки, а секретные переменные Gitlab во время сборки CI.
Локальный файл конфигурации
Добавьте файл config.js и добавьте к нему секреты:
module.exports = {
CLIENT_ID: "<YOUR_CLIENT_ID>",
CLIENT_SECRET: "<YOUR_CLIENT_SECRET"
}
Добавьте это в свой файл .gitignore, чтобы не регистрировать его. Обратите внимание: вам нужно будет сообщить всем соавторам, что им также потребуется воссоздать файл локально.
Секреты Gitlab
Теперь вам нужно добавить те же значения в секретные переменные вашего проекта на Gitlab.
Нажмите «Настройки» в левом меню и выберите «CI / CD».
В настройках CI / CD разверните Секретные переменные и добавьте значения из файла config.js. Это сделает эти переменные доступными во время сборки в Gitlab CI. Подробнее о секретных переменных здесь.
Настроить Gitlab CI
Если вы еще не настроили это, вам нужно будет добавить файл .gitlab-ci.yml в свое репо, чтобы Gitlab CI собрал и развернул ваше приложение. Подробнее об этом здесь, если вы не делали этого раньше, но, вероятно, это будет выглядеть примерно так:
image: node:9.10
cache:
paths:
- node_modules/
pages:
script:
- npm install
- npm run prod
- mv dist public
artifacts:
paths:
- public
only:
- master
Настроить webpack
Теперь мы готовы настроить webpack, чтобы получать его секреты из нужного места, в зависимости от того, где он запущен. Для этого полезно знать, что Gitlab устанавливает ряд переменных среды (полный список здесь) в своей среде сборки, чтобы мы могли использовать их наличие, чтобы понять, что происходит.
В webpack.config.js:
// Indicates we're building in the CI environment
const isCiBuild = !!process.env.CI;
let clientId;
let clientSecret;
if(isCiBuild) {
clientId = process.env.CLIENT_ID;
clientSecret = process.env.CLIENT_SECRET;
} else {
const config = require("./config");
clientId = config.clientId;
clientSecret = config.clientSecret;
}
// webpack config stuff...
plugins: [
// other plugins...
new webpack.DefinePlugin({
CLIENT_ID: JSON.stringify(clientId),
CLIENT_SECRET: JSON.stringify(clientSecret)
})
]
Теперь везде в вашем приложении у вас будет доступ к переменным CLIENT_ID и CLIENT_SECRET, и вы сможете передавать их в любые вызовы настройки API, для которых они необходимы.
