Build and deploy fail

[glossyyoon]

안녕하세요! my-first-static-web-app 레포지토리 빌드를 하다가 위와 같은 에러가 발생하여 빌드가 되지 않는 상황입니다.

프레임워크로 vue를 사용하고 있고, os는 mac입니다.

또한 로컬 버전은{ 'vue-app': '0.1.0', npm: '6.14.14', ares: '1.17.1', brotli: '1.0.9', cldr: '39.0', icu: '69.1', llhttp: '2.1.3', modules: '83', napi: '8', nghttp2: '1.42.0', node: '14.17.4', openssl: '1.1.1k', tz: '2021a', unicode: '13.0', uv: '1.41.0', v8: '8.4.371.23-node.76', zlib: '1.2.11' }
와 같은데, 혹시 도움을 주실 수 있는 분이 계신가요??

[kooljay82]

npm i @vue/compiler-sfc --save-dev 해보시겠어요??

[glossyyoon]

로컬에서 말씀해주신 npm i @vue/compiler-sfc --save-dev를 실행했고

다음과 같은 결과를 얻었습니다.

다시 GitHub Actions에서 build and deploy를 해보았지만 여전히 같은 에러가 발생합니다ㅠㅠ

[kooljay82]

vue-loader@15.9.7
vue-template-compiler@2.6.1

의심스러운 사항은 vue의 버전 문제일듯 보이는데... 정확하지는 않네요. 일단 해당 사항을 확인하기 어려워서 즉답은 어려울 것 같습니다.
비슷한 문제를 스택오버 플로우에서 찾아봤는데 위의 모듈을 설치하라고 안내하네요. 해보시고 안되신다면 제가 퇴근 시간에 봐드려야 할것 같아요.

[glossyyoon]

역시 마찬가지로 같은 에러가 발생합니다ㅠㅠ 혹시 몰라 위의 warning도 함께 첨부해봅니다..!
답변 주셔서 감사합니다 !!!

[kooljay82]

해당 과정 vue-app으로 실행해 봤습니다. 저는 로컬에서도 npm install 후 npm run serve 오류가 나더군요.
저의 해결 과정을 공유 드리면,

1. .gitignore 파일에 package-lock.json을 추가

2..package-lock.json 삭제, npm install 후 npm run serve

3. 정상동작 확인

4. repo에 변경 내역 반영(push)

만약 동일한 오류가 계속해서 발생한다면, repo 삭제 후 교육과정을 다시 시작해 보시길 바랍니다. 만약 교육과정을 다시 진행하신다면 1, 2, 3을 먼저 진행해 주세요.

이제 근무에 집중해야 되서 퇴근 시각까지는 대응이 어려운 점 미리 양해 부탁드립니다. ^^;;

[glossyyoon]

바쁘신 와중에 자세한 답변 정말 감사드립니다!!!

오류는 아래 답변으로 해결하였습니다. 😊

[justinyoo]

클라우드 스킬 챌린지 한정인데요, package.json 파일이 npm 7.x 버전 이상에서 작성이 되어 생기는 문제입니다. 따라서, 로컬 개발 환경에서는

npm install -g npm

명령어를 써서 일단 npm 모듈을 7.x 이상으로 업데이트 하시구요, 그다음에 npm install 하시고, 그다음에 npm run build 해 보시면 로컬에서는 문제 없이 잘 될 거예요. 방금 저도 그렇게 했음. 맥 카탈리나 사용자.

---

문제는 저 깃헙 액션인데요, 여기서는 깃헙 액션을 조금 수정하셔야 합니다. 기본으로 node 버전이 14.x 이고, npm 버전이 6.x 여서 생기는 문제거든요. 마찬가지로 npm 버전을 7.x 이상으로 업데이트 하셔야 합니다. 아래와 같이 Build And Devploy 스텝을 찾아서 수정해 보세요. 깃헙 액션 워크플로우 파일은 .github/workflows 디렉토리 아래 azure-static-web-apps-xxxx-xxxx-xxxx.yml 와 같은 형태로 있습니다.

...
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        ### 👇👇👇👇 아래 라인을 넣어 보세요 ###
        env:
          CUSTOM_BUILD_COMMAND: "npm install -g npm && npm install --unsafe-perm && npm run build"
        ### 👆👆👆👆👆 위 라인을 넣어 보세요 ###
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_xxxxxxx }}
...

위와 같이 수정한 후에 다시 푸시해 보면 이제는 잘 될 거예요.

참조: Azure/static-web-apps#484 (comment)

[Yenowme]

안녕하세요 같은 오류로 문제를 해결했는데, my-static-web-app-authn 과제에서는 동일한 오류가 해결되지 않고 위와 같이 떠서 문의드립니다. npm run build가 없다고 나오는 것 같은데... yml파일을 어떻게 수정해야 할 지 감이 잘 안와서요. 혹시 방법 아실까 해서 문의드립니다.

[kooljay82]

missing script는 package.json 파일의 script 영역에 명령문이 없을 경우에 발생하는 오류 입니다.
package.json을 확인하여 build 명령문이 있는지 확인 해보세요.
build가 누락되어 있지 않다면 빌드하고 있는 위치가 바르지 않은 것 같습니다.

[Yenowme]

답변 감사합니다! package.json확인하니 build 명령문이 있고,

폴더도 pwd로확인해서 vue-app으로 맞게 떴는데

동일한 에러가 발생하네요..ㅜㅜ흠...

[justinyoo]

@Yenowme 이건 다른 분들도 다시 검색해 볼 수 있게끔 별도의 질문으로 빼서 질문해 주시겠어요? 그러면 같은 문제를 겪는 다른 분들도 쉽게 검색할 수 있을 듯 합니다.

[Yenowme]

@justinyoo 넵 #59로 올려두었습니다