yml 파일 분석 및 공부한것 정리

yml 파일 분석 및 공부한것 정리

빌드와 배포할때 쓰인다. yml 파일로 인해 많은 고생을 했었다. 처음배우는 부분이라서 혼자서 찾기 힘들었지만 그 시간 만큼 좋은 공부가 되었다.

React+Typescript 관련하여 빌드 및 배포에 사용한 yml 파일이다.

name: Build and deploy Node.js app to Azure Web App - test-

//이름을 쓰는 곳이다 유니크한 이름을 작성하자. yml 파일 작업의 총 이름이 된다. 

on:
  push:
    branches:
      - main
  workflow_dispatch:
  
 //브랜치와 작업 트리거를 설정할수 있다. push  이벤트가 main 에서 발생할때 시작한다는 것이다. 
 
env:
  AZURE_WEBAPP_NAME: reactapptutorial # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: "." # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: "18.x" # set this to the node version to use
//yml 파일만의 env 파일을 만들수 있는 것 같다. 아래 jobs 에서 env 파일로 접근한다. 


permissions:
  contents: read
jobs:
  build:
  //빌드 할때 하는 파이프 라인이다. 
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
 - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: "npm"
      - name: Cache node modules
        uses: actions/cache@v2
        id: cache
   // 아래 npm instll, build, and test 절차에서 npm install 절차를 많이 줄여주는 캐싱작업이다.
        with:
          path: node_modules
          key: npm-packages-${{hashFiles('**/package-lock.json')}}
  
      - name: npm install, build, and test
        run: |
          export CI=false
          npm install
          npm run build:prod --if-present
	// npm install 할수 있는 작업인데 package.json에서 bulid:prod로 prod 작업일때의 명령어를 선언해두었다.
    
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: build
          retention-days: 1
     // artifact 관련사항으로 작업하는 부분이다. 무료로 쓰는 github 계정이라면 artifact 부분이 500메가 이기 때문에 주의 해야 한다. 
     // retention-days:1은 데이터를 1일동안 유지한다는 것이다. 기본값은 90일인데 1일로 변경해주었다. 

  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: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "test"
          slot-name: "Production"
          publish-profile: ${{ secrets. }}
  // 이부분은 azure로 배포하면 자동으로 입력되긴하지만 github에서 key값을 찾을수 있다. 
          package: .

추가 사항으로 공부했을때 참고 한 사이트 이다.
카카오에 근무하면서 올리신것 같은데 많은 도움이 되었다.

원본 url : https://fe-developers.kakaoent.com/2022/220106-github-actions/