La tentative de déploiement d'une application Vue sur Azure App Service génère une erreur : module "../package.json" introuvable

Question

J'ai un simple Vue SPA qui construit et sert localement sans problème, mais lorsque j'essaie de créer et de déployer sur Azure App Service via GitHub Actions, cela entraîne simplement ': (Une erreur s'est produite lorsque le l'application a démarré la page ''.

Vous trouverez ci-dessous le flux de travail presque par défaut .yml, la configuration du service d'application et le journal des erreurs lors de la tentative de création de l'application.

Je suppose que ces fichiers sont créés à partir du dossier /dist de /home/site/wwwroot où node_modules est installé et package.json est généré .. mais cela ne semble pas être le cas (il n'y a pas de fichier lors de la vérification de wwwroot, donc la construction échoue ?)

Toute aide serait grandement appréciée, je suis resté coincé là-dessus toute la journée et je serais heureux de vous fournir plus d'informations. J'ai également déployé le backend NodeJS sur le service d'application sans trop de problèmes, je connais donc le processus - je n'arrive tout simplement pas à démarrer ce frontend !

name : Créer et déployer l'application Node.js sur Azure Web App - bibliothèque d'étagères

sur:
  pousser:
    branches:
      - principal
  workflow_dispatch :

emplois:
  construire:
    exécution : ubuntu-latest

    pas:
      - utilise : actions/checkout@v2

      - nom : Configurer la version de Node.js
        utilise : actions/setup-node@v1
        avec:
          version du nœud : '16.x'

      - nom : npm install, build et test
        exécuter : |
          installation npm
          npm run build --if-présent

      - nom : télécharger un artefact pour la tâche de déploiement
        utilise : actions/upload-artifact@v2
        avec:
          nom : node-app
          chemin : dist/

  déployer:
    exécution : ubuntu-latest
    besoins : construire
    environnement:
      nom : 'Production'
      URL : ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    pas:
      - nom : Télécharger l'artefact à partir du travail de construction
        utilise : actions/download-artifact@v2
        avec:
          nom : node-app

      - nom : « Déployer sur Azure Web App »
        identifiant : déploiement sur l'application Web
        utilise : azure/webapps-deploy@v2
        avec:
          nom de l'application : "bibliothèque d'étagères"
          nom de l'emplacement : 'Production'
          profil de publication : ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          paquet : .

Answer 1

Vérifiez les étapes suivantes pour créer VueJS et déployer sur Azure App Service à l'aide des actions Git Hub.

Merci à @Anthony Salemo pour les étapes claires.

Dans l'invite de commande, exécutez la commande suivante pour créer l'application Vue.

vue create  myvueapp

Accédez au répertoire racine de l'application cd myvueapp et exécutez

yarn serve

ou

npm run serve

• Exécuternpm run build命令进行生产构建。distLe dossier sera créé.

• Poussez l'application vers le référentiel GitHub. Vous pouvez voir le code disponible dans mon dépôt GitHub.

Ma structure de dossiers GitHub

• Créer Azure App Service

• Accédez à votre 应用服务 =>部署中心 et sélectionnez le référentiel de code dans GitHub.

• Au départ, lorsque j'ai essayé d'accéder à l'application, j'ai vu la page de contenu suivante.

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

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

• Au départ, j'ai eu la même erreur d'application.

• Dans Git Hub, je constate que les opérations de build et de déploiement ne sont pas encore terminées.

• Attendez que le déploiement de la build réussisse.

La structure des dossiers que j'ai déployée dans la console KUDU

• Maintenant, je peux accéder à l'application sans aucun problème.