Рубрики
Uncategorized

Экономьте время, избегая восстановления вашего приложения React в каждом этапе CI

Если у вас есть приложение React, вы можете использовать Env vars, как rage_app_my_env_var в вашем приложении и реагировать … Теги с Azure, DevOps, React, Tutorial.

Если у вас есть приложение React, вы можете использовать ENV Vars, как Rage_app_my_env_var. В вашем приложении и реагирование автоматически вытащит их в ваше приложение при создании производственного приложения.

Это очень полезно, но если у вас есть переменные, которые изменяются для каждой среды, и ваша сборка приложений занимает много времени, вы можете избежать здания без необходимости в CI. Например, у вас может быть среда QA и промежуточная среда, которые имеют разную конфигурацию.

Мы устанавливаем наш код на каждом сборке, и это заняло 5 минут +, чтобы построить каждую среду, поэтому мы должны были сделать его быстрее. Мы изменили наше приложение от использования Rage_app ENV vars Для использования файла конфигурации мы могли бы быстро написать для использования CI.

Наша система CI — Azure Suboops, поэтому сценарии CI здесь специально предназначены для Azure DEVOPS, но они применяются к большинству систем Ci с небольшими изменениями.

Настоящая работа происходит в узле скрипта, который бы ни угодно работал.

Добавьте скрипт, чтобы написать ENV vars в файл

Здесь у нас есть скрипт, который примет все переменные среды, которые мы отображали в конфигурации картографирования и напишем их в файл JavaScript. Мы приложим нашу конфигурацию к окну, когда сценарий запущен.

Этот скрипт проходит через пару секунд по сравнению с 5-10 минут для сборки с проверкой типа.

const fs = require('fs')
const { exit } = require('process')

if (!process.argv[2]) {
  const message =
    'You must provide a file path to write the generated file to as an argument to this script'
  console.error(message)
  exit(1)
}

const providedFilePath = process.argv[2]

const envVarMappings = [
  {
    runTimeConfigProperty: 'appVariableOne',
    envVarName: 'REACT_APP_VARIABLE_ONE',
  },
  {
    runTimeConfigProperty: 'appVariableTwo',
    envVarName: 'REACT_APP_VARIABLE_TWO',
  },
]

const mappedVariables = envVarMappings.map((x) => {
  if (process.env[x.envVarName] === undefined) {
    const message = `The webapp property configured does not have an environment variable set. The environment variable must be present : ${JSON.stringify(
      x
    )}`

    console.error(message)
    exit(1)
  }

  return `\r\n${x.runTimeConfigProperty}: '${process.env[x.envVarName]}',`
})

// write out the lines to a script that attaches the variables to the window
const runtimeConfigFileAsLines = [].concat(
  [`window['runtimeConfig']= {`],
  mappedVariables,
  ['\r\n}']
)

fs.writeFileSync(providedFilePath, runtimeConfigFileAsLines.join(' '))

Измените свое приложение, чтобы использовать файл конфигурации

Добавьте бирку сценария в заголовке раздела Index.html в вашем приложении React. Мы используем % Public_url% Переменная здесь, которая будет заменена реагированием для нас.


  

Это позволяет реагировать на загрузку нашего файла конфигурации, который установит объект конфигурации на объекте окна.

Затем заверните объект конфигурации в интерфейсе, если используете TeampScript. Вы можете пропустить некоторые из этого, если использовать JavaScript.

// These values will be sent to the client so do not add
// secrets here.
export interface RuntimeConfig {
  appVariableOne: string
  appVariableTwo: string
}

export const runtimeConfig: RuntimeConfig = window.runtimeConfig
export default runtimeConfig

Теперь вы можете получить доступ к объекту конфигурации в любом месте, который вы использовали для использования Rage_app_ переменная раньше.

В нашем операторе переменных доступа мы пытаемся использовать файл конфигурации, но если оно не существует, мы будем искать старую переменную среды. Это работает в обратной совместимости с переменными среда.

myThingThatDependsOnEnvironmentVariable(
  runtimeConfig.appVariableOne || process.env.REACT_APP_VARIABLE_ONE
)

Добавить шаг CI, чтобы создать файл конфигурации среды

Мы добавляем шаг CI для запуска генератора файла конфигурации в нашей инфраструктурной папке.

Мы должны камин Это проводится первым.

- script: |
    chmod +x ./infrastructure/pipeline/write-webapp-runtime-config.js
    node ./infrastructure/pipeline/write-webapp-runtime-config.js ./packages/react-client/build/runtime-config.js
  env:
    REACT_APP_VARIABLE_ONE: $(appVariableOne)
    REACT_APP_VARIABLE_TWO: $(appVariableTwo)
  displayName: 'Write react app runtime variables'

Настроить шума

Если у вас есть какие-либо тесты, которые зависят от конфигурации, вам нужно сказать «шутить», чтобы загрузить файл перед запуском тестов.

Для этого вы добавляете файл PRERUN (если у вас уже уже есть) и добавьте это в свойство «Настройка» в настройке «шума»

// add this to a file called "jest.prerunsetup.js" or similar
window.runtimeConfig = window.runtimeConfig || {}

Теперь в вашем jest.config.js Добавьте ссылку на этот файл установки

module.exports = {
  setupFiles: ['./jest.prerunsetup.js'],
}

Настройте другие инструменты

Любой инструмент, который использует компоненты RACT, должны иметь введенную конфигурацию. Наисказанный путь упоминается выше. У каждого тоже будет иметь свой собственный метод впрыска. Например, если вы используете Read SaleBook, вам нужно будет добавить скрипт на заголовок, используя метод Складской книги, описанный здесь Отказ

Добавить файл .StoryBook/Preview-head.html И поп-скрипт заголовка сверху там.

Добавьте локальный файл конфигурации (если хотите)

Это должно просто пойти в ваш << Приложение >>/Private папка, если вы используете Create-raction-app Отказ

window['backrRuntimeConfig'] = {
  appVariableOne: 'value1',
  appVariableTwo: 'value2',
}

Вы можете поместить ваши настройки разработки здесь.

Git игнорируйте локальный файл конфигурации

Так же, как файл .env, который вы захотите .gitignore. Ваша локальная копия конфигурации.

Добавить в .gitignore.

runtime-config.js

Оригинал: «https://dev.to/darraghor/avoid-a-rebuild-of-your-react-app-in-every-ci-stage-and-save-time-3c2e»