빌드 배포 에러

[YeonjuSeo]

안녕하세요. Azure static web app을 배포하려는 중 지속적으로 Build and Deploy Error가 발생하여 질문 드립니다. 자주 이러한 문제가 발생하는데 해결이 되는 듯 하다가도 다시 에러가 발생하고 있습니다.
저희는 React를 사용하고 있고 Window를 사용하고 있습니다.

오류 로그

1차 해결

microsoft/Oryx#605 (comment) 를 참고하여
jobs 속에 env: CI: false를 추가하여 1차적으로 문제가 해결한 듯 보였습니다.

그러나 라우팅 작업을 한 뒤 다시 푸쉬를 하니 잘 되던 build&deploy에서 다시 동일한 에러가 발생하기 시작했습니다.
https://github.com/KneeBarista-MyGiftSavor/MyGiftSavor/actions/runs/1128789724

현재 이를 해결하기 위해 해본 것은

1. .github/workflow에 있는 .yml 파일 삭제한 뒤 커밋 후 새로 만들어서 배포 시도(실패)
2. .env 파일을 만들어 커밋 푸쉬 후 배포 시도(실패)

//.env
SKIP_PREFLIGHT_CHECK=true

현재

azure-static-web-apps-black-smoke-070207e10.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
    env:
      CI: false
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_SMOKE_070207E10 }}
          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" # 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.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_SMOKE_070207E10 }}
          action: "close"

원인을 도저히 모르겠습니다...도와주세요!!

[YeonjuSeo]

추가적으로 시도해본 결과 index.js를 바꿔줬더니 실패하기 시작했습니다...

//index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import AppMain from "./AppMain";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <AppMain />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

[kooljay82]

제가 말씀하신 내용들을 잘 이해하지 못했습니다. index.js를 바꿨더니 실패하기 시작했다는게 빌드와 배포가 잘못되기 시작했다는 걸까요??
위의 사항은 빌드 환경과 npm 문제일것 같고 아래의 내용은 잘 이해가 안되서 질문드려요.

[kooljay82]

1. 개발하시는 분과 협업하시는 분 모두가 아래와 같은 버전을 사용하고 계신지 궁금합니다. package.json에 engine을 설정하신 걸로 보아서 아래의 버전에 대해 인지하고 계실것이라고 생각합니다만 혹시나 해서 다시 한번 확인 부탁드립니다. 이전 discussion을 조금 살펴보시면 똑같지는 않지만 비슷한 구간에서 build와 deploy가 실패한 경우들이 있습니다. 프론트엔드 스택이 다르더라도 한번 검토 해보시길 바랍니다.

Using Node version:
v10.23.0

Using Npm version:
6.14.8

2. package-lock.json도 문제의 원인이 될 수 있습니다. 물론 실무에서 이런 방법으로 해결하면 절대 안되지만 package-lock.json 파일을 삭제하고 .gitignore에 등록시켜서 문제 원인을 잠시 회피할 수도 있습니다. 하지만 추천하지는 않습니다. 참고자료

3. npm run build가 실패한 후 antd 모듈을 찾을 수 없다는 메시지가 보입니다. antd 모듈을 한번 설치해 보세요.

• 작업하시는 브랜치를 clone하여 실행해 보았습니다만 제가 다른 환경임에도 불구하고 npm install과 build가 정상적으로 되었습니다. 개발환경과 빌드환경이 다를경우, 패키지의 의존성과 관련한 이유 등으로 빌드가 실패할 수 있습니다. 만약 이 외의 상황이라면 조금 더 자세히 문제를 살펴봐야 할것 같습니다.

@justinyoo 혹시 이와 관련한 유사한 사례가 있을까요?? 제 쪽에서는 별 이슈가 나오질 않고 있어서 문의 드립니다.

[YeonjuSeo]

첫번째로 남겨주신 코멘트는 kooljay82 님께서 말씀해주신 의미로 사용한 말이 맞습니다! 아래에 써주신 상세한 답변 덕분에 해결할 수 있을 것 같습니다. 정말 감사드립니다!

[justinyoo]

45번 액션과 46번 액션 사이에서는 어떤 차이가 있길래 빌드 에러가 나다가 그 빌드 에러가 잡혔나요?

이 부분을 먼저 확인해 보시면 좋겠습니다.

그리고 46번 이후의 모든 액션 워크플로우는 잘 작동하는 것으로 보아 문제가 해결된 것 같이 보입니다. 맞나요?

[YeonjuSeo]

에러가 발생하지 않는 다른 분의 환경에서 빌드&배포를 시도하여 성공하였던 로그입니다..! 봐주셔서 감사합니다!

[YeonjuSeo]

알려주셔서 두 분 모두 정말 감사드립니다! antd 모듈을 찾을 수 없다는 메시지를 덕분에 발견하여 해결할 수 있을 것 같습니다. 읽어주셔서 정말로 감사드립니다!!