Храните секреты API в секрете с помощью Gitlab CI и Webpack

Если ваше приложение взаимодействует с какими-либо сторонними 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 устанавливает ряд переменных среды (полный список здесь) в своей среде сборки, чтобы мы могли использовать их наличие, чтобы понять, что происходит.

См. также:  Project Creaite и будущее дизайна продукта

В 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, для которых они необходимы.

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: