[Git] git push 시 Sentry에 sourceMap 업로드 하기 (git yml 작성)

기존엔 sentry-cli 명령어를 이용하여 sourceMap을 업로드 하도록 했지만,

이제 배포할 때마다 버저닝을 하고싶어서 git push 할 때마다 업로드 하도록 설정하려고 한다. 

 

우선 Git > Settings > Secrets and variables 에서  Secrets 'SENTRY_AUTH_TOKEN' 을 추가 한다. 

해당 authToken은 sentry 페이지에서 확인할 수 있다. 

 

프로젝트 상단의 .github/workflows/sentry-upload.yml을 작성한다.

 

나는 main 브랜치에 push 할 경우

Sentry에 sourceMap을 업로드 하고 싶었다. 

name: Sentry Upload

on:
  push:
    branches:
      - main

jobs:
  sentry-upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Sentry CLI
        run: npm install -g @sentry/cli

      - name: Sentry Release
        id: sentry_release
        run: |
          VERSION=$(sentry-cli releases propose-version)
          echo "::set-output name=version::$VERSION"

      - name: Build and Upload Source Maps
        run: |
          yarn
          yarn build
          sentry-cli releases new apple7.0
          sentry-cli releases files apple7.0 upload-sourcemaps build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: 나의 org이름
          SENTRY_PROJECT: 나의프로젝트

(마찬가지로 SENTRY_ORG, SENTRY_PROJECT도 Sentry 홈페이지에서 확인이 가능하다. )

 

releases 버전은 apple7.0 이라는 이름으로 설정했고 

yarn build 이후 build 폴더 밑에 생긴 파일들을 모두 업로드 한다는 의미이다. 

 

 

 

main 브랜치에 push 할 경우

스크립트가 정상적으로 돌게 되고 Sentry에 SourceMap이 업로드 되었다. 

 

Git > Actions 

 

Sentry > Source Map

 

 

 

 

테스트 

임의로 에러를 발생시켜 테스트를 해 보았을 경우, SourceMap 업로드가 정상적으로 동작함을 확인했다. 

버전도 apple7.0으로 알맞게 올라갔다. 

 

실제 운영하는 프로젝트 환경은 NX를 이용하고 있기 때문에

다음 포스팅에는 NX일 경우 어떤식으로 작성하는지 포스팅 하도록 하겠다. 

(사실 build 해서 떨어지는 파일만 올려주면 된다..)

 

 

(추가++)

설정을 조금 더 추가하였다.

 

build directory가 있을 경우에만 sourceMap을 업로드하고, 업로드가 되고난 이후에는 build directory를 이후엔 지워준다.  

 

(아래 코드는 테스트를 위해 yarn build명령어를 제거하였다.)

name: Sentry Upload

on:
  push:
    branches:
      - main

jobs:
  sentry-upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Sentry CLI
        run: npm install -g @sentry/cli

      - name: Sentry Release
        id: sentry_release
        run: |
          VERSION=$(sentry-cli releases propose-version)
          echo "::set-output name=version::$VERSION"
          yarn

      # BUILD & DEPLOY
      - name: Check APP BUILD
        id: my-app-build
        uses: andstor/file-existence-action@v2
        with:
          files: "build/index.html"

      - name: Source Map Upload
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          sentry-cli releases new apple11.0
          sentry-cli releases files apple11.0 upload-sourcemaps build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: 나의_센트리_ORG
          SENTRY_PROJECT: 나의_센트리_프로젝트

      - name: Remove sourcemap
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          rm -rf build/

 

 

check app build 부분에서 걸려서 sourceMap이 업로드 되지 않는 것을 확인할 수 있다.

의도대로 되었다. (굳)

 

 

다시 yarn build를 추가해서 확인해보자. 

name: Sentry Upload

on:
  push:
    branches:
      - main

jobs:
  sentry-upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Sentry CLI
        run: npm install -g @sentry/cli

      - name: Sentry Release
        id: sentry_release
        run: |
          VERSION=$(sentry-cli releases propose-version)
          echo "::set-output name=version::$VERSION"
          yarn
          yarn build

      # BUILD & DEPLOY
      - name: Check APP BUILD
        id: my-app-build
        uses: andstor/file-existence-action@v2
        with:
          files: "build/index.html"

      - name: Source Map Upload
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          sentry-cli releases new apple11.0
          sentry-cli releases files apple11.0 upload-sourcemaps build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: 나의_센트리_ORG
          SENTRY_PROJECT: 나의_센트리_project

      - name: Remove sourcemap
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          rm -rf build/

 

yarn build명령어를 추가하였더니 정상적으로 SourceMap을 업로드 해준다. 굳굳 

 

 

센트리 업로드 버전 package.json 버전과 맞추기 

여기서 한 발자국만 더 나가보자.

보면 Sentry에 업로드할 버전 이름을 직접 입력해주었는데, 그러지말고 package.json에 있는 버전 정보를 들고오자.

      - name: get-npm-version
        id: package-version
        uses: martinbeentjes/npm-get-version-action@v1.3.1

해당 부분을 추가해주고, 

${{ steps.package-version.outputs.current-version}}

이런식으로 사용해주면 package.json 내 version: 0.1.0 이런식으로 되어있다면 0.1.0을 읽어올 수 있다. 

 

 

name: Sentry Upload

on:
  push:
    branches:
      - main

jobs:
  sentry-upload:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Sentry CLI
        run: npm install -g @sentry/cli

      - name: Sentry Release
        id: sentry_release
        run: |
          yarn
          yarn build

      # BUILD & DEPLOY
      - name: Check APP BUILD
        id: my-app-build
        uses: andstor/file-existence-action@v2
        with:
          files: "build/index.html"

      - name: get-npm-version
        id: package-version
        uses: martinbeentjes/npm-get-version-action@v1.3.1

      - name: Source Map Upload
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          sentry-cli releases new ${{ steps.package-version.outputs.current-version}}
          sentry-cli releases files ${{ steps.package-version.outputs.current-version}} upload-sourcemaps build
        env:
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          SENTRY_ORG: 나의_센트리_ORG
          SENTRY_PROJECT: 나의_센트리_프로젝트

      - name: Remove sourcemap
        if: steps.my-app-build.outputs.files_exists == 'true'
        run: |
          rm -rf build/*.js.map;

 

package.json에 있는 version 정보를 그대로 읽어온 것을 확인할 수 있다. 

 

curl 를 이용하여 Sentry cli Install  

한번 더 바꾸어서 현재 하고있는 프로젝트는 NX 위에서 돌아가고 있었다.

이로인해 npm install로 가져오는게 아닌 curl 명령어를 이용하여 가져 오려고 한다.

(npm install을 사용하면 불 필요한 의존성도 모두 가져오게 될까봐)

 

이 부분을 

      - name: Install Sentry CLI
        run: npm install -g @sentry/cli

 

아래 처럼 바꾸어 준다. 

      - name: Install SentryCLI And UPLOAD Source Maps
        if: steps.vaunce_app_exists.outputs.files_exists == 'true'
        run: |
          # Install Sentry CLI
          curl -sL https://sentry.io/get-cli/ | bash
          sentry-cli releases new ${{ steps.package-version.outputs.current-version}}
          sentry-cli releases files ${{ steps.package-version.outputs.current-version}} upload-sourcemaps dist/aws/apps/vaunce-app
          sentry-cli releases finalize ${{ steps.package-version.outputs.current-version}}

 



확인해보면 Upload SourceMap 과정에서 Curl로 Sentry cli 를 Install해서 사용하는 것을 확인할 수 있다. 

https://blog.sentry.io/2019/12/17/using-github-actions-to-create-sentry-releases/

Using GitHub Actions to Create Sentry Releases

참고하자~ 

 

 

Git Action yml을 처음 작성해보았는데 겁 먹었던 것 보다 어렵지 않고 재밌었다.

이제 yml 파일에서 각각 어떤 의미인지 파일을 읽을 수 있게 된 것 같다. 

 

 

push 전에 추가해야할 기능들을 생각해보고 여러가지 적용 해봐야겠다.

 

 

(실제 운영환경인 Nx 프로젝트에서 삽질한 경험)

https://mingg123.tistory.com/221

[NX] Git Action yml NX build 시 These files don't exist: dist/ 문제 해결