VS Code 확장을 게시해야 하는 GitHub 작업

지속적인 통합 및 지속적인 제공(짧은 CI/CD)이라는 용어는 VS Code 확장을 구축하는 개발자를 포함하여 소프트웨어 개발자에게 일반적인 모범 사례입니다. 지난 11월의 VS Code update를 통해 사용자는 이제 개발자가 정기적인 업데이트를 제공하고 초기 피드백을 받기 위해 확장 프로그램의 최신 최첨단 기능을 테스트할 수 있는 시험판에 액세스할 수 있습니다. 이 블로그 게시물에서는 Stateful이 GitHub Actions를 통해 VS Code Marketplace 및 OpenVSX 레지스트리에 대한 Marquee 확장을 릴리스하는 방법을 공유하고자 합니다. Marquee repository에서 전체 예제를 찾을 수 있으며 자유롭게 복사하여 자신의 확장 프로그램에 맞게 조정할 수 있습니다.



이 릴리스 워크플로는 다른 릴리스 파이프라인과 크게 다르지 않고 설정 ➡ 빌드 ➡ 테스트 ➡ 컴파일 ➡ 푸시와 같은 일반적인 단계를 포함하는 것처럼 보이지만 VS에 매우 특정한 몇 가지 흥미로운 세부 사항을 강조하고 싶습니다. 코드 개발자.

first section of the workflow 정의에는 워크플로 이름 옆에 워크플로에 대한 트리거 이벤트가 포함되어 있습니다. 우리의 경우 유지 관리자가 GitHub UI를 통해 릴리스를 수동으로 트리거하도록 결정했습니다. 이를 통해 릴리스 유형(예: 패치, 마이너 또는 메이저), 릴리스 채널 및 릴리스를 시장에 게시해야 하는지 여부를 정의하는 편리한 매개변수 세트를 정의할 수 있습니다.



첫 번째 워크플로 단계는 매우 일반적이며 리포지토리를 체크아웃하고 환경을 설정하고 모든 종속성을 설치합니다.

// ...
jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Clone Repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Setup Node version
        uses: actions/setup-node@v1
        with:
          node-version: 16
      - name: Install dependencies
        run: yarn install --frozen-lockfile
// ...

다음에 오는 대부분의 단계는 안정 또는 에지 릴리스를 실행하는지 여부에 따라 다릅니다. 둘 다 상당히 비슷하지만 TypeScript 및 환경 변수를 컴파일할 때 다릅니다. 확장 코드를 빌드하는 다음 단계를 보면 명확해집니다.

// ...
- name: Build Package
  run: yarn build:dev
  env:
    NODE_ENV: development
    MARQUEE_INSTRUMENTATION_KEY: ${{ secrets.MARQUEE_INSTRUMENTATION_KEY }}
  if: ${{ github.event.inputs.releaseChannel == 'edge' }}
- name: Build Package
  run: yarn build:prod
  env:
    NODE_ENV: production
    MARQUEE_INSTRUMENTATION_KEY: ${{ secrets.MARQUEE_INSTRUMENTATION_KEY }}
  if: ${{ github.event.inputs.releaseChannel == 'stable' }}
// ...

빌드 명령 뒤에는 TypeScript 코드를 컴파일하고 처음에 선택한 릴리스 채널에 따라 개발 또는 프로덕션 모드에서 Webpack을 실행하는 일련의 호출이 있습니다. 이 단계 후에 자동화된 테스트를 실행하거나 릴리스 프로세스로 바로 이동할 수 있습니다. 먼저 마지막 릴리스와 마지막 커밋 사이의 커밋 메시지를 기반으로 변경 로그를 생성합니다. 모든 더 큰 변경 세트에 대한 풀 요청을 생성하고 이를 스쿼시하면 변경 로그가 상당히 포괄적이 됩니다.

// ...
- name: Create Changelog
  run: |
    git log $(git describe --tags --abbrev=0)..HEAD --oneline &> ${{ github.workspace }}-CHANGELOG.txt
    cat ${{ github.workspace }}-CHANGELOG.txt
// ...

다음 단계에서는 새 릴리스 버전을 정의합니다. 이 버전은 다시 릴리스 유형에 따라 다릅니다. 안정적인 릴리스: v1.2.3 또는 에지 릴리스: v1.2.3-edge.0 . VS Code Marketplace의 현재doesn’t support 에지 릴리스 버전을 고려하여 패치 버전 번호를 타임스탬프로 대체하는 버전v1.2.1646405133과 같이 업데이트하는 빌드a little script를 만들었습니다. 이렇게 하면 시험판이 안정적인 버전보다 더 높은 버전을 갖게 되고 계속해서 새로운 시험판을 만들 수 있습니다.

// ...
- name: Setup Git
  run: |
    git config --global user.name "stateful-wombot"
    git config --global user.email "[email protected]"
- name: Get Current Version Number
  run: |
    CURRENT_VERSION=$(cat package.json | jq .version | cut -d'"' -f 2)
    echo "CURRENT_VERSION=$CURRENT_VERSION" >> $GITHUB_ENV
- name: Compile New Version (Edge)
  run: |
    RELEASE_VERSION=$(npx semver $CURRENT_VERSION -i pre${{ github.event.inputs.releaseType }} --preid edge)
    echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
    echo "Bump to $RELEASE_VERSION"
  if: ${{ github.event.inputs.releaseChannel == 'edge' && !contains(env.CURRENT_VERSION, 'edge') }}
- name: Compile New Version (Edge)
  run: |
    RELEASE_VERSION=$(npx semver $CURRENT_VERSION -i prerelease)
    echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
    echo "Bump to $RELEASE_VERSION"
  if: ${{ github.event.inputs.releaseChannel == 'edge' && contains(env.CURRENT_VERSION, 'edge') }}
- name: Compile New Version (Stable)
  run: |
    RELEASE_VERSION=$(npx semver $CURRENT_VERSION -i github.event.inputs.releaseType)
    echo "RELEASE_VERSION=$RELEASE_VERSION" >> $GITHUB_ENV
    echo "Bump to $RELEASE_VERSION"
  if: ${{ github.event.inputs.releaseChannel == 'stable' }}
- name: Version Package
  run: |
    npm version $RELEASE_VERSION
    git tag -a $RELEASE_VERSION -m "$RELEASE_VERSION"
// ...

마지막으로 Visual Studio Code Extension Manager 및 HaaLeo/publish-vscode-extension이라는 GitHub 작업을 사용하여 확장을 패키지하고 게시합니다. 패키징 및 게시 단계를 분리하면 컴파일된.vsix 파일을 아티팩트로 워크플로우에 첨부하고 다운로드로 제공할 수 있다는 이점이 있습니다. GitHub에서 확장 프로그램을 게시할 수 있도록 토큰(워크플로에서 VSC_MKTP_PAT 및 OPEN_VSX_TOKEN 로 명명됨)을 생성해야 합니다.

// ...
- name: Package Extension (Edge)
  if: ${{ github.event.inputs.releaseChannel == 'edge' }}
  run: |
    node .github/scripts/updateEdgeVersion.js
    yarn vsce package --pre-release --yarn --no-git-tag-version --no-update-package-json -o "./marquee-$RELEASE_VERSION.vsix" ${{ github.event.inputs.additionalFlags }}
- name: Package Extension (Stable)
  run: yarn vsce package $RELEASE_VERSION --yarn --no-git-tag-version --no-update-package-json -o "./marquee-$RELEASE_VERSION.vsix" ${{ github.event.inputs.additionalFlags }}
  if: ${{ github.event.inputs.releaseChannel == 'stable' }}
- name: Publish to Visual Studio Marketplace (Edge)
  run: yarn vsce publish --packagePath "./marquee-$RELEASE_VERSION.vsix" --pre-release --yarn --no-git-tag-version --no-update-package-json -p ${{ secrets.VSC_MKTP_PAT }} ${{ github.event.inputs.additionalFlags }}
  if: ${{ github.event.inputs.publishMarketplace == 'yes' && github.event.inputs.releaseChannel == 'edge' }}
- name: Publish to Visual Studio Marketplace (Stable)
  run: yarn vsce publish --packagePath "./marquee-$RELEASE_VERSION.vsix" --yarn --no-git-tag-version --no-update-package-json -p ${{ secrets.VSC_MKTP_PAT }} ${{ github.event.inputs.additionalFlags }}
  if: ${{ github.event.inputs.publishMarketplace == 'yes' && github.event.inputs.releaseChannel == 'stable' }}
- name: Publish to Open VSX Registry (Edge)
  uses: HaaLeo/publish-vscode-extension@v1
  if: ${{ github.event.inputs.publishOpenVSX == 'yes' && github.event.inputs.releaseChannel == 'edge' }}
  with:
    preRelease: true
    pat: ${{ secrets.OPEN_VSX_TOKEN }}
    extensionFile: ./marquee-${{ env.RELEASE_VERSION }}.vsix
- name: Publish to Open VSX Registry (Stable)
  uses: HaaLeo/publish-vscode-extension@v1
  if: ${{ github.event.inputs.publishOpenVSX == 'yes' && github.event.inputs.releaseChannel == 'stable' }}
  with:
    preRelease: false
    pat: ${{ secrets.OPEN_VSX_TOKEN }}
    extensionFile: ./marquee-${{ env.RELEASE_VERSION }}.vsix
// ...

릴리스 워크플로를 마무리하기 위해 릴리스 커밋과 새 git 태그를 다시 GitHub로 푸시하고 컴파일된 확장 파일을 ncipollo/release-action GitHub Action을 사용하여 워크플로에 첨부합니다. 이것은 워크플로의 끝에서 의도적으로 수행되므로 프로세스 중에 문제가 발생한 경우 새 릴리스로 표시하지 않습니다.

// ...
- name: Push Tags
  run: |
    git log -1 --stat
    git push origin main --tags
- run: |
    export GIT_TAG=$(git describe --tags --abbrev=0)
    echo "GIT_TAG=$GIT_TAG" >> $GITHUB_ENV
- name: GitHub Release
  uses: ncipollo/release-action@v1
  with:
    artifacts: "./marquee-*"
    bodyFile: ${{ github.workspace }}-CHANGELOG.txt
    tag: ${{ env.GIT_TAG }}
    prerelease: ${{ github.event.inputs.releaseChannel == 'edge' }}

그리고 그게 다야! 지속적으로 안정적인 시험판을 만들기 위해 적응할 수 있는 상당히 쉽게 채택할 수 있는 GitHub 워크플로입니다. 질문이나 제안 사항이 있으면 GitHub , Discord 또는 Gitter에서 저희를 찾으십시오. 를 잊지 마세요.