Der Versuch, eine Vue-Anwendung für Azure App Service bereitzustellen, führt zu folgendem Fehler: Modul „../package.json' nicht gefunden

Question

Ich habe ein einfaches Vue SPA, das ohne Probleme lokal erstellt und bereitgestellt wird, aber wenn ich versuche, es über GitHub-Aktionen zu erstellen und in Azure App Service bereitzustellen, wird nur Folgendes angezeigt: : (Ein Fehler ist aufgetreten, als die Anwendung gestartet '' Seite.

Unten finden Sie den nahezu standardmäßigen Arbeitsablauf .yml, die Anwendungsdienstkonfiguration und das Fehlerprotokoll beim Versuch, die Anwendung zu erstellen.

Ich gehe davon aus, dass diese Dateien aus dem Ordner /home/site/wwwroot erstellt werden, in dem node_modules installiert und package.json generiert wird. aber es scheint nicht so zu sein (bei der Überprüfung von wwwroot gibt es keine Datei, also schlägt der Build fehl?)

Für jede Hilfe wäre ich sehr dankbar. Ich habe mich den ganzen Tag damit beschäftigt und würde gerne weitere Informationen bereitstellen. Ich habe auch das NodeJS-Backend ohne allzu große Probleme für den App-Dienst bereitgestellt, daher bin ich mit dem Prozess vertraut – ich kann dieses Frontend einfach nicht starten!

name: Node.js-App erstellen und in Azure Web App bereitstellen – Regalbibliothek

An:
  drücken:
    Geäst:
      - hauptsächlich
  Workflow_Dispatch:

Arbeitsplätze:
  bauen:
    läuft weiter: ubuntu-latest

    Schritte:
      - verwendet: actions/checkout@v2

      - Name: Node.js-Version einrichten
        verwendet: actions/setup-node@v1
        mit:
          Knotenversion: '16.x'

      – Name: npm installieren, erstellen und testen
        Lauf: |
          npm installieren
          npm run build --if-present

      - Name: Artefakt für Bereitstellungsjob hochladen
        verwendet: actions/upload-artifact@v2
        mit:
          Name: Node-App
          Pfad: dist/

  einsetzen:
    läuft weiter: ubuntu-latest
    Bedürfnisse: bauen
    Umfeld:
      Name: 'Produktion'
      URL: ${{steps.deploy-to-webapp.outputs.webapp-url }}

    Schritte:
      - Name: Artefakt vom Build-Job herunterladen
        verwendet: actions/download-artifact@v2
        mit:
          Name: Node-App

      – Name: „In Azure Web App bereitstellen“
        ID: Deploy-to-Webapp
        Verwendet: azure/webapps-deploy@v2
        mit:
          App-Name: 'Shelf-Bibliothek'
          Slot-Name: 'Produktion'
          Veröffentlichungsprofil: ${{ Secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          Paket: .

Answer 1

检查以下步骤以创建 VueJS 并使用 Git Hub 操作部署到 Azure 应用服务。

感谢@Anthony Salemo 提供的明确步骤。

在命令提示符下，运行以下命令来创建 Vue 应用程序。

vue create  myvueapp

导航到应用程序的根目录cd myvueapp并运行

yarn serve

或

npm run serve

• 运行npm run build命令进行生产构建。dist文件夹将被创建。

• 将应用程序推送到 GitHub 存储库。 您可以在我的 GitHub 存储库中查看可用的代码。

我的 GitHub 文件夹结构

• 创建 Azure 应用服务

• 导航到您的应用服务 =>部署中心并从 GitHub 中选择代码存储库。

• 最初，当我尝试访问该应用程序时，我看到了以下内容页面。

• 在配置 => 常规设置中添加启动命令。

 pm2 serve /home/site/wwwroot/dist --spa --no-daemon

• 最初我也遇到了同样的应用程序错误。

• 在 Git Hub 中，我可以看到构建和部署操作尚未完成。

• 等待构建部署成功。

我在 KUDU 控制台中部署的文件夹结构

• 现在我可以毫无问题地访问该应用程序了。