첫 배포의 맛이 어떠냐...

가은·2024년 3월 21일

Azure CI/CD github actions 배포

주저리

프로젝트 배포를 Azure로 지원해준다 해서 "이 기회? 놓칠 수 없지" 하고 도전
그렇게 나의 일주일은 사라졌다.

사람들이 배포를 왜 그렇게 무서워하나 했는데 뼈저리게 느꼈습니다.

(배포는 리드님도 화나게 만든다)
Azure도 GitHub Actions도 안 써봤는데 이정도면 그냥 몸통 박치기 한게 아닐까🤦‍♀️

~~내가 4개월 동안 블로그 글을 안 쓴 것은 오늘을 위해서였음을...~~

구글링으로 찾아볼 땐 React 프로젝트를 다들 정적 웹 앱으로 배포한 거 밖에 없어서 진짜 곤란했다.
나와 같은 사람들이 나오지 않도록 모든 과정을 한번 써보겠음. 누구든 도움이 되길!

배포 과정

정적 웹 앱? 아니구요~
하도 정적 웹 앱 얘기만 나와서 교육자님께 여쭤봤는데 이런 대답이 왔다.

React app 구현시 static web app으로 구현하신 것이 아니라면 일반 web app으로 하시는 것이 맞습니다. 정적 웹앱을 구현하신게 맞다면 static web app으로 생성하셔도 무방합니다.

백엔드랑 통신해야 하니까 당연히 일반 웹 앱으로 생성 ㄱ

리소스 그룹은 제가 만든게 아니라서 잘 모르겠음요 ㅎㅎ... 이 과정도 필요하시다면 일단 죄송합니다.

1.웹 앱 생성

만들어진 리소스 그룹으로 들어가면 바로 밑에 만들기 누르기

그럼 이 창이 뜨는데 검색창에 Web App 검색 → 3페이지로

그럼 이게 있는데 만드십쇼

2. 웹 앱 설정

구독도 원래 설정되어있는게 있어서 그대로 진행했고, 그 밑에 우리 팀의 리소스 그룹을 설정
이름은 도메인에 들어 갈 이름(서비스명 등)으로 설정
깃헙에 코드 올린 걸로 배포 할 것이기 때문에 코드로 설정
React니까 Node로 고르고 Node 버전에 맞춰서 숫자 선택
지역은 저기로 하래서 했슴다

리눅스 플랜도 뜨는 걸로 골랐고, 가격 책정 플랜은 그닥 큰게 필요하지 않아서 기본 B1으로 설정

깃허브 계정 연결하고 배포 진행할 리포지토리와 브랜치를 설정

이후 만들기 누르면

웹 앱 만들기는 끝!

3.GitHub Actions에서 환경변수 설정하기

.github/workflows/<myapp>.yaml 생성 되었는지 깃헙에서 확인
로컬에선 env 파일에 있는 환경 변수들을 리포지토리 세팅에 들어가서 설정

그렇다면 첫 배포를 실행해볼 수 있는데 우리는 main에 push되면 액션이 돌아가게 해놨음
↓ 우리의 워크플로 파일은 이렇다. (최종)

name: Build and deploy Node.js app to Azure Web App - Code-Catcher-FE

permissions:
  id-token: write
  contents: read

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Login to Azure
        uses: azure/login@v1
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID }}	
          // 이건 이따 설명하겠음
          
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'Code-Catcher-FE'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_************ }}

4. 빌드 성공 시키기

빌드 실패한 애들 코드에서 해결하십쇼
그러고 다시 시도하면 짜피 실패할 것임 헤헷콩

5. Azure와 GitHub 연결하기

이제 GitHub Actions에서 Azure 로그인이 되도록 설정해야한다.
여기에 정말 많은 우여곡절이 있었다...

client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID }}
tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID }}
subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID }}

(AZUREAPPSERVICE_CLIENTID 이런 애들이 환경변수 이름임)
→ 워크플로에서 설정했던 얘네를 찾아서 깃헙 환경변수에 넣어줘야함!

클라이언트 ID 찾기