尝试将 Vue 应用程序部署到 Azure 应用服务，导致错误：找不到模块“../package.json”

Question

我有一个简单的 Vue SPA，可以在本地毫无问题地构建和提供服务，但是当我尝试通过 GitHub Actions 构建并部署到 Azure 应用服务时，它只会导致 ':( 应用程序启动时出现错误'页面。

下面是几乎默认的工作流程 .yml、应用程序服务配置以及尝试构建应用程序时的错误日志。

我假设这些文件是从 /home/site/wwwroot 的 /dist 文件夹构建的，其中安装了 node_modules 并生成了 package.json ..但它好像不是（检查wwwroot时没有文件，所以构建失败？）

任何帮助将不胜感激，我已经为此坚持了一整天，并且很乐意提供更多信息。我还将 NodeJS 后端部署到应用程序服务，没有太多麻烦，所以我熟悉这个过程 - 只是无法启动这个前端！

name: Build and deploy Node.js app to Azure Web App - shelf-library

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: dist/

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'shelf-library'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
          package: .

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 控制台中部署的文件夹结构

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