使用 Github 操作将 angular 应用程序部署到 Azure 失败。 package.json 未找到

Question

我正在尝试使用 Github 操作将 Angular(10) WebApp 部署到 Azure CI/CD，但我收到一条错误消息，指出 package.json 在运行宁 npm install 命令。

这是我的 yml 文件

name: Deploy to Azure with Hexa.ru
on:
  push:
    branches:
    - main
    - release/*

jobs:
  build:

    runs-on: windows-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install
      run: |
        npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
    - name: npm build, and deploy
      env:
        AZURE_SERVICE_PRINCIPAL_ID: ${{ secrets.AZURE_SERVICE_PRINCIPAL_ID }}
        AZURE_SERVICE_PRINCIPAL_PASSWORD: ${{ secrets.AZURE_SERVICE_PRINCIPAL_PASSWORD }}
        AZURE_SERVICE_PRINCIPAL_TENANT: ${{ secrets.AZURE_SERVICE_PRINCIPAL_TENANT }}
      run: |
        npm run hexa:login
        npm run build -- --prod
        npm run hexa:deploy

错误：

Run npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
  npm --prefix D:\home\site\wwwroot\SleepDiary\package.json install
  shell: C:\Program Files\PowerShell\pwsh.EXE -command ". '{0}'"
npm ERR! code ENOLOCAL
npm ERR! Could not install from "" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\npm\cache\_logs20-09-28T06_32_50_591Z-debug.log
Error: Process completed with exit code 1.

我也试过不带参数--prefix，错误依旧（类似）

Run npm install
  npm install
  shell: C:\Program Files\PowerShell\pwsh.EXE -command ". '{0}'"
npm WARN saveError ENOENT: no such file or directory, open 'D:\a\SleepDiary\SleepDiary\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'D:\a\SleepDiary\SleepDiary\package.json'
npm WARN SleepDiary No description
npm WARN SleepDiary No repository field.
npm WARN SleepDiary No README data
npm WARN SleepDiary No license field.

我已经在我的应用程序服务的 Azure 控制台中检查了路径，它应该是 D:\home\site\wwwroot\SleepDiary（您可以忽略 dist 文件夹，我创建了一个仅用于测试的 kudu 部署，但我想通过 github 操作获得相同的结果）

知道怎么做吗运行？

更新

我按照建议将代码移动到存储库的上层文件夹，但 github 操作仍然无法继续。它在 ng test 之后卡住了，它没有抛出任何错误，只是在那里停留了一个多小时。

  Run npm install
  npm install
  npm run build --if-present
  npm run test --if-present
  shell: C:\Program Files\PowerShell\pwsh.EXE -command ". '{0}'"

> core-js@3.6.4 postinstall D:\a\SleepDiary\SleepDiary\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/cli@10.1.3 postinstall D:\a\SleepDiary\SleepDiary\node_modules\@angular\cli
> node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1494 packages from 1234 contributors and audited 1499 packages in 79.932s
found 0 vulnerabilities


> sleep-diary@0.0.0 build D:\a\SleepDiary\SleepDiary
> ng build

Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/autocomplete : es2015 as esm2015
Compiling @angular/material/badge : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/material/bottom-sheet : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/chips : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/stepper : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/datepicker : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling @angular/material/grid-list : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/radio : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/slider : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/material/select : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/paginator : es2015 as esm2015
Compiling @angular/material/sort : es2015 as esm2015
Compiling @angular/material/table : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/material/tree : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 35.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 139 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 168 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.03 MB [initial] [rendered]
Date: 2020-09-29T06:44:33.715Z - Hash: d5c650f4ac85337a8e18 - Time: 17250ms

> sleep-diary@0.0.0 test D:\a\SleepDiary\SleepDiary
> ng test

Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
29 09 2020 06:44:54.035:WARN [karma]: No captured browser, open http://localhost:9876/
29 09 2020 06:44:54.041:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
29 09 2020 06:44:54.042:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 09 2020 06:44:54.047:INFO [launcher]: Starting browser Chrome
29 09 2020 06:45:03.234:WARN [karma]: No captured browser, open http://localhost:9876/
29 09 2020 06:45:07.874:INFO [Chrome 85.0.4183.102 (Windows 10)]: Connected on socket zXnYWqIDSNfH7VtIAAAA with id 11289129
Chrome 85.0.4183.102 (Windows 10): Executed 0 of 7 SUCCESS (0 secs / 0 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 1 of 7 SUCCESS (0 secs / 0.003 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 2 of 7 SUCCESS (0 secs / 0.003 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 3 of 7 SUCCESS (0 secs / 0.004 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 4 of 7 SUCCESS (0 secs / 0.004 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: ''mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: ''mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 5 of 7 SUCCESS (0 secs / 0.087 secs)
ERROR: ''mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 85.0.4183.102 (Windows 10): Executed 6 of 7 SUCCESS (0 secs / 0.104 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 7 of 7 SUCCESS (0 secs / 0.11 secs)
Chrome 85.0.4183.102 (Windows 10): Executed 7 of 7 SUCCESS (0.14 secs / 0.11 secs)
TOTAL: 7 SUCCESS
TOTAL: 7 SUCCESS

Answer 1

你的问题，显然是 package.json 文件的错误路径。

为什么你的 package.json 文件在 SleepDiary 目录中。

正常情况下，文件路径应该是这样的。

在Linux下，package.json文件发布后应该存在于wwwroot文件夹中，本地也应该是这样的：

解决方法是将 package.json 文件移出 SleepDiary 文件夹。因为不清楚你为什么会有SleepDiary这个文件夹，里面有什么，请先试一下。如果方便，您可以更新目录结构的屏幕截图。在问题中，我们可以更好地帮助您。

一般情况下，建议通过FTP或zip部署ng10项目，因为经过个人测试，无论是在linux还是windows下platform，会执行ng build命令，build后生成的dist文件夹里的内容才是真正要发布的。文档。

使用 Github 操作将 angular 应用程序部署到 Azure 失败。 package.json 未找到

Deploying angular app to Azure with Github Actions failed. package.json not found

azure

node.js

continuous-deployment

npm

angular