Azure App Service에 Vue 애플리케이션을 배포하려고 하면 오류가 발생합니다. "../package.json" 모듈을 찾을 수 없습니다.

Question

문제 없이 로컬에서 빌드하고 제공하는 간단한 Vue SPA가 있지만 GitHub Actions를 통해 Azure App Service를 빌드하고 배포하려고 하면 ':( 애플리케이션이 '' 페이지를 시작했습니다.

아래는 거의 기본 워크플로우인 .yml와 애플리케이션 서비스 구성, 애플리케이션 빌드 시도 시 발생하는 오류 로그입니다.

이 파일은 node_modules가 설치되고 package.json이 생성되는 /home/site/wwwroot 폴더에서 빌드되었다고 가정합니다. 하지만 그렇지 않은 것 같습니다(wwwroot를 확인할 때 파일이 없어 빌드가 실패합니까?)

어떤 도움이라도 대단히 감사하겠습니다. 하루 종일 이 문제에 봉착해 있었고 기꺼이 더 많은 정보를 제공해 드리고 싶습니다. 또한 큰 어려움 없이 NodeJS 백엔드를 앱 서비스에 배포했기 때문에 프로세스에 익숙했습니다. 이 프런트엔드를 시작할 수는 없습니다!

name: Node.js 앱을 빌드하고 Azure Web App에 배포 - 선반 라이브러리

에:
  푸시:
    가지:
      -기본
  작업 흐름_디스패치:

직업:
  짓다:
    실행: 우분투 최신

    단계:
      - 용도: actions/checkout@v2

      - 이름 : Node.js 버전 설정
        용도: actions/setup-node@v1
        와 함께:
          노드 버전: '16.x'

      - 이름: npm install, build, test
        실행: |
          npm 설치
          npm run build --if-present

      - 이름: 배포 작업을 위한 아티팩트 업로드
        용도: actions/upload-artifact@v2
        와 함께:
          이름: 노드 앱
          경로: dist/

  배포:
    실행: 우분투 최신
    요구사항: 빌드
    환경:
      이름: '프로덕션'
      URL: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    단계:
      - 이름: 빌드 작업에서 아티팩트 다운로드
        용도: actions/download-artifact@v2
        와 함께:
          이름: 노드 앱

      - 이름: 'Azure 웹앱에 배포'
        ID: 웹앱에 배포
        용도: azure/webapps-deploy@v2
        와 함께:
          앱 이름: '선반 라이브러리'
          슬롯 이름: '생산'
          게시 프로필: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          패키지: .

Answer 1

Git Hub 작업을 사용하여 Azure App Service를 만들고 VueJS 배포하려면 다음 단계를 확인하세요.

명확한 단계를 알려준 @Anthony Salemo에게 감사드립니다.

명령 프롬프트에서 다음 명령을 실행하여 Vue 애플리케이션을 생성합니다.

으아악

애플리케이션의 루트 디렉토리로 이동cd myvueapp하고

을 실행합니다. 으아악

또는

으아악

• Runnpm run build命令进行生产构建。dist폴더가 생성됩니다.

• GitHub 저장소에 애플리케이션을 푸시하세요. 내 GitHub 저장소에서 사용 가능한 코드를 볼 수 있습니다.

내 GitHub 폴더 구조

• Azure 앱 서비스 만들기

• 应用服务 =>部署中心로 이동하여 GitHub에서 코드 저장소를 선택하세요.

• 처음에 앱에 접속하려고 했을 때 다음 콘텐츠 페이지가 보였습니다.

• in配置 => 常规设置中添加启动命令.

으아악

• 처음에는 동일한 앱 오류가 발생했습니다.

• Git Hub에서 빌드 및 배포 작업이 아직 완료되지 않은 것을 볼 수 있습니다.

• 빌드 배포가 성공할 때까지 기다립니다.

KUDU 콘솔에 배포한 폴더 구조

• 이제 문제없이 앱에 접근할 수 있어요.