node.js - 使用 Github Actions 将 Angular 应用程序部署到 Azure 失败。找不到 package.json

Question

我尝试使用 Github Actions 通过 CI/CD 将 Angular(10) WebApp 部署到 Azure，但收到一条错误消息，指出 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\7\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\_logs\2020-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\7\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 测试之后它被卡住了，它不会抛出任何错误，只是停留在那里超过一个小时。

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

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4878b9681c98e97a4d7cad2cad0" rel="noreferrer noopener nofollow">[email protected]</a> postinstall D:\a\SleepDiary\SleepDiary\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> @angular/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98a8580a9d8d9c7d8c7da" rel="noreferrer noopener nofollow">[email protected]</a> postinstall D:\a\SleepDiary\SleepDiary\node_modules\@angular\cli
> node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7a6f796a7972686f5c2d322e322d2f" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e187928497848f9592a1d0cfd3cfd0d2" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4224312734272c363102736c706c7371" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b6a3b5a6b5bea4a390e1fee2fee1e3" rel="noreferrer noopener nofollow">[email protected]</a>: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e086938596858e9493a0d2ced1ced3" rel="noreferrer noopener nofollow">[email protected]</a> (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff998c9a899a918b8cbfcdd1ced1cc" rel="noreferrer noopener nofollow">[email protected]</a>: 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


> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394a555c5c49145d50584b40790917091709" rel="noreferrer noopener nofollow">[email protected]</a> 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

> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d4cbc2c2d78ac3cec6d5dee79789978997" rel="noreferrer noopener nofollow">[email protected]</a> 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平台，会执行ng build命令，构建后生成的dist文件夹中的内容才真正被释放。文档。