azure 빌드 과정중 만난 에러

azure appservice 빌드 과정중 만난 에러

빌드 하는 과정중 이렇게 빌드가 어려운 건지 몰랐다. 뭐만하면 계속 실패해서 정리해본다. 개복치 인줄 ..;;

Error: Process completed with exit code 1.

1. eslint 에러

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

해결 방법 : 진짜 깔끔하게 안쓴는 변수들 , 의존성 배열 등등 경고 문들을 다 수정해야한다. 의존성 배열에 빈배열을 넣었는데 빈배열도 체크해버린다..
의도해서 의존성 배열로 넣었는데 이부분도 에러로 체크해버린다.

azure를 사용해서 yml 파일로 환경 설정을 하고 있었는데
export Ci=false 로 CI 체크를 안하도록 설정했다.

name: npm install, build, and test
run: |
export CI=false
npm install
npm run build --if-present

2. jest 테스트 과정 에러

테스트 과정에서 에러가 발생해서 빌드 자체가 안되었다.

해결 방법 : 빌드할때와 테스트 단계를 분리하는게 좋다고 해서 테스트 를 하지 않도록 테스트 과정을 빼버렸다.
“ npm run test --if-present” 제거

3. axios 문제

node_modules/axios/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

모듈의 axios 가 문제가 되었다 구글링해보니 jest 할때 axios가 에러가 난다고 했다.

해결 방법 : 명령어로 axios를 테스트에서 제거해준다,
package.json 에서

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

명령어를 추가해준다 .

4. 이미지 파일 기호 문제

이미지 파일로 ‘ & ‘ 기호가 포함되어 있어서 거절되었다.
해결 방법 : 일단 img 파일에 기호를 빼버렸다. 근데 gpt에게 물어보니

module.exports = {
  transformIgnorePatterns: [
    '/node_modules/(?!axios)/',
    'src/img/Q&A icon.svg',
  ], 

이렇게 jset.config.js 파일을 만들어서 사용하면 된다고 한다.

5. artifact 문제

artifact를 업로드 해줘야 하는데 파일 개수가 80000만개 되었다.

With the provided path, there will be 87071 files uploaded
Warning: There are over 10,000 files in this artifact, consider creating an archive before upload to improve the upload performance.
Starting artifact upload
해주는데 파일 1개씩 올리고 있었다. 시간이 엄청 소요 될것 같아서 취소해버렸다.

해결 방법 : gpt 에게 물어봐서 artifact를 압축해서 올릴수는 없는지 물어봤다.
yml 파일을 수정해주었다.

      - name: Compress artifact
        run: |
          zip -r compressed-artifact.zip .

      - name: Upload compressed artifact
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: compressed-artifact.zip

이부분이 zip 파일로 만들어서 올리는 것 같다 .

배포 까지 잘 실행되었는데 배포된 사이트로 접속해보니 압축 파일을 받는 경로가 딱 나와 있는 것이었다..;;

6. 배포 완료 후 사이트가 정상적으로 안나오고 압축 파일 다운이 나오는 경우

접속 해서 들어가니 문구가 Index of  wwwroot/
compressed-artifact.zip 이렇게 딱 나와 있었다.

누르면 압축파일이 저장되는 구조였다.

어떻게 해야 하나 생각해보다가 gpt에게 배포 단계에서 압축을 풀어달라고 했다.

몇번의 삽질 끝에 그냥 yml 파일을 수정하였더니 배포가 잘되었다.

빌드 성공 yml 파일
아래 secrets.key 부분만 자신의 key로 설정하면 된다.

on:
  push:
    branches:
      - "main"
  workflow_dispatch:

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

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: npm install, build, and test
        run: |
          export CI=false
          npm install
          npm run build --if-present

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

  deploy:
    permissions:
      contents: none
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: "Development"
      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-game-assistant"
          slot-name: "Production"
          publish-profile: ${{ secrets.key }}
          package: .

7. 배포가 잘되나 싶더니 두세번 배포하니 git에서 용량을 초과했다고 배포가 되지 않았다. 
Error: Create Artifact Container failed: Artifact storage quota has been hit. Unable to upload any new artifacts

검색해보니 artifact 를 삭제하라고 해서 삭제 했는데도 용량이 줄지 않았다. 
artifact 데이터 보관 날짜도 변경해보고 2일 정도 삽질 하게 되었다. 

chat gpt 에게 아티팩트 제거하는 yml 을 짜달라고 해도 전혀 문제가 해결되지 않았다.

시간이 촉박하여 다른 배포를 찾아보다가 local git 배포를 찾게 되었다.
azure 에서 local git 배포를 하도록 설정하는 것인데 azure에서 고유의 url 을 주고 거기에 push 하면 되었다.

azure 설명을 보면서 따라 했다. push가 되긴 했는데 이미 작업이 완료된 파일이라서 (?) 그런지 git으로 push는 되었는데 배포중에 계속 네트워크 문제로 에러가 나왔다.
추측하기로는 용량이 너무 커서 보내다가 막히는 것 같다.

검색해보다가 git config --global http.postBuffer 524288000 를 찾게 되었다.

이 명령어는 http 프로토콜을 통해 git 서버에 데이터를 전송할때 사용되는 버퍼 크기를 지정해주는 것이다. 500 메가로 지정하게 되었다. chatgpt는 이런 방식은 안알려준다. 그냥 계속 다시 해보라고 말해서 직접 찾았다.