마이크로소프트 에저를 사용하다가 만난 에러
기존에 설명서대로 github를 연동해서 github 자체 리액트 레포지토리 개설때에는 문제없이 잘 되었고 vite+react+typescript를 적용하여서 배포를 진행해보고 싶어서
web app 배포를 진행하게 되었다.

뭐가 문제인지 이전 성공된 코드와 살펴 보았을때
azure의 static web app 으로 배포를 진행하기 위해서는
루트 디렉토리에 .github/workflows 폴더 내부에 yml 이라는 확장자 파일이 있어야 했다.

처음 성공때에는 github 리액트 레포지토리로 만들었는데 자체(스스로) 생성이 되어 있었다.

그래서 vite로 진행한 코드에 추가로 생성해주었는데 이부분이 파이프 라인으로
어떻게 배포하고 빌드할지 설정해주는 과정을 담는 코드부분이었다.

어떻게 작성해야 할지 몰라서 기존에 성공한 파일을 그대로 가져다가 생성해주었다.

빌드가 잘 되는가 싶더니 아래와 같은 에러가 발생하게 되었다.

1. 에러

deployment_token was not provieded

배포 토큰이 없다는 뜻이 었는데 이를 해결하기 위해 많이 찾아봤었는데 시도한분이 별로 없는지 공식 사이트의 QNA 만 있었고 velog 같은 글은 적었다.

생각을 해보니 토큰을 그대로 가져왔으니 자체 배포 토큰이 있을것이라 생각하게 되었다.

azure에서 토큰 발행까지는 확인하게 되었다
위치는 정적앱에서 자신이 만든 레포지토리(?) 에 들어가면
위에 배포토큰 관리가 적혀져있다. 토큰값을 받아서 복사두고 깃허브로 가준다.
깃허브로 연동해두었기 때문에 배포 토큰을 관리해줄수 있다.
자신의 azure와 연동 github 레포로 들어와서
setting로 들어가준 이후 옆에 바에서 security -> secrets and variables -> Actions 로 들어가면

Repository secrets 부분에 토큰이 생성되어 있다. 이부분이 자동으로 생성되어 있다면 이 이름을 yml 부분에서 토큰으로 사용하면 된다

yml 파일 
 azure_static_web_apps_api_token: ${{ secrets.가져온 이름}} 

이부분은 해결할수 있었다.

2. bulid 파일 문제

vite+ typescript 로 빌드를 진행하면 dist 폴더로 빌드된 파일이 생성된다.

위의 에러에서는 build 폴더가 없다 라는 뜻이 었는데

이를 vite.config.ts 파일에서 빌드 파일 경로 및 이름을 수정해주면 해결된다.

 build:{
    outDir: 'build'
  },

로 수정하고 배포를 진행할수 있다.

대략적인 yml 코드는 아래와 같다.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          
      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.개별토큰 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.개별토큰 }}
          action: "close"

개별 토큰 부분만 수정해서 활용하면 된다. 아직 완전히 이해하지는 못했지만
대략적으로 삽질하면서 알게 된점은
name 부분을 이름으로 아래 run 을 실행한다.
github action 에서 상황을 볼수 있는데 ui 적으로 name 부분을 제목으로 어떻게 실행되어 가는지 확인이 가능하다. 그리고 빌드에 세부 설정도 할수 있는 것 같다.

간단하게 해결했지만 하루 웬종일 걸려서 빌드 성공까지 할수 있었다.