Azure Devops yaml 환경 변수 설정 및 디버깅

어제 Azure devops 파이프라인에서 환경 변수의 일부가 명확하지 않은 점을 강조하는 흥미로운 질문을 받았습니다. 다음은 환경 변수가 Azure 파이프라인에서 작동하지 않는지 확인해야 할 몇 가지 사항입니다.

필요한 변수 가져오기 방법 확인

devops 스크립트의 단계로 변수를 가져올 때 env 또는 variables 를 사용할 수 있습니다. env 매개변수는 라이브러리에서 변수를 비밀로 가져올 때 사용됩니다. Azure 파이프라인은 로그의 값 인쇄를 방지합니다. 이 기능이 필요하지 않으면 변수 섹션을 사용할 수 있습니다.

변수 사용

script: |
  npm install
  npm run build
displayName: 'npm install and build'
variables:
  - name: react.app.api.baseurl
    value: 'test'
  - name: react.app.client.id
    value: '333333'

env 사용(Azure Devops는 가능한 경우 변수 내용을 숨깁니다)

script: |
  npm install
  npm run build
displayName: 'npm install and build'
env:
  REACT_APP_BASEURL: ${variableFromTheLibrary}
  REACT_APP_CLIENT_ID: ${variableFromTheLibrary2}

devops가 환경에 대한 변수 이름을 변경하는 방법 이해

Azure devops는 변수 이름을 변경합니다! 이를 이해하는 것이 중요하므로 애플리케이션에서 무엇을 참조해야 하는지 알 수 있습니다.

그래서 이 스크립트가 있었다면...

script: |
  npm install
  npm run build
displayName: 'npm install and build'
variables:
  - name: react.app.api.baseurl
    value: 'test'
  - name: react.app.client.id
    value: '333333'
env:
  REACT_APP_Gradient: '1'

위의 변수 이름의 경우 다음과 같이 앱에서 이를 참조합니다.

index.html에서:

<div id="test">%REACT_APP_CLIENT_ID%</div>
<div id="gradient">%REACT_APP_GRADIENT%</div>

또는 jsx에서:

<Component>{process.env.REACT_APP_API_BASEURL}</Component>
<Component>{process.env.REACT_APP_GRADIENT}</Component>

그래서 당신은 그것을 볼 수 있습니다

. 부분이 밑줄_로 대체됨

이름의 모든 부분은 대문자로 되어 있습니다!

변수 앞에 올바른 힌트를 추가했는지 확인하십시오.

환경 변수를 사용하여 반응 앱을 빌드하는 경우 빌드 시 값을 주입해야 합니다. React 및 기타 라이브러리는 이를 위해 약간의 마법을 사용합니다. 마법이 작동하려면 라이브러리에 어떤 변수가 관련이 있는지 힌트를 주어야 합니다.

create-react-app 앱의 경우 관련 환경 변수 앞에 REACT_APP_ 를 추가해야 합니다. 그렇지 않으면 빌드에서 변수가 대체되지 않습니다.

각 라이브러리에는 고유한 구성이 있습니다! 라이브러리 문서를 읽고 이해해야 합니다. 예를 들어 gatsby를 사용하는 경우 앞에 GATSBY_ 를 추가해야 합니다.

변수를 추가하는 파일이 webpack에서 처리되는지 확인하십시오.

환경 변수는 webpack에 의해 처리됩니다. 반응 앱 생성에서 /public에 넣은 파일은 웹팩에 의해 처리되지 않으므로 환경 변수가 대체되지 않습니다! webpack에서 처리하기 때문에 index.html과 src 폴더의 모든 구성 요소에 변수를 추가할 수 있습니다.
/public의 파일에 변수를 설정해야 하는 경우 Azure Devops를 사용하여 값을 바꿔야 합니다. 이와 같은 것이 파일의 값을 대체합니다.

npm run build && sed -i 's/$%REACT_APP_ClientId%/$${the.variable.value.inazure.devops.script}/' ./build/public/temp.html

마지막으로 변수가 예상대로 사용 가능한지 디버그할 수 있습니다.

Linux 빌드 에이전트에서 빌드하는 경우 printenv 명령을 사용하여 devops 스크립트의 모든 환경 변수 목록을 가져올 수 있습니다.
set를 사용하여 모든 환경 정보를 얻을 수도 있습니다. 이것은 Windows 빌드 에이전트에서도 작동합니다.

- script: |
    set
    npm install
    npm run build

  displayName: 'npm install and build'
  env:
    REACT_APP_APIBaseUrl: 'test'
    REACT_APP_Client_ID: '333333'

로그에 다음 출력이 표시됩니다.

REACT_APP_APIBASEURL=test
REACT_APP_CLIENT_ID=333333

단계 또는 전체 파이프라인을 디버그할 수도 있습니다.

변수 System.Debug를 true로 설정하면 파이프라인 로그에 전체 디버그 스트림이 표시됩니다. 여기에는 사용 가능한 환경 변수가 포함됩니다. 모든 단계를 디버그하기 위해 yaml 파일의 가장 높은 수준에서 이를 설정할 수 있습니다. 또는 단계에 추가할 수 있습니다.

variables:
  - name: System.Debug
    value: true